微信小程序如何实现贪吃蛇游戏-创新互联
这篇文章主要介绍微信小程序如何实现贪吃蛇游戏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
我们提供的服务有:成都网站建设、成都做网站、微信公众号开发、网站优化、网站认证、天心ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的天心网站制作公司先来看看运行效果:
具体代码如下:
界面布局 pages/snake/snake/snake.wxml:
snake 得分 {{score}} 历史最高 {{maxscore}} 游戏结束,重新开始吗?
逻辑功能 pages/snake/snake/snake.js:
//snake.js var app = getApp(); Page({ data:{ score: 0,//比分 maxscore: 0,//最高分 startx: 0, starty: 0, endx:0, endy:0,//以上四个做方向判断来用 ground:[],//存储操场每个方块 rows:28, cols:22,//操场大小 snake:[],//存蛇 food:[],//存食物 direction:'',//方向 modalHidden: true, timer:'' } , onLoad:function(){ var maxscore = wx.getStorageSync('maxscore'); if(!maxscore) maxscore = 0 this.setData({ maxscore:maxscore }); this.initGround(this.data.rows,this.data.cols);//初始化操场 this.initSnake(3);//初始化蛇 this.creatFood();//初始化食物 this.move();//蛇移动 }, //计分器 storeScore:function(){ if(this.data.maxscore < this.data.score){ this.setData({ maxscore:this.data.score }) wx.setStorageSync('maxscore', this.data.maxscore) } }, //操场 initGround:function(rows,cols){ for(var i=0;i5 || Math.abs(shu) > 5){ var direction = (Math.abs(heng) > Math.abs(shu)) ? this.computeDir(1, heng):this.computeDir(0, shu); switch(direction){ case 'left': if(this.data.direction=='right')return; break; case 'right': if(this.data.direction=='left')return; break; case 'top': if(this.data.direction=='bottom')return; break; case 'bottom': if(this.data.direction=='top')return; break; default: } this.setData({ startx:0, starty:0, endx:0, endy:0, direction:direction }) } }, computeDir: function(heng, num){ if(heng) return (num > 0) ? 'right' : 'left'; return (num > 0) ? 'bottom' : 'top'; }, creatFood:function(){ var x=Math.floor(Math.random()*this.data.rows); var y=Math.floor(Math.random()*this.data.cols); var ground= this.data.ground; ground[x][y]=2; this.setData({ ground:ground, food:[x,y] }); }, changeDirection:function(dir){ switch(dir){ case 'left': return this.changeLeft(); break; case 'right': return this.changeRight(); break; case 'top': return this.changeTop(); break; case 'bottom': return this.changeBottom(); break; default: } }, changeLeft:function(){ var arr=this.data.snake; var len=this.data.snake.length; var snakeHEAD=arr[len-1][1]; var snakeTAIL=arr[0]; var ground=this.data.ground; ground[snakeTAIL[0]][snakeTAIL[1]]=0; for(var i=0;i =this.data.rows||snakeHEAD[1]>=this.data.cols||snakeHEAD[1]<0){ clearInterval(this.data.timer); this.setData({ modalHidden: false, }) } for(var i=0;i 以上是“微信小程序如何实现贪吃蛇游戏”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享标题:微信小程序如何实现贪吃蛇游戏-创新互联
路径分享:http://scyanting.com/article/dicsgd.html