首页
所有分类
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读文件保存到字典,修改字典并写入新文件的实例
Apr 23 Python
Python FTP两个文件夹间的同步实例代码
May 25 Python
详解Python3中的迭代器和生成器及其区别
Oct 09 Python
python实现简单名片管理系统
Nov 30 Python
树莓派用python中的OpenCV输出USB摄像头画面
Jun 22 Python
解决Python安装时报缺少DLL问题【两种解决方法】
Jul 15 Python
Python使用Tkinter实现滚动抽奖器效果
Jan 06 Python
pycharm 设置项目的根目录教程
Feb 12 Python
Python多进程编程multiprocessing代码实例
Mar 12 Python
python golang中grpc 使用示例代码详解
Jun 03 Python
一小时学会TensorFlow2之基本操作2实例代码
Sep 04 Python
Python中的pprint模块
Nov 27 Python
浅谈Python中的函数(def)及参数传递操作
May 25 #Python
Python竟然能剪辑视频
python中的None与NULL用法说明
May 25 #Python
判断Python中的Nonetype类型
May 25 #Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
python编写五子棋游戏
浅谈python数据类型及其操作
macos(1) 403(1) Stater(1) csgo(1) 404(1) sock(2) protocol(1) xps(1) CAD(1) XPathParser(1)
You might like
关于PHP堆栈与列队的学习
2013/06/21 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
Python求解平方根的方法
2015/03/11 Python
Python随机生成数模块random使用实例
2015/04/13 Python
Python爬虫：通过关键字爬取百度图片
2017/02/17 Python
python交互式图形编程实例（三）
2017/11/17 Python
Django在win10下的安装并创建工程
2017/11/20 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
Farfetch澳大利亚官网：Farfetch Australia
2020/04/26 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
交通法规咨询中心工作职责
2013/11/27 职场文书
新闻专业个人求职信
2013/12/19 职场文书
学习党章思想汇报
2014/01/07 职场文书
森林防火工作方案
2014/02/14 职场文书
会计岗位职责范本
2014/03/07 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
教师演讲稿大全
2014/05/16 职场文书
品牌服务方案
2014/06/03 职场文书
整改报告格式
2014/11/06 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
小学教师个人总结
2015/02/05 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS