微信小程序实现的贪吃蛇游戏【附源码】

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

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

先来看看运行效果：

具体代码如下：

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

 !--snake.wxml-- 
 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: #39; #39;,//方向
 modalHidden: true,
 timer: #39; #39;
 onLoad:function(){
 var maxscore = wx.getStorageSync( #39;maxscore #39;);
 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( #39;maxscore #39;, 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 #39;left #39;:
 if(this.data.direction== #39;right #39;)return;
 break;
 case #39;right #39;:
 if(this.data.direction== #39;left #39;)return;
 break;
 case #39;top #39;:
 if(this.data.direction== #39;bottom #39;)return;
 break;
 case #39;bottom #39;:
 if(this.data.direction== #39;top #39;)return;
 break;
 default:
 this.setData({
 startx:0,
 starty:0,
 endx:0,
 endy:0,
 direction:direction
 computeDir: function(heng, num){
 if(heng) return (num 0) ? #39;right #39; : #39;left #39;;
 return (num 0) ? #39;bottom #39; : #39;top #39;;
 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 #39;left #39;:
 return this.changeLeft();
 break;
 case #39;right #39;:
 return this.changeRight();
 break;
 case #39;top #39;:
 return this.changeTop();
 break;
 case #39;bottom #39;:
 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: #39; #39;
 this.onLoad();
});
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序之多文件下载的简单封装
微信小程序如何实现美团菜单
以上就是微信小程序实现的贪吃蛇游戏【附源码】的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！