首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

基于flask实现五子棋小游戏

Posted in Python onMay 25, 2021

本文实例为大家分享了基于flask实现五子棋小游戏的具体代码，供大家参考，具体内容如下

前言

首先说明一下，本人方向是java后端，只因老师布置了一个作业，要用flask来做一个五子棋，没办法被逼上梁山，程序不太美观，但是应付作业还是够了的。

废话不多说，下面开锤！

首先整个程序是一个web应用，前端html+css+javaScript（有用到jquery）（基本都是现学的，所以程序很多注释也很丑），后端用的flask框架。

准备工作

**1.**python环境、安装flask

**2.**导入需要用到的包

pip install flask_cors
pip install flask_sqlalchemy

**3.**创建一个flask项目，并将一下代码复制运行

文件结构

图片资源

不做代码的生产者，只做代码的搬运工

前端

游戏页面

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>五子棋</title>
 <style>
 * {
    margin: 0;
    padding: 0;
 }

 body {
    margin-top: 20px;
    margin-left: 20px;
 }

 canvas {
    background-image: url("img/backgroud.jpg");
    border: 1px solid #000;
 }

 .mybutton {
            width: 200px;
            line-height: 40px;
            text-align: center;
            background-color: cornflowerblue;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 20px;
            color: #fff;
        }
 </style>
</head>

<body>
        <canvas width="600" height="600" onclick="play(event)"></canvas>    
        
        <div>
            <input type="button" value="重新开始" onclick="replay()" class="mybutton">    
        </div>
          

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 /*准备工作： 1获取画布，获取画笔对象 */
    var mcanvas = document.querySelector("canvas");
    var ctx = mcanvas.getContext("2d");

    /*准备工作：2创建一个二维数组 用来定义绘制棋盘线*/
    var count = 15;//用来定义棋盘的行数和列数
    var map = new Array(count);

    for (var i = 0; i < map.length; i++) {
        map[i] = new Array(count);
        for (var j = 0; j < map[i].length; j++) {
            map[i][j] = 0;
        }
    }

    /*准备工作：3初始化棋子*/
    var black = new Image();
    var white = new Image();
    black.src = "img/black.png";
    white.src = "img/white.png";


    //开始绘制 1绘制棋盘线
    ctx.strokeStyle = "#fff";
    var rectWH = 40; //设置绘制矩形的大小
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {
            ctx.strokeRect(j * rectWH, i * rectWH, rectWH, rectWH);
        }
    }

    // 用来进行黑白子的切换
    var isBlack = true;

 //开始绘制 2下子
 function play(e) {
    //获取点击canvas的位置值默认，canvas的左上角为（0,0） 点
    var leftOffset = 20;//body 的margin
    var x = e.clientX - leftOffset;
    var y = e.clientY - leftOffset;
    // console.log(x+" "+y);
    // 设置点击点后棋子下在哪里,获取点击的位置进行判断如果超过格子的一半则绘制到下一个点如果小于 则绘制在上一个点上
    var xv = (x - rectWH / 2) / rectWH;
    var yv = (y - rectWH / 2) / rectWH;

    var col = parseInt(xv) + 1;
    var row = parseInt(yv) + 1;
    console.log(xv + " " + yv + " , " + col + " " + row);

    //严格点需要验证 ，验证所输入的点是否在数组中已经存在 ，如果存在 则返回
    if (map[row][col] != 0) {
        alert("此处已经落子");
        return;
    }

    // 切换绘制黑白子
    if (isBlack) {
        ctx.drawImage(black, col * 40 - 20, row * 40 - 20);
        isBlack = false;
        map[row][col] = 1;

        $.ajax({
            url: "http://127.0.0.1:5000/yes",//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {//向服务器端发送的数据
                t: 1,
                row: row,
                col: col,
                
            },
            success: function (data) {//请求成功之后执行的回调函数
                if(data.code===201){
                    alert('黑棋获胜')
                }else if(data.code===202){
                    alert('白棋获胜')
                }
                
            },
            error: function(error){
                console.log(error)
            }
        });

        // Yes(1,row,col)

    } else {
        ctx.drawImage(white, col * 40 - 20, row * 40 - 20);
        isBlack = true;
        map[row][col] = 2;
        $.ajax({
            url: "http://127.0.0.1:5000/yes",//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {//向服务器端发送的数据
                t: 2,
                row: row,
                col: col,
              
            },
            success: function (data) {//请求成功之后执行的回调函数
                if(data.code===201){
                    alert('黑棋获胜')
                }else if(data.code===202){
                    alert('白棋获胜')
                }
                
            },
            error: function(error){
                console.log(error)
            }
        });
        // Yes(2,row,col)
    }


 }

 function replay(){
    $.ajax({
            url: "http://127.0.0.1:5000/replay",//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {//向服务器端发送的数据
                isReplay: true
            },
            success: function (data) {//请求成功之后执行的回调函数
                window.location.href = "game.html";                
            },
            error: function(error){
                console.log(error)
            }
        });
 }


 /*功能扩充：
 1当胜利后 弹框：a是否在来一局 b 精彩回复
 a 如果点击在来一句 清空数据重新开始
 b 精彩回放将棋盘黑白子按照下棋的顺序进行棋子编号2悔棋功能
 3对算法的扩充
 a如果是双三 则直接弹出胜利
 b若是桶四 则直接弹出胜利
 */
