欢迎光临，了解微信小程序开发，就上易用通！

当前位置 : 易用通 > 小程序模板
游戏类demo：贪食蛇：得分计算/蛇长计算/游戏加速/蛇加长游戏类demo：贪食蛇：得分计算/蛇长计算/游戏加速/蛇加长
立即下载

游戏类demo：贪食蛇：得分计算/蛇长计算/游戏加速/蛇加长

模板分类 ： 小程序模板 模板编号 ： Y424 源码文件 ： 完全开源 下载权限 ： VIP会员
模板大小 ：  模板指数 ：  ℃ 更新时间 ： 2018-01-20 15:25 模板等级 ： ☆☆☆☆☆

模板截图：

算是目前为止，最接近贪食蛇的一款小demo了吧，增加了积分部分： 主要功能： 得分计算/蛇长计算/游戏加速/蛇加长 (吃到食物, 蛇加长, 移动速度加快, 游戏结束计算得分/蛇长) 游戏类demo：贪食蛇：得分计算/蛇长计算/游戏加速/蛇加长(图1) 
  1. <canvas style="width: 100%; height: 100%; background-color: #ccc" canvas-id="snakeCanvas" class="snake-canvas-C" bindtouchstart="touchStart" bindtouchmove="touchMove"></canvas>
创建画布标签 配置一些样式 绑定了两个事件 ---bindtouchstart="touchStart" bindtouchmove="touchMove" 在snakeGame.js 对这两个事件(touchStart手指触摸屏幕/touchMove手指在手机上移动)进行处理
下面着重解释snakeGame.js文件内容 主要是调用此函数 requestAnimationFrame(function xx) // 循环执行动画绘制
  1. // 核心代码为
  2. function beginDraw (){  
  3.     //  ........逻辑操作代码
  4.     // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
  5.     wx.drawCanvas({
  6.          canvasId: 'snakeCanvas',
  7.          actions: context.getActions() // 获取绘图动作数组
  8.       });
  9.        // 循环执行动画绘制
  10.        requestAnimationFrame(beginDraw);
  11.     }
  12.     beginDraw();
  13. }
上面代码会循环调用beginDraw()函数, 进行蛇身, 食物的添加等操作...
下面逐行解释代码:
 
  1. // 获取手机屏幕宽/高 
  2. wx.getSystemInfo({
  3.         success: function(res) {
  4.             windowW = res.windowWidth;
  5.             windowH = res.windowHeight;
  6.  
  7.         }
  8.     })
  9.    // 游戏开始的时候, 弹窗进行游戏说明
  10.     wx.showModal({
  11.         title: '请开始游戏',
  12.         content: "每得"+perSocre+"分,蛇身增长1 ",
  13.         success: function(res) {
  14.             if (res.confirm) {
  15.                  beginGame();                     
  16.             } else {
  17.                 initGame();
  18.                 // 点击取消 返回上一页
  19.                 wx.navigateBack({
  20.                     delta: 1
  21.                 })
  22.             }
  23.         }
  24.     });
