基于flask實(shí)現(xiàn)五子棋小游戲

更新時(shí)間：2021年05月25日 10:52:42 作者：Yokna

這篇文章主要為大家詳細(xì)介紹了基于flask實(shí)現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了基于flask實(shí)現(xiàn)五子棋小游戲的具體代碼，供大家參考，具體內(nèi)容如下

前言

首先說明一下，本人方向是java后端，只因老師布置了一個(gè)作業(yè)，要用flask來做一個(gè)五子棋，沒辦法被逼上梁山，程序不太美觀，但是應(yīng)付作業(yè)還是夠了的。

廢話不多說，下面開錘！

首先整個(gè)程序是一個(gè)web應(yīng)用，前端html+css+javaScript（有用到j(luò)query）（基本都是現(xiàn)學(xué)的，所以程序很多注釋也很丑），后端用的flask框架。

準(zhǔn)備工作

**1.**python環(huán)境、安裝flask

**2.**導(dǎo)入需要用到的包

pip install flask_cors
pip install flask_sqlalchemy

**3.**創(chuàng)建一個(gè)flask項(xiàng)目，并將一下代碼復(fù)制運(yùn)行

文件結(jié)構(gòu)

圖片資源

不做代碼的生產(chǎn)者，只做代碼的搬運(yùn)工

前端

游戲頁面

<!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>
 /*準(zhǔn)備工作： 1獲取畫布，獲取畫筆對(duì)象 */
    var mcanvas = document.querySelector("canvas");
    var ctx = mcanvas.getContext("2d");

    /*準(zhǔn)備工作：2創(chuàng)建一個(gè)二維數(shù)組 用來定義繪制棋盤線*/
    var count = 15;//用來定義棋盤的行數(shù)和列數(shù)
    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;
        }
    }

    /*準(zhǔn)備工作：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; //設(shè)置繪制矩形的大小
    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);
        }
    }

    // 用來進(jìn)行黑白子的切換
    var isBlack = true;

 //開始繪制 2下子
 function play(e) {
    //獲取點(diǎn)擊canvas的位置值默認(rèn)，canvas的左上角為（0,0） 點(diǎn)
    var leftOffset = 20;//body 的margin
    var x = e.clientX - leftOffset;
    var y = e.clientY - leftOffset;
    // console.log(x+" "+y);
    // 設(shè)置點(diǎn)擊點(diǎn)后棋子下在哪里,獲取點(diǎn)擊的位置進(jìn)行判斷如果超過格子的一半則繪制到下一個(gè)點(diǎn)如果小于 則繪制在上一個(gè)點(diǎn)上
    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);

    //嚴(yán)格點(diǎn)需要驗(yàn)證 ，驗(yàn)證所輸入的點(diǎn)是否在數(shù)組中已經(jīng)存在 ，如果存在 則返回
    if (map[row][col] != 0) {
        alert("此處已經(jīng)落子");
        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",//請(qǐng)求的url地址
            type: 'post',//設(shè)置請(qǐng)求的http方式，method也可以
            dataType: 'json',//將服務(wù)器端返回的數(shù)據(jù)直接認(rèn)定為是這個(gè)格式，然后會(huì)做一些自動(dòng)的處理(如果是json字符串，會(huì)自動(dòng)轉(zhuǎn)化為js對(duì)象),服務(wù)器返回的默認(rèn)格式是text/html格式
            data: {//向服務(wù)器端發(fā)送的數(shù)據(jù)
                t: 1,
                row: row,
                col: col,
                
            },
            success: function (data) {//請(qǐng)求成功之后執(zhí)行的回調(diào)函數(shù)
                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",//請(qǐng)求的url地址
            type: 'post',//設(shè)置請(qǐng)求的http方式，method也可以
            dataType: 'json',//將服務(wù)器端返回的數(shù)據(jù)直接認(rèn)定為是這個(gè)格式，然后會(huì)做一些自動(dòng)的處理(如果是json字符串，會(huì)自動(dòng)轉(zhuǎn)化為js對(duì)象),服務(wù)器返回的默認(rèn)格式是text/html格式
            data: {//向服務(wù)器端發(fā)送的數(shù)據(jù)
                t: 2,
                row: row,
                col: col,
              
            },
            success: function (data) {//請(qǐng)求成功之后執(zhí)行的回調(diào)函數(shù)
                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",//請(qǐng)求的url地址
            type: 'post',//設(shè)置請(qǐng)求的http方式，method也可以
            dataType: 'json',//將服務(wù)器端返回的數(shù)據(jù)直接認(rèn)定為是這個(gè)格式，然后會(huì)做一些自動(dòng)的處理(如果是json字符串，會(huì)自動(dòng)轉(zhuǎn)化為js對(duì)象),服務(wù)器返回的默認(rèn)格式是text/html格式
            data: {//向服務(wù)器端發(fā)送的數(shù)據(jù)
                isReplay: true
            },
            success: function (data) {//請(qǐng)求成功之后執(zhí)行的回調(diào)函數(shù)
                window.location.href = "game.html";                
            },
            error: function(error){
                console.log(error)
            }
        });
 }


 /*功能擴(kuò)充：
 1當(dāng)勝利后 彈框：a是否在來一局 b 精彩回復(fù)
 a 如果點(diǎn)擊在來一句 清空數(shù)據(jù)重新開始
 b 精彩回放將棋盤黑白子按照下棋的順序進(jìn)行棋子編號(hào)2悔棋功能
 3對(duì)算法的擴(kuò)充
 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;
            /*
             *絕對(duì)定位
             */
            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="手機(jī)號(hào)" 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>

    // 請(qǐng)求路徑
    var httpurl = "http://127.0.0.1:5000/login";
    // 數(shù)據(jù)請(qǐng)求
    function myClick() {
        var usernamestr = document.getElementById("username").value;
        var passwordstr = document.getElementById("password").value;
      

        $.ajax({
            url: httpurl,//請(qǐng)求的url地址
            type: 'post',//設(shè)置請(qǐng)求的http方式，method也可以
            dataType: 'json',//將服務(wù)器端返回的數(shù)據(jù)直接認(rèn)定為是這個(gè)格式，然后會(huì)做一些自動(dòng)的處理(如果是json字符串，會(huì)自動(dòng)轉(zhuǎn)化為js對(duì)象),服務(wù)器返回的默認(rèn)格式是text/html格式
            data: {//向服務(wù)器端發(fā)送的數(shù)據(jù)
                username: usernamestr,
                password: passwordstr,
            },
            success: function (data) {//請(qǐng)求成功之后執(zhí)行的回調(diào)函數(shù)
                console.log(data.code);
                if(data.code!==200){
                    alert("用戶名或密碼錯(cuò)誤")
                }else{
                    window.location.href = "game.html";
                }
                
            },
            error: function(error){
                console.log(error)
            }
        });
    }

