个人网页：微信小程序实现的贪吃蛇游戏【附源码下载】

微信小程序实现的贪吃蛇游戏【附源码下载】  更新2018年01月03日   作者：zuoliangzhu   这篇文章主要介绍了微信小程序实现的贪吃蛇游戏,结合实例形式分析了微信小程序实现贪吃蛇游戏功能的相关界面布局与代码逻辑操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了微信小程序实现的贪吃蛇游戏。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

界面布局 pages/snake/snake/snake.wxml:

 !--snake.wxml-- 
 view bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd" 
 view 
 view snake /view 
 view 
 view 得分 /view 
 view {{score}} /view 
 /view 
 view 
 view 历史最高 /view 
 view {{maxscore}} /view 
 /view 
 /view 
 view 
 view wx:for="{{ground}}" wx:for-item="cols" 
 view wx:for="{{cols}}" 
 /view 
 /view 
 /view 
 modal hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange" 
 view 游戏结束，重新开始吗？ /view 
 /modal 
 /view 

逻辑功能 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;i rows;i++){
 var arr=[];
 this.data.ground.push(arr);
 for(var j=0;j cols;j++){
 this.data.ground[i].push(0);
 initSnake:function(len){
 for(var i=0;i i++){
 this.data.ground[0][i]=1;
 this.data.snake.push([0,i]);
 //移动函数
 move:function(){
 var that=this;
 this.data.timer=setInterval(function(){
 that.changeDirection(that.data.direction);
 that.setData({
 ground:that.data.ground
 },400);
 tapStart: function(event){
 this.setData({
 startx: event.touches[0].pageX,
 starty: event.touches[0].pageY
 tapMove: function(event){
 this.setData({
 endx: event.touches[0].pageX,
 endy: event.touches[0].pageY
 tapEnd: function(event){
 var heng = (this.data.endx) (this.data.endx - this.data.startx) : 0;
 var shu = (this.data.endy) (this.data.endy - this.data.starty) : 0;
 if(Math.abs(heng) 5 || 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 len-1;i++){
 arr[i]=arr[i+1]; 
 var x=arr[len-1][0];
 var y=arr[len-1][1]-1;
 arr[len-1]=[x,y];
 this.checkGame(snakeTAIL);
 for(var i=1;i i++){
 ground[arr[i][0]][arr[i][1]]=1;
 this.setData({
 ground:ground,
 snake:arr
 return true;
 changeRight: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 len-1;i++){
 arr[i]=arr[i+1]; 
 var x=arr[len-1][0];
 var y=arr[len-1][1]+1;
 arr[len-1]=[x,y];
 this.checkGame(snakeTAIL);
 for(var i=1;i i++){
 ground[arr[i][0]][arr[i][1]]=1;
 this.setData({
 ground:ground,
 snake:arr
 // var y=this.data.snake[0][1];
 // var x=this.data.snake[0][0];
 // this.data.ground[x][y]=0;
 // console.log(this.data.ground[x]);
 // console.log(this.data.snake);
 // for(var i=0;i this.data.snake.length-1;i++){
 // this.data.snake[i]=this.data.snake[i+1];
 // }
 // this.data.snake[this.data.snake.length-1][1]++;
 // for(var j=1;j this.data.snake.length;j++){
 // this.data.ground[this.data.snake[j][0]][this.data.snake[j][1]]=1;
 // }
 return true;
 changeTop: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 len-1;i++){
 arr[i]=arr[i+1]; 
 var x=arr[len-1][0]-1;
 var y=arr[len-1][1];
 arr[len-1]=[x,y];
 this.checkGame(snakeTAIL);
 for(var i=1;i i++){
 ground[arr[i][0]][arr[i][1]]=1;
 this.setData({
 ground:ground,
 snake:arr
 return true;
 changeBottom:function(){
 var arr=this.data.snake;
 var len=this.data.snake.length;
 var snakeHEAD=arr[len-1];
 var snakeTAIL=arr[0];
 var ground=this.data.ground;
 ground[snakeTAIL[0]][snakeTAIL[1]]=0; 
 for(var i=0;i len-1;i++){
 arr[i]=arr[i+1]; 
 var x=arr[len-1][0]+1;
 var y=arr[len-1][1];
 arr[len-1]=[x,y];
 this.checkGame(snakeTAIL);
 for(var i=1;i i++){
 ground[arr[i][0]][arr[i][1]]=1;
 this.setData({
 ground:ground,
 snake:arr
 return true;
 checkGame:function(snakeTAIL){
 var arr=this.data.snake;
 var len=this.data.snake.length;
 var snakeHEAD=arr[len-1];
 if(snakeHEAD[0] 0||snakeHEAD[0] =this.data.rows||snakeHEAD[1] =this.data.cols||snakeHEAD[1] 0){
 clearInterval(this.data.timer);
 this.setData({
 modalHidden: false,
 for(var i=0;i len-1;i++){
 if(arr[i][0]==snakeHEAD[0] arr[i][1]==snakeHEAD[1]){
 clearInterval(this.data.timer);
 this.setData({
 modalHidden: false,
 if(snakeHEAD[0]==this.data.food[0] snakeHEAD[1]==this.data.food[1]){
 arr.unshift(snakeTAIL);
 this.setData({
 score:this.data.score+10
 this.storeScore();
 this.creatFood();
 modalChange:function(){
 this.setData({
 score: 0,
 ground:[],
 snake:[],
 food:[],
 modalHidden: true,
 direction:''
 this.onLoad();

附：完整实例源码点击此处。

希望本文所述对大家微信小程序开发有所帮助。

相关文章

本文主要介绍Web安全测试之XSS,这里详细整理了测试XSS的资料，并附示例代码和详细讲解，有需要的小伙伴可以参考下

prototype它是用Javascript写好的一些API，包括对Javascript中的类如String，Array等进行的扩充，把JS文件嵌入后直接用就行了

这篇文章主要介绍了es6函数name属性,结合实例形式分析了es6函数name属性基本原理、功能、用法及操作注意事项,需要的朋友可以参考下

在文本框中输入完内容后,经常需要按回车,焦点跳到下个文本框,或者触发按钮事件

本文给大家分享的是一个在javascript中使用innerhtml输出的时候如何实现换行的小技巧，其实很简单，在需要换行的地方加上\即可

最近因为在flash项目中遇到as调用js函数马上弹出alert，在火狐浏览器下会卡死浏览器。介于这样我们重写alert，让alert弹出一个自定义的div弹层，来实现提示效果！

下面小编就为大家带来一篇DataTables添加额外的查询参数和删除columns等无用参数实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

这篇文章主要介绍了JS实现滑动菜单效果代码,以实例形式实现了包括Tab,选项卡,横向等效果,非常简单实用,需要的朋友可以参考下

javascript中巧用“闭包”实现程序的暂停执行功能...

这篇文章主要为大家详细介绍了用js编写留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 上一篇：惊蛰H5小手机游戏_浅谈逻辑是如何运营成败的关
• 下一篇：借力牛商网小程序_Vue+axios封装请务实现前后端别