집 > 기사 > 웹 프론트엔드 > Vue를 사용하여 2048 미니게임을 구현하는 단계에 대한 자세한 설명

Vue를 사용하여 2048 미니게임을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-22 14:51:452265검색

이번에는 vue를 사용하여 2048 미니게임을 구현하는 단계에 대해 자세히 설명하겠습니다. vue를 사용하여 2048 미니게임을 구현하는 주의사항은 무엇인가요?

git clone
npm i
npm run dev

구현 아이디어는 다음과 같습니다.

vue-cli를 사용하여 프로젝트를 빌드합니다. 이 프로젝트에서는 약간 번거로울 수 있지만
를 사용하여 또 다른
4X4 정사각형을 빌드하기에는 너무 게으릅니다. 2차원 배열 저장하고 바인딩하기 설정한 뒤 이 2차원 배열만 신경쓰고 나머지는 vue에 맡기세요
키보드event
2048의 핵심 부분을 들어보세요 이동 및 병합 알고리즘은 4X4 행렬이므로 왼쪽 이동 알고리즘만 구현하면 됩니다. 다른 방향으로 이동하려면 행렬을 회전하고 이동 및 병합한 다음 뒤로 회전하고 돔을 렌더링하면 됩니다
다양한 값으로 스타일을 바인딩
점수 계산, 로컬 저장소를 사용하여 가장 높은 점수 저장

구현의 핵심

DOM

<p class="box">
  <p class="row" v-for="row in list">
    <p class="col" :class="&#39;n-&#39;+col" v-for="col in row">{col}}</p>
  </p>
</p>

주요 게임 부분의 DOM은 매우 간단합니다. . 2차원 배열로 렌더링되며 스타일에 동적으로 바인딩됩니다.

Shift left

주로 다음과 같은 케이스로 구성됩니다.

2 2 2 2 =>
4 2 2 => 4 4 2 0
0 4 2 2=> 4 4 0 0
2 2 4 2 => 4 4 2 0
단일 행 데이터,

단일 행 배열을 순회하여 데이터가 있으면 셀로 기록하고 셀이 가장 왼쪽으로 이동할 수 있는 가장 먼 빈 위치를 찾습니다.

왼쪽 여부를 결정합니다. 가장 먼 쪽이 존재하지 않으면 바로 가장 먼 곳으로 이동
있다면 가장 먼 쪽 - 1의 값이 셀과 같은지 판단하세요
Same => Merge
Not the 동일 =>가장 먼 위치로 이동
이동 후 셀을 비우세요
다음 라운드
한 라운드 동안 숫자는 한 번만 병합될 수 있으므로 각 그리드에는 merged 매개변수는 병합 여부를 기록합니다.

메인 코드 :

_list.forEach(item => {
    let farthest = this.farthestPosition(list, item)
    let next = list[farthest - 1]
    if (next && next === item.value && !_list[farthest - 1].merged) {
      //合并
      list[farthest - 1] = next * 2
      list[item.x] = undefined
      item = {
        x: farthest - 1,
        merged: true,
        value: next * 2
      }
      this.score += next * 2
    } else {
      if (farthest != item.x) {
        list[farthest] = item.value
        list[item.x] = undefined
        item.x = farthest
      }
    }
  })

행렬 회전

실제로 상하좌우 시프트가 동일하기 때문에 4번 쓸 수 있지만 실수하기 쉬우므로 직접 행렬 회전 회전한 다음 이동합니다.

예를 들어 위쪽 이동을 시계 반대 방향으로 한 번 회전하면 위쪽 이동이 왼쪽 이동이 됩니다. 움직임이 병합된 후에는 행렬을 시계 반대 방향으로 4-1회만 회전하면 됩니다. 단순한 상향 이동과 동일합니다.

반시계 방향 회전 알고리즘:

rotate(arr, n) {
    n = n % 4
    if (n === 0) return arr
    let tmp = Array.from(Array(this.size)).map(() => Array(this.size).fill(undefined))
    for (let i = 0; i < this.size; i++) {
      for (let j = 0; j < this.size; j++) {
        tmp[this.size - 1 - i][j] = arr[j][i]
      }
    }
    if (n > 1) tmp = this.rotate(tmp, n - 1)
    return tmp
  },

이 시점에서는 80% 완료되었으며, 포인트 추가, 재시작 및 기타 기능만 개선하면 됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!