</script>

</body>
</html>

歡迎界面

說明：此界面可有可無，對(duì)整個(gè)游戲沒有影響

<!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>

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

下面是后端的內(nèi)容

后端

配置文件

SQLALCHEMY_DATABASE_URI = "mysql://root:password@localhost:3306/gobang"
# "數(shù)據(jù)庫：//用戶名：密碼@host：port/數(shù)據(jù)庫名稱"

SQLALCHEMY_TRACK_MODIFICATIONS = False
# 這一行不加會(huì)有警告

啟動(dòng)類

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

#1.導(dǎo)入flask擴(kuò)展
# 2.創(chuàng)建flask應(yīng)用程序?qū)嵗?
# 3.定義路由及視圖函數(shù)
# 4.啟動(dòng)程序
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中定義路由是通過裝飾器來實(shí)現(xiàn)的，訪問路由會(huì)自動(dòng)調(diào)用路由下跟的方法，并將執(zhí)行結(jié)果返回


@app.route('/login',methods=["GET","POST"])
def login():
    if request.method == "POST":
        # 以POST方式傳參數(shù)，通過form取值
        # 如果Key之不存在，報(bào)錯(cuò)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": "驗(yàn)證失敗"}
            println('驗(yàn)證失敗')
        print(username+password)
    else:
        # 以GET方式傳參數(shù)，通過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')
    #調(diào)用添加方法
    db.session.add(user)
    #提交入庫，上面已經(jīng)導(dǎo)入了提交配置，所以不需要在提交了
    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)
    #不寫注釋真容易看混，本少俠就勉強(qiáng)寫一點(diǎn)吧
    #這里是要判斷水平方向上是否滿足獲勝條件
    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": "繼續(xù)"}
           

   

#會(huì)運(yùn)行起一個(gè)小型服務(wù)器，就會(huì)將我們的flask程序運(yùn)行在一個(gè)簡(jiǎn)單的服務(wù)器上，服務(wù)器由flask提供，用于測(cè)試

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

數(shù)據(jù)庫表

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');

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: