五子棋-单机游戏-微信小游戏项目开发入门

article/2025/9/20 15:50:17

关于这个文章能看懂的条件，需要读者具备如下三个条件：

熟悉 HTML
熟悉 HTML 中的 Canvas
JavaScript基础以及ES5以上

这是一个五子棋游戏的实现方案，在微信小程序上运行，如有需要可参考此学习，实现逻辑不是很复杂，且代码数量不多，很适合新手入门学习哦。

首先，请打开电脑中的微信小程序开发工具，选择小游戏，然后新建，如下图，
~~若要做小程序的，请在文章底部查看~~ 。
在这里插入图片描述

新建的小游戏项目大致如下，笔者这里是精简过的，会看到有个game.js文件，这个是小游戏执行的入口，将game.js文件打开，如果有代码内容，那就全部清空吧，下面开始从这个文件中写代码。
在这里插入图片描述

PS：笔者猜到很多读者可能是新手，其心里可能会想：新建的小游戏项目是个打飞机的游戏例子，而项目文件太多了，对新手入门来说，会不会觉得眼花，那有很多不相关的文件就删除吧，只保留下图中的项目文件一样就可以了，精简后整个干净了

注意，游戏主要逻辑都写到./js/main.js 里的，这个先不看，后面用到时会使用这一行导入游戏逻辑

import Main from './js/main.js';

在写游戏逻辑准备前，需要先从wx接口API中拿到画布Canvas，如下

const canvas = wx.createCanvas();

接着，定义好一个用于渲染的配置

const render = {ctx: canvas.getContext('2d'),//2d context 绘制画布的是ctxwidth: canvas.width,//画布宽度height: canvas.height,//画布高度top: 80,//距离上边距
};

接着，定义游戏相关的配置

const config = {cols: 20, //自己设置，每一行铺满的棋子数
};

接着，定义个方法，用于监听游戏产生的事件

function listener(event) {switch (event) {case 'end': //游戏结束事件//...default:console.log('other event', event);}
}

接下来是用到游戏逻辑对象类 Main ，项目结构如下图，通过 import ./js/main.js 导入过来就可以用了，在开始写的地方有写了import …
在这里插入图片描述

然后，写初始化游戏实例game，将上面定义好的render, config, listener都以参数形式传进去，

var game = new Main(render, config, listener);

再定义一个方法，处理触摸事件

function touchHandler(event) {
//...
}
//处理触摸开始的方法添加到画布canvas中
canvas.addEventListener('touchstart', touchHandler);

以下是游戏的其它功能,如游戏截图的方法

function saveToImage() {
//...
}

最后，就是重点写游戏逻辑Main的实现了, 稍微复杂一些，打开笔者项目中的./js/main.js，会看到笔者写好的代码大致如下，

'use strict';//定义个性化颜色常量
const Colors = {BgColor: '#FFFFFF',//页面背景色BorderColor: '#000000',//网格线框色BgColor2: '#DDC58D',//棋盘背景色
}
//定义游戏的事件常量
const GameEvent = {onEnd: 'end'
}
//canvas font 字体的单位常量
const FontUnit = 'px sans-serif';
/**
* 五子棋游戏主要逻辑
*/
export default class Main {//构造方法，需要传入三个参数，上面有讲了constructor(render,config,listener){//初始化游戏布局const initLayout = () => {const { ctx, width, height, top } = this.render;const { cols } = this.config;ctx.fillStyle = Colors.BgColor;ctx.strokeStyle = Colors.BorderColor;ctx.fillRect(0,0,width,height);ctx.fillStyle = Colors.BgColor2;//游戏的棋子集合const grids = [];//...for(let i=0; i<cols; i++){for(let j=0; j<cols; j++){//...grids.push(g);}}//...开始游戏gameStart();};//画棋子，白棋或黑棋this.showFlag = (gs) => {//...if (isMyFlag) {ctx.fillStyle = '#ffffff';//白棋} else {ctx.fillStyle = '#000000';//黑棋}//...this.isMyFlag = !isMyFlag;};//扫描棋子数this.scan = (gs,offset) => {//...};//游戏结束处理this.gameEnd = () => {//...};//游戏开始，刷新的const gameStart = () => {//...ctx.fillStyle = '#000000';//字体色ctx.font = fontSize + 'px ' + FontUnit;//...};initLayout();//定时器，可当作是游戏的时钟this.timer = setInterval(() => {gameStart();//...}, 1100);}//处理触摸的方法touchStart(touch){//...this.showFlag(gs);let count = this.scan(gs, { a: 1, b: 0 });//...// 如果一方棋子排列达到5个(超出4个)就会判断胜利（游戏结束）if (count >= 4) this.gameEnd();}//销毁用，退出游戏并关闭定时器destory(){if (this.timer) {clearInterval(this.timer);}}}