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


Posted in Javascript onJanuary 03, 2018

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

先来看看运行效果:

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

具体代码如下:

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

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

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

Javascript 相关文章推荐
jQuery后代选择器用法实例
Dec 23 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
react 生命周期实例分析
May 18 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 #Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 #Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 #Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 #Javascript
浅谈node模块与npm包管理工具
Jan 03 #Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 #Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
asp批量修改记录的代码
2008/06/25 Javascript
javascript this用法小结
2008/12/19 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
AngularJS内置指令
2015/02/04 Javascript
javascript self对象使用详解
2016/10/18 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
Python的Django框架中的Context使用
2015/07/15 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
python mysql断开重连的实现方法
2019/07/26 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
初级会计求职信范文
2014/02/15 职场文书
2014年工会工作总结
2014/11/12 职场文书
匿名信格式范文
2015/05/27 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
如何利用python实现列表嵌套字典取值
2022/06/10 Python