WeChatアプレットがスネークゲームを実装

<ビュークラス='コンテナ'>
 <view class='content-bottom' bindtouchmove='touchMove' bindtouchstart='touchStart' bindtouchend='touchEnd'>
  <view wx:for="{{ground}}" wx:for-item="cols" class='ground-row'>
   <view wx:for="{{cols}}" class='ground-col'>
    <view class='block block{{item}}'></view>
   </ビュー>   
  </ビュー>
 </ビュー>
 <view class='content-top'>
  <view class='トップアイテムトップスコア'>
   <view class='score-description'>スコア</view>
   <view class='score-number'>{{score}}</view>
  </ビュー>
  <view class='top-item top-start' bindtap='goStart'>開始</view>
  <view class='トップアイテムトップスコア'>
   <view class='score-description'>史上最高</view>
   <view class='スコア番号'>{{最大スコア}}</view>
  </ビュー>
 </ビュー>
</ビュー>

/* ページ/デモ/snake/snake.wxss */
.コンテンツトップ{
 ディスプレイ: フレックス;
}
.トップアイテム{
 フレックス: 1;
 高さ: 150rpx;
 マージン: 0 20rpx;
 行の高さ: 150rpx;
 テキスト配置: 中央;
 境界線の半径: 16rpx;
}
.トップスタート{
 フォントサイズ: 22px;
 背景: deepskyblue;
 色: #fff;
}
.トップスコア{
 背景: #eee4da;
}
.スコアの説明 {
 行の高さ: 70rpx;
}
.スコア番号{
 行の高さ: 60rpx;
}
.コンテンツボトム{
 ディスプレイ: フレックス;
 flex-direction: 列;
 幅: 660rpx;
 高さ: 840rpx;
 マージン: 50rpx 自動 0;
}
.ground-row {
 ディスプレイ: フレックス;
}
.ground-col {
 フレックス: 1;
 幅: 30rpx;
 高さ: 30rpx;
}
。ブロック {
 幅: 100%;
 高さ: 100%;
 背景: #eee;
}
.ブロック1 {
 背景：黒;
 境界線の半径: 5px;
}
.ブロック2 {
 背景:赤;
 境界線の半径: 5px;
}

