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

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

先来看看运行效果：

具体代码如下：

界面布局 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(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<len;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<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=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<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];
  //   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<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=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<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]>=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();
  }
});

附：完整实例源码点击此处本站下载。

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