五子棋 |
您所在的位置：网站首页 › 五子棋的项目 › 五子棋 |
五子棋
|
关于这个文章能看懂的条件，需要读者具备如下三个条件： 熟悉 HTML熟悉 HTML 中的 CanvasJavaScript基础 以及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 绘制画布的是ctx width: 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 { //... }; //游戏结束处理 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); } } }就写到这了，大致实现步骤已说明了，具体实现方法建议自己构思来写，如需要看详细的代码请在评点击此处去下载，遇到有问题请留言，笔者会抽空查看并回复的，感谢耐心看完！ 下面是笔者小游戏运行后的效果截图，五子棋随便下，等哪天遇到对手，来个五子棋PK~， 第一个是小游戏项目截图，第二个是小程序项目截图 项目源码下载
在此项目基础修改的另一个项目是 围棋游戏，与上面运行效果一样，只是玩法不同， 还有一个项目是 井字棋游戏，相信在座的各位读者小时候都玩过，那么运行效果如下 |
以上项目源码都有的，点此查看(放错了=。=,已改正)，在资源一栏下去找（手机上可能找不到资源一栏，请用电脑浏览器查看），请放心下载，感谢支持与信任！【本文地址】