?? ?, ?? ?? ?, ??? Snake OC ?? ??? ?? ??? ??????. ? ?? ?? WeChat ?? ????? ??? ??? ? ?? ??? ?? ?? ????? ??????. ???? ??

?? ??? ? ?????

???? iOS?? ???? ???, ???? ?? ????? ????? ??? ??? ????. ???? ??? ??? ??? ?? ?? ??? ?? ??? ??? ??????. , ??? ???? ??? ????? ? ??? ? ?????? ????? ??!

???? ???????

??? ????

?? ????? ???? ?????. ?? ???? ??? ??? ????. ?? ??? ???????. ?? ?????? ?? OC ??? ?? ?????. ??? ???? ???? ????? ? ? ???. ?? ?? ? ?? J(???)?? ????? a B (harmony)? :joy:

?? ???? ??? ?????. ????

<view class="backView">
  <canvas canvas-id="snakeCanvas" class="canvas"/>
</view>
<view class="controlView">
    <button class="btnClass" bindtap="changeDirection" id="up">up</button>
    <view style="display:flex; height:33.33%">
        <button class="btnClass" bindtap="changeDirection" id="left">left</button>
        <button class="btnClass" bindtap="startGame" >{{btnTitle}}</button>
        <button class="btnClass" bindtap="changeDirection" id="right">right</button>
    </view>
    <button class="btnClass" bindtap="changeDirection" id="down">down</button>
</view>

? wxml ?? ??? ?? ?????. ??? ??? 5??

??? ?? ?

wxsslayout

? ???????. ??? ?? ????. ?? ??? CSS? ?? ? ????. ?? ?? ?????. ???? :hankey:? ???????. ? ?? ???? ??? ?? ? ??? ?? ??? ?????

?? ??

????? ??? ???? ?????. ????? ??? ? ? ????. ? ? ? ??? ??? ??? ??? ? ????. ???? ????? ??? ?? js???.

???? ?? js? ?? ? ??? ??? ?? ???... ??????. ??? ?? ?????? ??? ???? ???? ???.

????? ?? OC??? ????

????: ? ????? ?? ?, ???? ???? ???? ????? ????.

??: ???? ???? ?????. ??? ??? ?? ???? ?????

?? ???: ? ??? ??? ?? ?? ??? ?????

?? ??: ? ?? ??? ?, ?? ??? ??? ??? ?? ?? ??? ??? ???? ?? ???

?? ?? : ? ?? ?? ? ??? ???? ??

?? ?? : ?? ??? ???? ????? ??? ?? ???? ??? ?????

? ???

//創(chuàng)建蛇，初始為5節(jié)，nodeWH為矩形的邊長(zhǎng)
function createSnake(){
  nodes.splice(0, nodes.length) //清空數(shù)組
  for (var i = 4; i >= 0; i--) {
    var node = new Node(nodeWH * (i + 0.5), nodeWH * 0.5)
    nodes.push(node);
  }
}

?? ???

function createFood(){
  //矩形的邊長(zhǎng)為10，畫布寬度為250，高度為350，所以x只能取5-245，y只能取5-345
  var x = parseInt(Math.random() * 24) * nodeWH + nodeWH * 0.5
  var y = parseInt(Math.random() * 34) * nodeWH + nodeWH * 0.5

  //如果食物的坐標(biāo)在蛇身上，則重新創(chuàng)建
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i]
    if (node.x == x && node.y == y) {
      createFood()
      return
    }
  }
  //Node為自定義的類，有兩個(gè)屬性x和y，表示坐標(biāo)
  food = new Node(x,y)
}

?? ???

?? ????? ??? ???? ?? ??? ???? ?? ?? ??? ?????. ??? ???? ????? ????? ?????. .

?? ???? ?? ??? ??? ?? ?? ???? ????? ???? ?????, ? ???? ???? ?? ?? ????? ???? ??? ?? ?????. , ???? ?? ?

?? ??? ?? ?? ?

??? ???? ??? ? ??? ??? ??? ??? ??? ???? ?????. ??? ??? ?? ??? ???? ??? ??? ???? ???

function isEatedFood(){
  var head = nodes[0]
  if (head.x == food.x && head.y == food.y) {
    score++
    nodes.push(lastPoint)
    createFood()
  }
}

? ???? lastPoint? ?? ??? ??? ?? ?? ??? ??? ? ?? ?? ?? ???? ???. ? ???? ? ??? ??? ?

??? ?????

??? ??? ? ??? ???? ????? ??? ?? ??? ???? ???

function isDestroy(){
  var head = nodes[0]
  //判斷是否撞到自己身體
  for (var i = 1; i < nodes.length; i++) {
    var node = nodes[i]
    if (head.x == node.x && head.y == node.y) {
      gameOver()
    }
  }
  //判斷水平方向是否越界
  if (head.x < 5 || head.x > 245) {
    gameOver()
  }
  //判斷垂直方向是否越界
  if (head.y < 5 || head.y > 345) {
    gameOver()
  }
}

????? ???

?? ??? ??? ??? ? ???? ?????. ???? setInterval? ?????

function move(){
  lastPoint = nodes[nodes.length - 1]
  var node = nodes[0]
  var newNode = {x: node.x, y: node.y}
  switch (direction) {
    case 'up':
      newNode.y -= nodeWH;
    break;
    case 'left':
      newNode.x -= nodeWH;
    break;
    case 'right':
      newNode.x += nodeWH;
    break;
    case 'down':
      newNode.y += nodeWH;
    break;
  } 
  nodes.pop()
  nodes.unshift(newNode)
  moveEnd()
}

function startGame() {
  if (isGameOver) {
    direction = 'right'
    createSnake()
    createFood()
    score = 0
    isGameOver = false
  }
  timer = setInterval(move,300)
}

?????? setInterval? ??? ?? ?? ??? ???. requestAnimationFrame? ???? ?? ??? ????? ??? ????? ??????. .????? ???? ??? ??????

var animateId = 0
function move(){
    .
    .
    .
    animateId = requestAnimationFrame(move)
}
function startGame(){
    .
    .
    .
    animateId = requestAnimationFrame(move)
}

?? ??? ???? ?? ???? ?????? ?? ???? ??? ? ????. ??? animateId? ??? ??? ??? ?? ?????. ??? cancelAnimationFrame(animateId)? ???? ????? ? ????. ????? ??? ? ??? ??? ???? ?? ??????

?? ??? ?? ?????. ???? ???? ?? ????

[?? ??]

1.

html5 ? ?? ?? ?? ??? ??? ???? ?? ??

2.

Python? ???? ? ??? ???? ?? ??

3. ?? ???? ??

4.

[HTML5 ?? ??] 17?? ?? ? ?? ??

5

JavaScript? ????? ?? ???? ?? ???? ?? ??????

? ??? WeChat ?? ???? - ? ???? ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!