</script>
</body>
</html>

登录页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <title></title>
    
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .title {
            font-size: 20px;
            background-color: cornflowerblue;
            color: #fff;
           /*
            * 里面的文字居中
            */
            line-height: 50px;
            text-align: center;
            /*
             *绝对定位
             */
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
        }

        .content {
            margin-top: 110px;
        }

        .mybutton {
            width: 200px;
            line-height: 40px;
            text-align: center;
            background-color: cornflowerblue;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 20px;
            color: #fff;
        }

        .shurukuang {
            display: block;
            margin: 0 auto;
            width: 200px;
            height: 25px;
            margin-top: 1px;
            border: none;
            border-bottom: 1px solid;
            margin-top: 5px;
            text-indent: 4px;
            outline: none;
        }
    </style>
</head>
<body>


<div class="title">
    gobang账户登录
</div>

<div class="content">
    <input id="username" class="shurukuang" type="text" placeholder="手机号" value="yokna">
    <input id="password" class="shurukuang" type="password" placeholder="密码" value="123456">
</div>
<div class="mybutton" onclick="myClick()">登录</div>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    // 请求路径
    var httpurl = "http://127.0.0.1:5000/login";
    // 数据请求
    function myClick() {
        var usernamestr = document.getElementById("username").value;
        var passwordstr = document.getElementById("password").value;
      

        $.ajax({
            url: httpurl,//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {//向服务器端发送的数据
                username: usernamestr,
                password: passwordstr,
            },
            success: function (data) {//请求成功之后执行的回调函数
                console.log(data.code);
                if(data.code!==200){
                    alert("用户名或密码错误")
                }else{
                    window.location.href = "game.html";
                }
                
            },
            error: function(error){
                console.log(error)
            }
        });
    }

</script>

</body>
</html>

欢迎界面

说明：此界面可有可无，对整个游戏没有影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">

    window.onload = function f(){
        var myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.getTime();
    }

    function loadPage(){
        var targetURL = document.querySelector('#url').value;
        console.log(targetURL);
        document.querySelector('#iframePosition').src = targetURL;
    }

</script>


<div>
    
        欢迎来玩五子棋：             
        <input type="text" id="url" value="http://127.0.0.1:5500/templates/game.html" hidden>
        <input type="button" value="开始游戏" onclick="loadPage()">

</div>

<div>
    <h3>加载页面的位置</h3>
    <iframe style="width: 100%;height: 600px" id="iframePosition">

    </iframe>
</div>

</body>
</html>

至此，前端的页面就展示完了

下面是后端的内容

后端

配置文件

SQLALCHEMY_DATABASE_URI = "mysql://root:password@localhost:3306/gobang"
# "数据库：//用户名：密码@host：port/数据库名称"

SQLALCHEMY_TRACK_MODIFICATIONS = False
# 这一行不加会有警告

启动类

# -*- coding:utf-8 -*-

#1.导入flask扩展
# 2.创建flask应用程序实例
# 3.定义路由及视图函数
# 4.启动程序
from flask import Flask, render_template, request
from flask_cors import  *
import pymysql
pymysql.install_as_MySQLdb()
from flask_sqlalchemy import SQLAlchemy
import config

#需要传入__name__ 为了确定资源所在路径
app = Flask(__name__)
CORS(app, supports_credentials=True)
app.config.from_object(config)
db = SQLAlchemy(app)
global map
map = [[0 for i in range(15)] for j in range(15)]
# #flask中定义路由是通过装饰器来实现的，访问路由会自动调用路由下跟的方法，并将执行结果返回


@app.route('/login',methods=["GET","POST"])
def login():
    if request.method == "POST":
        # 以POST方式传参数，通过form取值
        # 如果Key之不存在，报错KeyError，返回400的页面
        username = request.form['username']
        password = request.form['password']
        user = queryUser(username,password)
        if len(user) > 0:
            return {"code": 200, "msg": "成功"}
        else:
            return {"code": 400, "msg": "验证失败"}
            println('验证失败')
        print(username+password)
    else:
        # 以GET方式传参数，通过args取值
        username = request.args['username']
        print(username)
    return {"code": 200,"msg":"成功"}

class User(db.Model):
    __tablename__ = 'user'
    username = db.Column(db.String(255))
    password = db.Column(db.String(255))
    id = db.Column(db.Integer,primary_key=True)


def index():
    user = User(username='你好你好',password='456456')
    #调用添加方法
    db.session.add(user)
    #提交入库，上面已经导入了提交配置，所以不需要在提交了
    db.session.commit()
    return '这是首页'


def queryUser(username,password):
    user = User.query.filter_by(username=username,password=password).all()
    db.session.commit()
    return user