游戏需要使用的变量
 
  1. // 手指开始位置
  2. var startX = 0;
  3. var startY = 0;
  4.  
  5. // 手指移动路径
  6. var moveX = 0;
  7. var moveY = 0;
  8.  
  9. // 差值
  10. var diffX = 0;
  11. var diffY = 0;
  12.  
  13. var snakeW = 10;
  14. var snakeH = 10;
  15.  
  16. var context = null;
  17.  
  18. // 蛇头
  19. var snakeHead = {
  20.     color: "#0000ff",
  21.     x: 0,
  22.     y: 0,
  23.     w: snakeW,
  24.     h: snakeH
  25. };
  26.  
  27. // 蛇身 数组 
  28. var snakeBodys = [];
  29.  
  30. // 窗口宽/高
  31. var windowW = 0;
  32. var windowH = 0;
  33.  
  34. // 食物
  35. var foods = [];
  36.  
  37. // 蛇头移动方向
  38. var snakeMoveDirection = "right";
  39.  
  40. // 总得分(吃到的食物大小-宽度的总和)
  41. var score = 0;
  42. // 蛇身总长(每得perSocre分 +1)
  43. var snakeLength = 0;
  44. // 是否变长/即移除蛇身 (每得perSocre分 变长-蛇身+1)
  45. var shouldRemoveBody = true;
  46. // (每得perSocre分 变长-蛇身+1)
  47. var perSocre = 5;
  48. // 得了count个perSocre分 
  49. var count = 1;
  50. // 蛇移动的速度(帧频率-----越大越慢)
  51. var defaultSpeedLevel = 10;
  52. var moveSpeedLevel = defaultSpeedLevel;
  53. //   减慢动画
  54. var perform = 0;
  55.  
  56. // 吃到食物的次数
  57. var eatFoodCount=0;
  58. // 每 speederPerFood 次吃到食物加速
  59. var speederPerFood = 2;   // 初始化为2  表示每吃到2次食物, 蛇的移动速度增加
初始化游戏配置函数
 
  1. // 初始化游戏环境
  2. function initGame(){
  3.     snakeHead.x= 0;
  4.     snakeHead.y = 0;
  5.     snakeBodys.splice(0,snakeBodys.length);//清空数组 
  6.     snakeMoveDirection = "right";
  7.     // 上下文
  8.     context = wx.createContext();
  9.     foods.splice(0,foods.length);
  10.  
  11.     score = 0;
  12.     count = 1;
  13.     moveSpeedLevel = defaultSpeedLevel;  // 恢复默认帧频率
  14.     perform = 0;
  15.     eatFoodCount = 0;
  16.  
  17.  
  18.     // 创建食物 20个
  19.     for (var i = 0; i<20; i++) {      
  20.         var food = new Food();
  21.         foods.push(food);
  22.     }
  23. }
复制代码
snakeGame.wxml文件中绑定的两个函数(手机点击touchStart/手机移动touchMove)函数
  1. touchStart: function (e){
  2.  
  3.       startX = e.touches[0].x;
  4.       startY = e.touches[0].y;
  5.  
  6.     //   console.log("开始点击"); 
  7.   },
  8.  
  9.   touchMove: function (e){
  10.     //   console.log("开始拖动手指"); 
  11.       moveX = e.touches[0].x;
  12.       moveY = e.touches[0].y; 
  13.  
  14.       diffX = moveX - startX;
  15.       diffY = moveY - startY;
  16.  
  17.  
  18.       if ( Math.abs(diffX) > Math.abs(diffY) && diffX>0 && !(snakeMoveDirection == "left") ){
  19.           //  向右
  20.           snakeMoveDirection = "right";
  21.         //   console.log("向右"); 
  22.       } else if (Math.abs(diffX) > Math.abs(diffY) && diffX<0 && !(snakeMoveDirection == "right") ){
  23.           //  向左
  24.           snakeMoveDirection = "left";
  25.         //   console.log("向左");
  26.       } else if (Math.abs(diffX) < Math.abs(diffY) && diffY>0 && !(snakeMoveDirection == "top") ){
  27.           //  向下
  28.           snakeMoveDirection = "bottom";
  29.         //   console.log("向下");
  30.       } else if (Math.abs(diffX) < Math.abs(diffY) && diffY<0 && !(snakeMoveDirection == "bottom") ){
  31.           //  向上
  32.           snakeMoveDirection = "top";
  33.         //   console.log("向上");
  34.       }
 

加入收藏
立即下载
分享到微信朋友圈
X

免责声明：

1. 本站所有素材（未指定商用），仅限学习交流，请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集，模板和图片版权归原作者及原出处所有。
3. 未经合法授权，会员不得以任何形式发布、传播、复制、转售该素材。

他的发布 已发布2511

推荐标签

下载该资源用户也下载了

- 随便看看 -
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有