首页
所有分类
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 sys.path详细介绍
Oct 17 Python
Django实现的自定义访问日志模块示例
Jun 23 Python
Django中的CBV和FBV示例介绍
Feb 25 Python
Python 爬虫之Beautiful Soup模块使用指南
Jul 05 Python
Python实现socket非阻塞通讯功能示例
Nov 06 Python
python进行参数传递的方法
May 12 Python
Django中Q查询及Q()对象 F查询及F()对象用法
Jul 09 Python
python代码能做成软件吗
Jul 24 Python
Python设计密码强度校验程序
Jul 30 Python
Python3爬虫里关于代理的设置总结
Jul 30 Python
python小技巧——将变量保存在本地及读取
Nov 13 Python
Python 文本滚动播放器的实现代码
Apr 25 Python
浅谈Python中的函数(def)及参数传递操作
May 25 #Python
Python竟然能剪辑视频
python中的None与NULL用法说明
May 25 #Python
判断Python中的Nonetype类型
May 25 #Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
python编写五子棋游戏
浅谈python数据类型及其操作
黑屏(2) appdata(1) minio(1) Windows server 2003(1) Mysql8(2) SeaTable(1) ACID(1) Outlook(1) celery(1) OOP(1)
You might like
php实现的在线人员函数库
2008/04/09 PHP
PHP 基本语法格式
2009/12/15 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
浅析Node.js：DNS模块的使用
2016/11/23 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python一键去抖音视频水印工具
2018/09/14 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
python3让print输出不换行的方法
2020/08/24 Python
希尔顿酒店官方网站：Hilton Hotels
2017/06/01 全球购物
Gweniss格温妮丝女包官网：英国纯手工制造潮流包包品牌
2018/02/07 全球购物
Ashford台湾：以折扣价提供奢华的男女用表款
2019/12/04 全球购物
销售会计工作职责
2013/12/02 职场文书
保护母亲河倡议书
2014/04/14 职场文书
六一儿童节开幕词
2015/01/29 职场文书
故意杀人案辩护词
2015/05/21 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL