微信小程式之貪吃蛇遊戲實現方法-js教程-PHP中文網

首頁

web前端

js教程

微信小程式之貪吃蛇遊戲實現方法

小云云

Jan 05, 2018 am 09:59 AM

實現小程式方法

本文主要介紹了微信小程式實現的貪吃蛇遊戲,結合實例形式分析了微信小程式實現貪吃蛇遊戲功能的相關界面佈局與代碼邏輯操作技巧,並附帶源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助大家。

本文實例講述了微信小程式實現的貪吃蛇遊戲。分享給大家供大家參考，具體如下：

先來看看運行效果：

具體程式碼如下：

介面佈局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:&#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<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 &#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<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:&#39;&#39;
  })
  this.onLoad();
  }
});

相關推薦：

##《貪吃蛇》--H5小遊戲開發

##如何用js開發實現簡單貪吃蛇遊戲

使用JavaScript製作網頁版貪吃蛇遊戲

以上是微信小程式之貪吃蛇遊戲實現方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles