基于flask的五子棋小游戏

最新推荐文章于 2026-05-07 12:06:15 发布

原创

最新推荐文章于 2026-05-07 12:06:15 发布 · 8.6k 阅读

标签

#python #ajax #javascript #flask

本文介绍了一位java后端开发者如何使用Flask框架制作一个五子棋小游戏。项目包括前端HTML、CSS、JavaScript（jQuery）和后端Flask。前端实现了棋盘的绘制、棋子落子功能，后端处理棋局逻辑和胜利判断。用户可以通过点击canvas落子，服务器根据棋盘状态判断胜负。此外，还提供了登录界面和重新开始的功能。

基于flask的五子棋小游戏

前言

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

废话不多说，下面开锤！

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

准备工作

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

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

pip install flask_cors
pip install flask_sqlalchemy

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

文件结构

在这里插入图片描述

图片资源：https://www.jb51.net/article/192345.htm

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

前端

游戏页面

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

最低0.47元/天解锁文章