贪吃蛇 |
您所在的位置：网站首页 › 小程序画布能小游戏吗 › 贪吃蛇 |
贪吃蛇
|
还记得小时候玩过的经典贪食蛇小游戏吗，游戏规则简单，对新手来说很容易入门编程，在这里，TA远方来讲一下实现过程，详解过程按照实现思路来，请仔细往下看 💡 阅读此文章需要满足的以下条件 会使用微信开发工具，或者HBuilderX开发工具属性Javascript编程语言熟悉使用Canvas组件 这里TA远方使用的是微信开发工具，新建项目的时候，选择小程序，使用Javascript语言，选择空模板，最后点击完成， 若有项目源码，直接选择小程序再打开项目就即可 接下来，在项目中的路径pages/index/index.wxml文件里，写一下布局，用层叠布局方式，需要放置三个Canvas组件，分别是下层canvA，中间层canvB，上层canvC，上层的加上一些写属性，如下图 接着在对应的index.js文件里写下代码，获取布局中的那三个Canvas组件，做好初始化，代码如下 App({ data: { canvas: {/*包括画布的相关数据*/}, //... }, onLoad(){ wx.createSelectorQuery().select('#canvA').fields({ size: true }, res => { const canvA = wx.createCanvasContext('canvA'); const canvB = wx.createCanvasContext('canvB'); const canvC = wx.createCanvasContext('canvC'); //初始画布的相关数据 this.data.canvas = { width: res.width, height: res.height, canvA, canvB, canvC }; this.canvA_drawBg(); this.canvC_drawSnake(); this.canvB_drawFood(); this.redraw(this.data.canvas); }).exec(); }, //...绘制地图...背景图...还有障碍物（现在把它叫做墙壁） canvA_drawBg(){ //... }, //...绘制蛇自身 canvC_drawSnake(){ //... }, //...绘制食物... canvB_drawFood(){ //... }, //...重绘...实现游戏刷新的逻辑 redraw(canvas){ //... }, })接下来，用下层canvA组件的来实现绘制，应该绘制什么呢，是游戏地图，效果如下图所示，绘制网格 那么如何绘制游戏地图呢，用火眼金睛观察一下，游戏中的小蛇每移动一步的位置和距离都在变化，用网格来表示最合适不过了，绘制过程很简单，看下方法canvA_drawBg的实现，代码如下 App({ data: { canvas: {/*包括画布的相关数据*/}, config: { gridSize: 10,//网格大小 drawGrid: false,//绘制网格 wellCount: 5,//墙壁数量 }, //... } /** * 绘制地图...背景图...还有障碍物（现在把它叫做墙壁） */ canvA_drawBg(){ const { width, height, canvA } = this.data.canvas;//画布宽高 const { gridSize:g, drawGrid, wellCount } = this.data.config;//关于游戏的配置 //g是网格大小, wellCount障碍物数量 //此处省略...初始化处理 this.data.canvas.w = w;//网格宽 this.data.canvas.h = h;//网格高 this.data.canvas.l = l;//left 左边距 this.data.canvas.t = t;//top 顶边距 this.data.canvas.ln = ln;//x grid count 横向 X坐标网格数 this.data.canvas.tn = tn;//y grid count 纵向 y坐标网格数 //绘制背景色 canvA.fillRect(0,0,width,height); //所有坐标集合，包括制障碍物的 const coordinaties = []; for(let i=0; i0) { //... } } //是否绘制网格，横向绘制 if (drawGrid) { for(let i=0; i0) { //... do{ //绘制障碍物... }while(this.data.wall.length1000*30) { //如果超过30s，则食物过期，应重新出现 this.canvB_drawFood(true); } else if (food.show) { // food.t = Date.now(); food.show = false; this.canvB_drawFood();//绘制 } else if (!food.show) { food.show = true; this.data.canvas.canvB.draw();//不绘制 } else { } } //移动蛇身，返回判断是否继续游戏 let confirmGame = this.moveCoordinaties(); if (confirmGame) { this.canvC_drawSnake(); //使用window下的方法，如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销 requestAnimationFrame(this.redraw); return; } //游戏结束了 this.endGame(true); //显示对话框 Util.alert('游戏结束！确认要重新开始吗？', res => { if (!res.confirm) return; wx.reLaunch({ url:'/pages/index/index' }) }); }, moveSpeed); }, //...绘制蛇身 canvC_drawSnake(){ //... }, //...移动蛇身，处理蛇身新坐标，新的位置 moveCoordinaties(){ //...蛇头移动后 //...判断是否吃到食物，碰到自己 //...判断是否碰到墙（障碍物） //...最后移动没问题的话，返回true, 否则返回false return true; }, //...对游戏结束的处理，关闭定时器 endGame(isEnd){ //... }, onUnload(){ this.endGame(); } }) 对了，还有，游戏的交互逻辑，就用触摸操作手势，实现代码如下 import Gesture from './../../utils/gesture.js'; App({ data: { gestures: {},//定义触摸操作的数据 snakeDire: MoveDire.u,//当前的移动方向 }, onTouchStart(event){ this.data.gestures.a = event.touches[0];//触摸开始点 }, onTouchMove(event){ this.data.gestures.b = event.touches[0];//最后一个触摸点 }, //触摸结束 onTouchEnd(){ const { snakeDire: dire } = this.data; //Gesture是引入来的，封装了手势操作的处理 const Ges = Gesture.G; //获取手势操作方法getG const g = Gesture.getG(this.data.gestures); switch(g){ case Ges.left: //向左划 //判断，若是相反方向就无效，以下同理 if (dire!=MoveDire.r) { this.snakeDire = MoveDire.l; } break; case Ges.up: //向上划 if (dire!=MoveDire.d) { this.snakeDire = MoveDire.u; } break; case Ges.right: //向右划 if (dire!=MoveDire.l) { this.snakeDire = MoveDire.r; } break; case Ges.down: //向下划 if (dire!=MoveDire.u) { this.snakeDire = MoveDire.d; } break; case Ges.click: //只是点击 default: this.pauseGame(); } this.data.gestures = {}; }, //...暂停，或继续游戏 pauseGame(){ //... } })💡 小提示 关于Gesture触摸手势操作的详解文章请点击此处查看 就写到这里，其它的细节不重要，在这里就不讲，重要是实现思路清晰，最后，项目中小程序编译运行没问题的话，结果如下图，一个动态图，这样看着比较直观
如需要看微信小程序项目源码的，还有类似uniapp项目源码也有， 请点击【项目源码】前往找到再下载（如果是在手机浏览器上看的话，可能会找不到下载项，请用PC端浏览器上查看即可 ）， 若觉得此文章有帮助，请点赞❤再走不迟~，谢谢！ |
【本文地址】
今日新闻 |
推荐新闻 |