WeChat 미니 프로그램 - 뱀 튜토리얼 예

오래 전, 거의 반년 전, 저자가 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버전과 같습니다

스네이크: 점 좌표배열을 만든 후, 좌표점을 중심으로 캔버스에 직사각형을 그립니다.

음식: 좌표점을 무작위로 선택합니다. 그렇지 않으면 다시 무작위로 지정됩니다

뱀의 움직임: 뱀 꼬리의 좌표를 뱀의 머리 앞으로 이동하세요

음식 먹기: 각 뱀이 움직인 후, 뱀의 머리의 좌표가 다음과 같을 경우 먹이의 좌표와 동일하게 뱀이 자란다

뱀의 성장 : 뱀 꼬리 뒤에 점 좌표만 추가하면 된다

게임 종료 : 뱀의 머리가 경계선을 넘어가거나 자신의 몸에 부딪히면 게임이 종료됩니다

뱀 만들기

//创建蛇，初始为5节，nodeWH为矩形的边长
function createSnake(){
  nodes.splice(0, nodes.length) //清空数组
  for (var i = 4; i >= 0; i--) {
    var node = new Node(nodeWH * (i + 0.5), nodeWH * 0.5)
    nodes.push(node);
  }
}

음식 만들기

function createFood(){
  //矩形的边长为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

  //如果食物的坐标在蛇身上，则重新创建
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i]
    if (node.x == x && node.y == y) {
      createFood()
      return
    }
  }
  //Node为自定义的类，有两个属性x和y，表示坐标
  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!