// ページ/デモ/snake/snake.js
ページ（{

  /**
   * ページの初期データ */
  データ： {
  gameStart: false, // ゲームが開始されたかどうか score: 0, // 現在のスコア maxScore: 0, // 履歴の最高スコア isMaxActive: false,
  rows: 28, // 遊び場の行 cols: 22, // 遊び場の列 ground: [[]], // 遊び場のブロックの位置 snake: '', // ヘビの位置 food: [], // 食べ物の位置 startX: 0,
  開始Y: 0,
  終了X: 0,
  終了Y: 0,
  flag: 0, // ヘビの現在の移動方向。0 は右、1 は下、2 は左、3 は上。timer: null、
  モード非表示: true
  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
  this.initGround(this.data.rows, this.data.cols) // プレイグラウンドを初期化する console.log(wx.getStorageSync("MaxScore"))
  if (wx.getStorageSync("MaxScore")) {
   this.setData({
    最大スコア: wx.getStorageSync("最大スコア"),
    isMaxActive: 真
   })
  } それ以外 {
   this.setData({
    isMaxActive: 偽
   })
  }
  },

 goStart: 関数() {
  this.setData({
   ゲーム開始: true
  })
  onLoad() 関数
  this.initSnake(3) // ヘビの位置を初期化する this.initFood() // 食べ物を初期化する
  これを移動(0)
 },

 /**
  * プレイグラウンドを初期化する */
 initGround: 関数 (行、列) {
  this.data.ground = []
  (i = 0; i < 行; i++) の場合 {
   arr = [] とします
   this.data.ground.push(arr)
   (j = 0; j < cols; j++) の場合 {
    this.data.ground[i​​].push(0)
   }
  }
  this.setData({
   グラウンド: this.data.ground
  })
 },

 /**
  * スネークを初期化する */
 initSnake: 関数 (n) {
  this.data.snake = []
  (i = 0; i < n; i++ とします) {
   this.data.ground[0][i] = 1
   this.data.snake.push([0,i])
  }
  this.setData({
   グラウンド: this.data.ground、
   スネーク: this.data.snake
  })
 },

 /**
  * 食べ物を初期化する
  */
 initFood: 関数 () {
  row = Math.floor(Math.random()*this.data.rows) とします。
  col = Math.floor(Math.random() * this.data.cols) とします。
  var グラウンド = this.data.ground
  地面[行][列] = 2
  this.setData({
   地面: 地面、
   食べ物: [行、列]
  })
  console.log(このデータ食品)
 },

 /**
  * マウスのスライド方向を決定します */
 touchStart: 関数 (イベント) {
  this.data.startX = イベント.touches[0].pageX
  this.data.startY = イベント.touches[0].pageY
 },

 touchMove: 関数 (イベント) {
  this.data.endX = イベント.タッチ[0].ページX
  this.data.endY = イベント.touches[0].pageY
  // コンソールログ(this.data.endX、this.data.endY)
 },

 touchEnd: 関数 (イベント) {
  tX = this.data.endX ? (this.data.endX - this.data.startX) とします: 0
  tY = this.data.endY とします。(this.data.endY - this.data.startY) : 0
  コンソールログ(tX, tY)
  ゲーム開始時に
   偽を返す
  }
  if (tY < 0 && Math.abs(tX) <= Math.abs(tY)) { // 下にスライド this.data.flag = 3
  } else if (tY > 0 && Math.abs(tX) <= Math.abs(tY)) { // 上にスライド this.data.flag = 1
  } else if (tX < 0 && Math.abs(tX) > Math.abs(tY)) { // 左にスライド this.data.flag = 2
  } else if (tX > 0 && Math.abs(tX) > Math.abs(tY)) { // 右にスライド this.data.flag = 0
  }
  if(this.data.modalHidden){
   this.move(this.data.flag)
  }  
 },
 /**
  * ヘビが動く */
 移動: 関数 (状態) {
  クリア間隔(this.data.timer)
  // console.log(this.data.snake.length)
  var that = これ
  switch(state){ // スライド方向を決定する case 0:
    this.data.timer = setInterval(function(){
     that.moveRight()
    }, 600)
    壊す
   ケース1:
    this.data.timer = setInterval(関数() {
     that.moveBottom()
    }, 600)
    壊す
   ケース2:
    this.data.timer = setInterval(関数() {
     that.moveLeft()
    }, 600)
    壊す
   ケース3:
    this.data.timer = setInterval(関数() {
     that.moveTop()
    }, 600)
    壊す
  }
 },

 右へ移動: 関数 () {
  // コンソールログ(this.data.snake)
  var snakeArr = this.data.snake
  var snakeLen = snakeArr.length
  var snakeHead = snakeArr[snakeLen - 1]
  var snakeTail = snakeArr[0]
  var グラウンド = this.data.ground

  (var i = 0; i < snakeLen - 1; i++) の場合 {
   ヘビArr[i] = ヘビArr[i + 1]
  }

  var x = スネークヘッド[0]
  変数 y = スネークヘッド[1] + 1

  y >= this.data.cols の場合 {
   this.gameOver()
   戻る
  }

  snakeArr[snakeLen - 1] = [x, y]
  地面[x][y] = 1
  地面[ヘビの尾[0]][ヘビの尾[1]] = 0
  this.setData({
   ヘビ: ヘビArr、
   地面: 地面
  })
  this.checkGame(snakeTail, [x, y]) // ゲームオーバーかどうかをチェック
 },
 下へ移動: 関数 () {
  var snakeArr = this.data.snake
  var snakeLen = snakeArr.length
  var snakeHead = snakeArr[snakeLen - 1]
  var snakeTail = snakeArr[0]
  var グラウンド = this.data.ground

  (var i = 0; i < snakeLen - 1; i++) の場合 {
   ヘビArr[i] = ヘビArr[i + 1]
  }

  var x = スネークヘッド[0] + 1
  var y = スネークヘッド[1]

  (x >= this.data.rows) の場合 {
   this.gameOver()
   戻る
  }

  snakeArr[snakeLen - 1] = [x, y]
  地面[x][y] = 1
  地面[ヘビの尾[0]][ヘビの尾[1]] = 0
  this.setData({
   ヘビ: ヘビArr、
   地面: 地面
  })
  this.checkGame(snakeTail, [x, y]) // ゲームオーバーかどうかをチェック
 },
 左へ移動: 関数 () {
  var snakeArr = this.data.snake
  var snakeLen = snakeArr.length
  var snakeHead = snakeArr[snakeLen - 1]
  var snakeTail = snakeArr[0]
  var グラウンド = this.data.ground

  (var i = 0; i < snakeLen - 1; i++) の場合 {
   ヘビArr[i] = ヘビArr[i + 1]
  }

  var x = スネークヘッド[0]
  変数 y = スネークヘッド[1] - 1

  （y < 0）の場合{
   this.gameOver()
   戻る
  }

  snakeArr[snakeLen - 1] = [x, y]
  地面[x][y] = 1
  地面[ヘビの尾[0]][ヘビの尾[1]] = 0
  this.setData({
   ヘビ: ヘビArr、
   地面: 地面
  })
  this.checkGame(snakeTail, [x, y]) // ゲームオーバーかどうかをチェック
 },
 上へ移動: 関数 () {
  var snakeArr = this.data.snake
  var snakeLen = snakeArr.length
  var snakeHead = snakeArr[snakeLen - 1]
  var snakeTail = snakeArr[0]
  var グラウンド = this.data.ground

  (var i = 0; i < snakeLen - 1; i++) の場合 {
   ヘビArr[i] = ヘビArr[i + 1]
  }

  var x = スネークヘッド[0] - 1
  var y = スネークヘッド[1]

  (x < 0) の場合 {
   this.gameOver()
   戻る
  }

  snakeArr[snakeLen - 1] = [x, y]
  地面[x][y] = 1
  コンソールログ(y)
  地面[ヘビの尾[0]][ヘビの尾[1]] = 0
  this.setData({
   ヘビ: ヘビArr、
   地面: 地面
  })
  this.checkGame(snakeTail, [x, y]) // ゲームオーバーかどうかをチェック
 },

 /**
  * ゲームオーバーを確認
  * 壁にぶつかるとゲームオーバーとなり、再起動するかリロードするかを尋ねるポップアップボックスが表示されます。
  * 自分を攻撃するとゲームオーバー
  * 食べ物を食べる - ヘビの体が長くなり、食べ物を再生します*/
 checkGame: 関数 (snakeTail, snakeHead) {
  console.log("スネークの動きをテストする")
  コンソールログ(snakeHead)
  
  var snakeArrs = this.data.snake
  var len = this.data.snake.length
  var 食べ物 = this.data.food
  var グラウンド = this.data.ground

  console.log(this.data.snake[len-1])
  // 壁にぶつかったかどうかを判定します if (snakeHead[0] >= 0 & snakeHead[0] < this.data.rows & snakeHead[1] >= 0 & snakeHead[1] < this.data.cols)
  {   
   this.data.modalHidden = true
   this.collisionSnakeFood(snakeTail、snakeHead、food) の衝突
   this.setData({
    // スネーク: this.data.snakeArr,
    // グラウンド: this.data.ground,
    modalHidden: this.data.modaleHidden
   })
  } それ以外 {
   this.gameOver()
   戻る
  }
 },

 // 食べ物を叩くとゲームは続行されます collisionSnakeFood: function (tail, head, food) {
  snake = this.data.snake とします
  ground = this.data.ground とします。
  行をfood[0]とする
  col = food[1]とする
  スコア = this.data.score とします
  maxScore = this.data.maxScore とします
  （頭[0] === 食べ物[0] & 頭[1] === 食べ物[1]）{
   地面[行][列] = 1
   ヘビの尾をシフト解除する
   地面[尾[0]][尾[1]] = 1
   this.initFood()
   スコア += 5
   if (!this.data.isMaxActive) {
    maxScore = スコア
   }
  }
  this.setData({
   ヘビ：ヘビ、
   地面: 地面、
   スコア: スコア、
   最大スコア: 最大スコア
  })
 },

 // ゲームオーバー gameOver: function () {
  クリア間隔(this.data.timer)
  _that = this とする
  maxS = this.data.maxScore とします。
  this.setData({
   モード非表示: false、
   タイマー: null
  })
  if (wx.getStorageSync("MaxScore")){
   hisScore = wx.getStorageSync("MaxScore") とします。
   （彼のスコア<maxS）の場合{
    wx.setStorageSync("MaxScore", maxS)
   }
  } それ以外 {
   wx.setStorageSync("MaxScore", maxS)
  }
  wx.showModal({
   タイトル: 「ゲームに失敗しました」
   内容: 「新しいゲームを再開するには[OK]をクリックします。ホームページに戻るには[キャンセル]をクリックします。」
   成功: function(res) {
    確認する場合
     _that.setData({
      スコア: 0,
      gameStart: false, // ゲームが開始したかどうか snake: '', // ヘビの位置 food: [], // 食べ物の位置 modalEdden: true
     })
     _that.onLoad()
    }
   }
  })
 },

  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {
  
  }
})