接龙规则
成语接龙是中华民族传统的文字游戏。它不仅有着悠久的历史和广泛的社会基础，同时还是体现我国文字、文化、文明的一个缩影，是老少皆宜的民间文化娱乐活动。
成语接龙规则多样，大家一般熟知的是采用成语字头与字尾相连不断延伸的方法进行接龙；用四个字成语的最后一个字与下一句成语的第一个相同的字【音同就可以】，首尾相接不断延伸，形成长龙。
实现分析
数据库信息
先来看看我们的数据库信息：
数据库信息
数据库表idiom分为id,name,speak,meaning,example,hot 几个字段，hot是当时搜索的网站热词排行，跟咱们没有太大关系...主要是name和speak字段。
登陆排行
为了能增强可玩性，我们在每次开场前，允许用户随机输入一个名字。在挑战过程中，针对用户坚持的接龙次数进行排名。
挑战者记录
创建用户排名表：
CREATE TABLE rank ( name VARCHAR (50) NOT NULL, round_num INT NOT NULL );
这里为什么不设置主键呢？主要是排名取前5，用户使用一个名字多次参战，如果犀利的话包揽前5看这也很帅气啊，清一色的都是我，想想都觉得自我满足感爆棚。
游戏界面
首先映入眼帘的是ROUND 1的接龙次数显示，有没有儿时拳皇对打的感觉...
为了帮助大家在玩游戏的同时能学习成语知识，也避免有些生僻字不认识，所以在界面中显示了成语、注音、解释和示例，当然示例不是每个成语都有，网站有啥我就展示啥呗...
游戏界面
成语判断
首先必须是四字的成语，用户输入非四字的成语会弹出警示栏，其次用户填写完成语后，会将成语在数据库中进行检索，如果是成语则进行接龙后返回电脑的匹配结果，进行第二轮的基隆，如果数据库中无此成语会弹出游戏结束的提示“挑战结束：用户输入的成语是自己编的吧！”，返回登陆页，并将用户的挑战结果入库rank表进行排行。
这里需要注意，成语接龙的收尾字可以不一样但音必须相同，包括==声调==哦！
拼音识别
数据库中的成语我们存在拼音了，但用户输入的是汉字，我们如何进行拼音转化呢？这里需要使用到python的一个模块pypinyin。针对这个模块的使用，之前写过一篇文章Python为文档批量注音（生僻字歌词为例），喜欢的朋友可以去看看。用法很简单,但我们需要做到和数据库中相对应才行。
from pypinyin import pinyin pinyin('唇枪舌剑') # output: [['chún'], ['qiāng'], ['shé'], ['jiàn']] # 此处为一个嵌套列表，我们需要转化为数据库中的格式 ' '.join(map(lambda x: x[0], pinyin('唇枪舌剑'))) # output: 'chún qiāng shé jiàn'
代码编写
Jinjia2模板
大家看到不管是用户登录还是游戏界面，外框内容基本一致，基于这种场景使用Jinjia2的模板继承是个很不错的选择：
layout.html主要负责大体框架及相关css和js的引入工作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no"> <title>清风python</title> <link rel="icon" href="{{ url_for('static',filename='favicon.ico') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}"> <script src="{{ url_for('static',filename='js/jquery.min.js') }}"></script> </head> <body> <div class="container container-small"> <div class="content"> <div class="header"> 成语接龙 </div> <div class="block-info"> {% block contents %} {% endblock %} </div> </div> <div class="footer"> ©2019-欢迎关注我的公众号：<a href="https://www.jianshu.com/u/d23fd5012bed">清风Python</a> </div> </div> </body> </html>
login.html涉及到挑战者排行和用户名提交与页面跳转
{% extends "layout.html"%} {% block contents %} <form method="post"> <div class="form-group has-success"> <div class="input-group"> <div class="input-group-addon"> 选手姓名： </div> <input id='name' name="name" class="form-control" required autofocus> </div> </div> <div class="form-group "> <button type="submit" class="form-control btn-primary" id="load">火前留名</button> </div> </form> <div class="form-group "> <span class="label label-info">如果战绩足够出色，你的名字也将出现在下方！</span> </div> <div class="form-group table_show"> <table class="table table-hover table-bordered"> <thead> <tr> <th>排名</th> <th>挑战者</th> <th>对答次数</th> </tr> </thead> <tbody> {% if rank_list|length %} {% for rank in rank_list %} <tr> <th scope="row">{{ loop.index }}</th> <td>{{rank.name}}</td> <td>{{rank.round_num}}</td> </tr> {% endfor %} {% endif %} </tbody> </table> </div> {% endblock %}
game.html主要负责成语接龙游戏的监控与AJAX数据的后台刷新。
{% extends "layout.html"%} {% block contents %} <div class="form-group has-success"> <h3 id='round_num' class="round_num">ROUND 1</h3> </div> <div class="form-group rank"> <table class="table table-hover table-bordered table_show table-condensed"> <tbody> <tr> <th>成语</th> <td id="idiom_name"> {{idiom.name}} ({{idiom.speak}})</td> </tr> <tr> <th>解释</th> <td id="idiom_meaning">{{idiom.meaning}}</td> </tr> <tr> <th>示例</th> <td id="idiom_example"> {{idiom.example}}</td> </tr> </tbody> </table> </div> <div class="form-group has-success"> <div class="input-group"> <div class="input-group-addon" required autofocus> 成语： </div> <input id='user_idiom' class="form-control"> </div> </div> <div class="form-group "> <button class="form-control btn-primary" id="load">用户：{{user}} 作答</button> </div> <script type="text/javascript"> $(function () { $('#load').click(function () { let user_idiom = $('#user_idiom').val(); if (user_idiom.length != 4) { alert("请填写四字成语..."); } else { $.ajax({ url: '/more/' + user_idiom, type: 'get', success: function (data) { $('.result').html(data); if (data['code'] == 200) { $('#round_num').html('ROUND ' + data['round']); $('#idiom_name').html(data['info']['name'] + ' (' + data['info']['speak'] + ')'); $('#idiom_meaning').html(data['info']['meaning']); $('#example').html('ROUND ' + data['info']['example']); } else { alert(data['error']); $(location).attr('href', data['url']); } } }) } }) }) </script> {% endblock %}
Flask装饰器
首先，我们的游戏涉及到SQLite数据库的交互，所以在每次请求前，需要建立数据库，请求结束后需要释放连接。此时我们需要使用到两个装饰器，@app.before_request和@app.teardown_request，before_request见名知意就是在请求访问前调动该装饰器，那么为什么不用对应的@app.after_request呢？因为即便用户代码在执行过程中，出现任何错误，也可以通过@app.teardown_request装饰器最终释放数据库连接，但@app.after_request可不行...
Flask整体代码如下：
import sqlite3 from flask import Flask, render_template, request, g, session, redirect, url_for, jsonify import random from pypinyin import pinyin app = Flask(__name__) DATABASE = 'static/db/database.db' app.secret_key = 'Breeze Python' def connect_db(): return sqlite3.connect(DATABASE) @app.before_request def before_request(): g.db = connect_db() @app.teardown_request def teardown_request(exception): if hasattr(g, 'db'): g.db.close() def query_db(query, args=(), one=True): cur = g.db.execute(query, args) rv = [dict((cur.description[idx][0], value) for idx, value in enumerate(row)) for row in cur.fetchall()] if not query.startswith('select'): g.db.commit() return (rv[0] if rv else None) if one else rv @app.route('/', methods=['GET', 'POST']) def index(): if request.method == 'POST': user = request.form.get('name') session['user'] = user session['round'] = 1 return redirect(url_for('game')) rank_list = query_db('select * from rank order by round_num desc limit 5',one=False) print(rank_list) return render_template('login.html', rank_list=rank_list) @app.route('/game') def game(): if not session.get('user'): return redirect(url_for('index')) id = random.randint(1, 30000) idiom = query_db('select * from idiom where id = ?', [id]) return render_template('game.html', user=session.get('user'), idiom=idiom) @app.route('/more/<user_idiom>') def more(user_idiom): speak_list = pinyin(user_idiom) print(speak_list[0][-1]) idiom_speak = ' '.join(map(lambda x: x[0], speak_list)) if query_db('select * from idiom where speak = ?', [idiom_speak]): new_idiom = query_db("select * from idiom where speak like ('%s%%')" % speak_list[-1][0]) session['round'] = session.get('round') + 1 print({'code': 200, 'round': session.get('round'), 'info': new_idiom}) return jsonify({'code': 200, 'round': session.get('round') + 1, 'info': new_idiom}) else: query_db('replace into rank (name,round_num) values (?,?)', [session.get('user'), session.get('round')]) return jsonify({'code': 404, 'error': "挑战结束：用户输入的成语是自己编的吧！", 'url': request.host_url})
游戏演示
说了这么多，让我们来开一局：
游戏展示
我们使用一个Neo的新用户来进行游戏，随便接龙了几次，然后我编了一个“蝉鸣鸟叫”的成语结束这次演示，不然好好答不来个几百轮的那里能结束啊，哈哈...可以看到游戏结束后退回到首页，并进行了挑战排序。还好没几个号，不然排不到前五都看不到效果了...
手机搭建项目
既然上一篇的天气预报工程可以搭建到手机，那么这篇成语接龙，也一样来试试呗。
代码clone
代码我已经上传到了我的git仓库，手机登陆Termux直接clone下载即可：
git clone https://github.com/KingUranus/IdiomsGame.git
pipenv导入
进入clone好的代码路径，之后输入pipenv install创建虚拟环境并下载依赖的模块
键入pipenv shell 进入虚拟环境
通过flask run运行我们的Flask app程序...
image.png
image.png
image.png
The End
今天的Flask项目开发成语接龙游戏就到这里。
