专业资源平台

扫一扫

秒变设计达人

首页 小程序 正文
我要投稿
贪食蛇：得分计算/蛇长计算/游戏加速/蛇加长

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

2021-03-13
¥ 0 元 终身VIP免费 升级终身VIP
点赞 (0) 收藏 (0)
立即下载
升级会员
下载不了？请联系网站客服提交链接错误！
增值服务： 安装指导 环境配置 二次开发 网站建设 模板修改 源码安装 LOGO设计 图片设计
贪食蛇：得分计算/蛇长计算/游戏加速/蛇加长
最近更新 2021年03月13日
资源编号 15041
当前信息若含有黄赌毒等违法违规不良内容，请点此举报！

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

2021-03-13 小程序 0 百度已收录
郑重承诺丨总裁主题提供安全交易、信息保真!
升级会员
增值服务：
安装指导
环境配置
二次开发
网站建设
模板修改
源码安装
¥ 0 元 （终身VIP免费 升级终身VIP） 开通VIP尊享优惠特权
点赞 (0) 收藏 (0)
立即下载 升级会员 最新活动

QQ 微信

微信

进入TA的商铺 联系官方客服
详情介绍

算是目前为止，最接近贪食蛇的一款小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;
  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;
  5. // 手指移动路径
  6. var moveX = 0;
  7. var moveY = 0;
  9. // 差值
  10. var diffX = 0;
  11. var diffY = 0;
  13. var snakeW = 10;
  14. var snakeH = 10;
  16. var context = null;
  18. // 蛇头
  19. var snakeHead = {
  20.     color: “#0000ff”,
  21.     x: 0,
  22.     y: 0,
  23.     w: snakeW,
  24.     h: snakeH
  25. };
  27. // 蛇身 数组
  28. var snakeBodys = [];
  30. // 窗口宽/高
  31. var windowW = 0;
  32. var windowH = 0;
  34. // 食物
  35. var foods = [];
  37. // 蛇头移动方向
  38. var snakeMoveDirection = “right”;
  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;
  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);
  11.     score = 0;
  12.     count = 1;
  13.     moveSpeedLevel = defaultSpeedLevel;  // 恢复默认帧频率
  14.     perform = 0;
  15.     eatFoodCount = 0;
  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){
  3.       startX = e.touches[0].x;
  4.       startY = e.touches[0].y;
  6.     //   console.log(“开始点击”);
  7.   },
  9.   touchMove: function (e){
  10.     //   console.log(“开始拖动手指”);
  11.       moveX = e.touches[0].x;
  12.       moveY = e.touches[0].y;
  14.       diffX = moveX – startX;
  15.       diffY = moveY – startY;
  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.       }

 

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

资源下载此资源仅限注册用户下载，请先
客服QQ：3482249445
收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

所有文章为演示数据，不提供下载地址，版权归原作者所有，仅提供演示效果！

小程序网 小程序 贪食蛇：得分计算/蛇长计算/游戏加速/蛇加长 https://www.10000ii.com/15041.html

生成海报
上一篇： k-push（含后端）
下一篇： 乐享连江
常见问题

免费下载或者VIP会员专享资源能否直接商用？

  • 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。
查看详情

提示下载完成但无法解压？

  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用
查看详情

相关文章

【新版影视小程序源码】破解域名授权+非框架版
【新版影视小程序源码】破解域名授权+非框架版
【影视电影小程序】2021修复完整运营版+流量主激励广告
【影视电影小程序】2021修复完整运营版+流量主激励广告
叮咚活动报名小程序高级版V5.2.3
叮咚活动报名小程序高级版V5.2.3
狮子鱼社区团购小程序V5.1.6完整包源码
狮子鱼社区团购小程序V5.1.6完整包源码
猜你喜欢
小程序网

分享最新小程序教程共同学习，共同进步，共同成长！

QQ交流群
小程序网

QQ交流群

你好。点击以下按钮加入QQ交流群，我们一起共同进步，共同成长！


热门文章
终身VIP会员限时钜惠
首页 活动 会员 商城 我的
贪食蛇：得分计算/蛇长计算/游戏加速/蛇加长-海报

分享本文封面

分享到人人 分享到 Q Q 分享到空间 分享到微博 下载封面