Flask开发猜数字小游戏---聪明的奥特曼

作者：王翔|清风Python

套路开场

连着写了三天的selenium，得换换胃口了，毕竟selenium的关注度不是很高，感觉看的人寥寥无几。虽然是把公众号当做博客，进行知识的记录与分享，但写了文章没人看也是惆怅啊....

本来打算今天休息一天的，可是想想还是明天停更一天，更新公众号22天了，明天算是第一天断更吧。每天回来学习知识，然后再写公众号，熬得身体有些受不了，以后每周还是给自己放一天假吧。

说说今天的内容

web端一直是短板，最近在恶补，今天就想着拿Flask配合jQuery写点js玩玩，css懒得写就用bootstrap的模板吧。写什么内容呢？看标题就一目了然了，猜数字！

先来看看效果：

猜数字游戏展示

为什么会想到这个游戏呢？老婆之前给孩子买了一套类似的卡片游戏，但是被这俩不听话的小兔崽子给撕坏了，所以就做个网页版的，拿手机跟他们玩吧。至于为什么叫聪明的奥特曼？没办法，他俩喜欢奥特曼呗...

看着只有9个数字，但让我一次性猜对还真不能保证次次稳赢，毕竟戴眼镜的眼神儿不好，哈哈。所以悄悄留个console.log：

悄悄作弊

为了避免他俩一直做不对给我闹腾，所以再来一次的时候不会刷新序列，只要按着之前的记忆继续往下走，多点几次肯定是可以赢的。

看着console.log获胜的截个图

当然了刷新浏览器，即可重置序列去开始新游戏了...

简单说说代码

首先说说Flask内容：

# -*- coding: utf-8 -*-
# @Author   : 王翔
# @JianShu  : 清风Python
# @Date     : 2019/6/20 22:24
# @Software : PyCharm
# @version  ：Python 3.7.3
# @File     : app.py

from flask import Flask, render_template
import random

app = Flask(__name__)


@app.route('/')
def index():
   number_list = random.sample(list(range(1, 10)), 9)
   return render_template('index.html', num_list=number_list)


if __name__ == '__main__':
   app.run(host='0.0.0.0')

Flask只负责创建一个随机数，然后去渲染模板并传参，要不是为了flask的httpserver，这东西完全可以考虑用纯前台搞....

再说说html吧：

<div class="container">
    <div>
        <h2 class="clearfix text-center">聪明的奥特曼</h2>
    </div>
    <button class="control btn btn-primary btn-lg btn-block">点击开始游戏</button>
    {% for num in num_list%}
    <div class="col-xs-4 card">
        <div id="{{loop.index0}}" class="box" hidden> {{num}}</div>
    </div>
    {%endfor%}
</div>

用jinjia2创建九宫格，然后用jQuery，控制开始游戏button的disable效果，并设置setInterval和mousedown的监听事件。完美.....

如果大家对这个小项目感兴趣，可以从我的github上下载KingUranus/FlaskTests：https://github.com/KingUranus/FlaskTests，或者公众号内回复“猜数字”获取代码下载地址

The End

明天就不更新了，大半个月了，明晚放松一天，看是开黑呢，还是撸串呢？haha ....

今天的内容就到这里，如果觉得有帮助，欢迎将文章或者我的公众号【清风Python】分享给更多喜欢python的人。最近关注人数基本零增长，心塞啊....