介绍
这篇文章将为大家详细讲解有关微信小程序实现贪吃蛇游戏的示例代码,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
微信小程序实现的贪吃蛇游戏,具体如下:
先来看看运行效果:
具体代码如下:
界面布局页面//蛇蛇蛇。wxml:
& lt; !——snake.wxml祝辞 & lt; view 类=癱ontrol", bindtouchstart=皌apStart", bindtouchmove=皌apMove", bindtouchend=皌apEnd"比; & lt; view 类=皊core"祝辞 & lt;才能view 类=皌itle"祝辞snake & lt;才能view 类=皊coredetail"比; ,,,& lt; view 类=皊coredesc"祝辞得分& lt;/view> ,,,& lt; view 类=皊corenumber"在{{得分}}& lt;/view> & lt;才能/view> & lt;才能view 类=皊coredetail"比; ,,,& lt; view 类=皊coredesc"在历史最高& lt;/view> ,,,& lt; view 类=皊corenumber"在{{maxscore}} & lt;/view> & lt;才能/view> & lt;/view> & lt; view 类=癵round"祝辞 & lt;才能view 天气:为=皗{地面}}“,类=皉ows",天气:项=癱ols"比; ,,,& lt; view 天气:为=皗{关口}}“,类=癰lock block_{{项}}“,在 ,,,& lt;/view> & lt;才能/view> & lt;/view> & lt; modal 类=癿odal",隐藏=皗{modalHidden}}“, no-cancel bindconfirm=癿odalChange"比; ,& lt; view>游戏结束,重新开始吗?,& lt;/view> & lt;/modal> & lt;/view>
逻辑功能页面//蛇蛇蛇。js:
//snake.js var app =, getApp (); 页面({ 数据:{才能 ,,,分数:,0,//比分 ,,,maxscore:, 0,//最高分 ,,,startx:, 0, ,,,starty:, 0, ,,,endx: 0, ,,,恩迪:0,//以上四个做方向判断来用 ,,,:[],//存储操场每个方块 ,,,行:28日, ,,,关口:22日//操场大小 ,,,蛇:[],//存蛇 ,,,食物:[],//存食物 ,,,的方向:& # 39;& # 39;//方向 ,,,modalHidden:,真的, ,,,计时器:& # 39;& # 39; },,才能 onLoad才能:函数(){ ,,,var maxscore =, wx.getStorageSync (& # 39; maxscore& # 39;); ,,,如果(! maxscore), maxscore =0 ,,,this.setData ({ ,,,maxscore: maxscore ,,,}); ,,,this.initGround (this.data.rows this.data.cols);//初始化操场 ,,,this.initSnake(3);//初始化蛇 ,,,this.creatFood();//初始化食物 ,,,this.move();//蛇移动 ,,},//计才能分器 storeScore才能:函数(){ ,,如果(this.data.maxscore & lt;, this.data.score) { ,,this.setData ({ ,,,maxscore: this.data.score ,,,}) ,,,wx.setStorageSync (& # 39; maxscore& # 39;,, this.data.maxscore) ,,} }, ,//操场 initGround才能:函数(行,关口){ ,,,(var i=0; i<行;我+ +){ ,,,,,var arr=[]; ,,,,,this.data.ground.push (arr); ,,,,,,(var j=0; j<关口;j + +) { ,,,,,,,this.data.ground[我].push (0); ,,,,,} ,,,} ,,}, ,//蛇 initSnake才能:函数(len) { ,,,(var 我=0;i微信小程序实现贪吃蛇游戏的示例代码