⼩程序实现的贪吃蛇游戏【附源码下载】本⽂实例讲述了⼩程序实现的贪吃蛇游戏。分享给⼤家供⼤家参考，具体如下： 先来看看运⾏效果：
具体代码如下：
界⾯布局 pages/snake/snake/snake.wxml:
<!--snake.wxml-->
<view class="control" bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd">
<view class="score">
<view class="title">snake</view>
<view class="scoredetail">
<view class="scoredesc">得分</view>
<view class="scorenumber">{{score}}</view>
</view>
<view class="scoredetail">
<view class="scoredesc">历史最⾼</view>
<view class="scorenumber">{{maxscore}}</view>
</view>
</view>
<view class="ground">
<view wx:for="{{ground}}" class="rows" wx:for-item="cols">
<view wx:for="{{cols}}" class="block block_{{item}}" >
</view>
</view>
</view>
<modal class="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(ws,ls);//初始化操场
this.initSnake(3);//初始化蛇
},
//计分器
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=[];
und.push(arr);
for(var j=0;j<cols;j++){
und[i].push(0);
}
}
},
/
/蛇
initSnake:function(len){
for(var i=0;i<len;i++){
und[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:und
});
},400);
},
tapStart: function(event){
this.setData({
startx: uches[0].pageX,
starty: uches[0].pageY
})
},
tapMove: function(event){
this.setData({
endx: uches[0].pageX,
endy: uches[0].pageY
})
},
tapEnd: function(event){
var heng = (dx) ? (dx - this.data.startx) : 0;
var shu = (dy) ? (dy - this.data.starty) : 0;
if(Math.abs(heng) > 5 || Math.abs(shu) > 5){
var direction = (Math.abs(heng) > Math.abs(shu)) ? thisputeDir(1, heng):thisputeDir(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()*ws); var y=Math.floor(Math.random()*ls); var ground= und;
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=und;
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<len;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=und;
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<len;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];
/
/ und[x][y]=0;
// console.log(und[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++){
// und[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=und;
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<len;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=und;
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<len;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]>=ws||snakeHEAD[1]>=ls||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();
}
},
modalChange:function(){
this.setData({
score: 0,
ground:[],
snake:[],
food:[],
modalHidden: true,
direction:''
})
}
});
附：完整实例源码点击此处。
海底世界门票预约
希望本⽂所述对⼤家⼩程序开发有所帮助。
