您现在的位置: 微信小程序 > 微信小程序DEMO >

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

来源:微信小程序 编辑:易用通 发布时间:01-20热度:
算是目前为止,最接近贪食蛇的一款小demo了吧,增加了积分部分:

主要功能:

得分计算/蛇长计算/游戏加速/蛇加长 (吃到食物, 蛇加长, 移动速度加快, 游戏结束计算得分/蛇长)


 


  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.       }