@app.route('/replay',methods=["POST"])
def replay():
    global map
    map = [[0 for i in range(15)] for j in range(15)]
    return {"code": 200,"msg":"成功"}


@app.route('/yes',methods=["POST"])
def yes():
    print('this is yes ')
    t = int(request.form['t'])
    print(t)
    tmprow = request.form['row']
    print(tmprow)
    tmpcol = request.form['col']
    print(tmpcol)
    row = int(tmprow)
    col = int(tmpcol)
    total = 1

    map[int(row)][int(col)] = t
    chessboard = map
    print(chessboard)
    print('this is yes ')
    print(t)
    print(tmprow)
    print(tmpcol)
    #不写注释真容易看混，本少侠就勉强写一点吧
    #这里是要判断水平方向上是否满足获胜条件
    while col - 1 > 0 and chessboard[row][col - 1] == t:
        total = total + 1
        col = col - 1

    row = int(tmprow)
    col = int(tmpcol)
    while col + 1 < 15 and chessboard[row][col + 1] == t:
        total = total + 1
        col = col + 1
    
    if total >= 5:
        if t == 1:
            return {"code": 201, "msg": "黑棋获胜"}
        else:
            return {"code": 202, "msg": "白棋获胜"}

    #判断垂直方向上是否满足获胜条件
    row = int(tmprow)
    col = int(tmpcol)
    while row - 1 > 0 and chessboard[row - 1][col] == t:
        total = total + 1
        row = row - 1

    row = int(tmprow)
    col = int(tmpcol)
    while row + 1 < 15 and chessboard[row + 1][col] == t:
        total = total + 1
        row = row + 1
    
    if total >= 5:
        if t == 1:
            return {"code": 201, "msg": "黑棋获胜"}
        else:
            return {"code": 202, "msg": "白棋获胜"}

    
    #判断pie上是否满足获胜条件
    row = int(tmprow)
    col = int(tmpcol)
    while row - 1 > 0 and col + 1 < 15 and chessboard[row - 1][col + 1] == t:
        total = total + 1
        row = row - 1
        col = col + 1

    row = int(tmprow)
    col = int(tmpcol)
    while row + 1 < 15 and col - 1 > 0 and chessboard[row + 1][col - 1] == t:
        total = total + 1
        row = row + 1
        col = col - 1
    
    if total >= 5:
        if t == 1:
            return {"code": 201, "msg": "黑棋获胜"}
        else:
            return {"code": 202, "msg": "白棋获胜"}


    #判断na上是否满足获胜条件
    row = int(tmprow)
    col = int(tmpcol)
    while row - 1 > 0 and col - 1 > 0 and chessboard[row - 1][col - 1] == t:
        total = total + 1
        row = row - 1
        col = col - 1

    row = int(tmprow)
    col = int(tmpcol)
    while row + 1 < 15 and col + 1 < 15 and chessboard[row + 1][col + 1] == t:
        total = total + 1
        row = row + 1
        col = col + 1
    
    if total >= 5:
        if t == 1:
            return {"code": 201, "msg": "黑棋获胜"}
        else:
            return {"code": 202, "msg": "白棋获胜"}

    return {"code": 203, "msg": "继续"}
           

   

#会运行起一个小型服务器，就会将我们的flask程序运行在一个简单的服务器上，服务器由flask提供，用于测试

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

数据库表

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `user`
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `password` varchar(255) NOT NULL,
  `id` int(16) NOT NULL AUTO_INCREMENT,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('yokna', '123456', '1');
INSERT INTO `user` VALUES ('你好你好', '456456', '2');
INSERT INTO `user` VALUES ('你好你好', '456456', '3');
INSERT INTO `user` VALUES ('orange', '123456', '4');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于flask实现五子棋小游戏

- Author -

Yokna

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python下函数参数的传递(参数带星号的说明)
Sep 19 Python
Python初学时购物车程序练习实例(推荐)
Aug 08 Python
Python中max函数用于二维列表的实例
Apr 03 Python
利用pandas进行大文件计数处理的方法
Jul 25 Python
python中将\\uxxxx转换为Unicode字符串的方法
Sep 06 Python
python中的不可变数据类型与可变数据类型详解
Sep 16 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
Aug 06 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
Jan 25 Python
Python实现转换图片背景颜色代码
Apr 30 Python
浅谈django channels 路由误导
May 28 Python
python中复数的共轭复数知识点总结
Dec 06 Python
Pygame Time时间控制的具体使用详解
Nov 17 Python
浅谈Python中的函数(def)及参数传递操作
May 25 #Python
Python竟然能剪辑视频
python中的None与NULL用法说明
May 25 #Python
判断Python中的Nonetype类型
May 25 #Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
python编写五子棋游戏
浅谈python数据类型及其操作
算法(1) 后端(1) 限流(2) 递归(1) 内置模块(1) Parser(1) 人人对战(1) 时钟(1) 双人对弈(1) tokenizer(1)
You might like
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php防注
2007/01/15 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
【消息提示组件】，兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
jQuery treeview树形结构应用
2021/03/24 jQuery
应用艺术毕业生的自我评价
2013/12/04 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技