基于flask实现五子棋小游戏
本文实例为大家分享了基于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');
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用python实现简单五子棋游戏
用python实现五子棋简单人机模式的练习过程,供大家参考,具体内容如下 第一次写博客,我尽力把它写好. 最近在初学python,今天就用自己的一些粗浅理解,来记录一下这几天的python简单人机五子棋游戏的练习,下面是实现过程的理解(是在cmd中运行的): 主要流程: *重点内容* - 首先是模块及类的划分 - 棋子类和棋盘类的方法 - 对策略类里的功能进行细分,调用棋子类和棋盘类 - 写出判断输赢的方法 - 用main函数进行整个游戏进度的控制 模块及类的划分 类的划分涉及到了面向对象的内容
-
python实现五子棋小游戏
本文实例为大家分享了python实现五子棋小游戏的具体代码,供大家参考,具体内容如下 暑假学了十几天python,然后用pygame模块写了一个五子棋的小游戏,代码跟有缘人分享一下. import numpy as np import pygame import sys import traceback import copy from pygame.locals import * pygame.init() pygame.mixer.init() #颜色 background=(201,202
-
python实现五子棋游戏
本文实例为大家分享了python实现五子棋游戏的具体代码,供大家参考,具体内容如下 话不多说,直接上代码: 全部工程文件,在GitHub:五子棋 效果预览: #!/usr/bin/env python3 #-*- coding:utf-8 -*- import pygame from pygame.locals import * from sys import exit import numpy background_image = 'qipan.png' white_image = 'whit
-
python五子棋游戏的设计与实现
这个python的小案例是五子棋游戏的实现,在这个案例中,我们可以实现五子棋游戏的两个玩家在指定的位置落子,画出落子后的棋盘,并且根据函数判断出输赢的功能. 这个案例的思路如下所示: 首先,根据棋盘的样子画出棋盘 然后,对棋盘进行初始化,将可以落子的位置进行统一化处理 接下来,就是进入游戏的环节,双方轮流落子,落子后,并将棋盘画出 最后,根据落子的位置判断选手的的输赢情况,游戏结束 五子棋游戏的设计和实现 代码如下: def main(): print("五子棋游戏".center(5
-
python版本五子棋的实现代码
正文之前 前阵子做了个<人工智能> 的课程作业,然后写了个人工智障...大概就是个可以跟你下五子棋的傻儿子...下面是代码和效果 正文 1. 摘要 机器博弈是人工智能领域的重要分支,它的研究对象多以复杂的棋牌类智力游戏为主,已经得到解决的棋类游戏,几乎全部都应归功于机器博弈近半个世纪的发展.计算机解决问题的优势在于能把不易解析的问题,借助于现代计算机的运算速度优势枚举出所有的合理情形而得解;然而,博弈问题的复杂程度决定了它不能过度依赖机器的计算能力.许多待解决的或已经解决的棋类,其状态空间复杂
-
python实现五子棋小程序
本文实例为大家分享了python实现五子棋小程序的具体代码,供大家参考,具体内容如下 一.结合书上例子,分三段编写: wuziqi.py #coding:utf-8 from win_notwin import * from show_qipan import * maxx=10 #10行10列 maxy=10 qipan=[[0,0,0,0,1,0,0,2,0,0],[0,1,2,1,1,0,2,0,0,0],[0,0,0,0,1,1,0,2,0,0],[0,0,0,0,2,0,0,1,0,0
-
python pygame实现五子棋小游戏
今天学习了如何使用pygame来制作小游戏,下面是五子棋的代码,我的理解都写在注释里了 import pygame # 导入pygame模块 print(pygame.ver) # 检查pygame的版本,检查pygame有没有导入成功 EMPTY = 0 BLACK = 1 WHITE = 2 # 定义三个常量函数,用来表示白棋,黑棋,以及 空 black_color = [0, 0, 0] # 定义黑色(黑棋用,画棋盘) white_color = [255, 255, 255] # 定义白
-
python实现简单五子棋游戏
本文实例为大家分享了python实现简单五子棋游戏的具体代码,供大家参考,具体内容如下 from graphics import * from math import * import numpy as np def ai(): """ AI计算落子位置 """ maxmin(True, DEPTH, -99999999, 99999999) return next_point[0], next_point[1] def maxmin(is_ai
-
python使用minimax算法实现五子棋
这是一个命令行环境的五子棋程序.使用了minimax算法. 除了百度各个棋型的打分方式,所有代码皆为本人所撸.本程序结构与之前的井字棋.黑白棋一模一样. 有一点小问题,没时间弄了,就这样吧. 一.效果图 (略) 二.完整代码 from functools import wraps import time import csv ''' 五子棋 Gobang 作者:hhh5460 时间:20181213 ''' #1.初始化棋盘 #------------ def init_board(): '''
-
python实现五子棋游戏（pygame版）
本文实例为大家分享了python五子棋游戏的具体代码,供大家参考,具体内容如下 目录 简介 实现过程 结语 简介 使用python实现pygame版的五子棋游戏: 环境:Windows系统+python3.8.0 游戏规则: 1.分两位棋手对战,默认黑棋先下:当在棋盘点击左键,即在该位置绘制黑棋: 2.自动切换到白棋,当在棋盘点击左键,即在该位置绘制白棋: 3.轮流切换棋手下棋,当那方先形成5子连线者获胜(横.竖.斜.反斜四个方向都可以). 游戏运行效果如下: 实现过程 1.新建文件settin