Vue.js로 러시아 블록을 만들어 봤어요.

개시하다

npm과 Vue는 가져오기가 완료된 전제에서 진행됩니다.
베일의 러시아 블록을 사용했다는 기사가 많이 없어서 이번에 써봤어요.

컨디션

다음과 같은 환경에서 구현됩니다.
OS: macOS High Sierra 10.13.6
Vue: 2.9.6
node: v10.7.0
npm: 6.2.0

컨텐트

Github 공개.
논리 주위를 간단하게 다음과 같이 기재하다
상술한 창고를 보면 바로 파악할 수 있다.
만드는 데 시간이 많이 걸리지 않았기 때문에, 완비되지 않은 곳이 있다면
연락 주시기 바랍니다.

논리/UI 주변

1. 외관
제가 CSS를 잘 못해서 사용Buefy해서 어느 정도 외관을 조정했습니다.
예: 시작할 때의 모드 화면
'b-'로 시작하는 구성 요소는 buefy에서 사용하는 구성 요소입니다.
또한 CSS 프레임워크bulma의 파생으로 인해
반에서 button과 is-ifo 등을 정의할 수 있습니다.
Main.vue

<b-modal :active.sync="startFlg"
         :canCancel="false">
  <button class="button is-info is-large"
          @click="startFlg=false; start()">Game Start</button>
</b-modal>

2. 그리기
SetInterval을 사용하여 드로잉합니다.
draw 함수를 사용하여 실제 그리기 처리를 합니다.
Main.vue

draw () {
  this.init()
  for (var b in this.block) {
    console.log('draw b: ' + this.block[b].x + ', ' + this.block[b].y + ', ' + this.gameTable[this.block[b].y][this.block[b].x])
    if (this.gameTable[this.block[b].y][this.block[b].x] === 0) {
      console.log('draw: ' + this.block[b].x + ', ' + this.block[b].y)
      this.gameTable[this.block[b].y].splice(this.block[b].x, 1, 1)
    }
  }
}

3. 블록 이동
move 함수를 만들어 x 좌표와 y 좌표를 매개 변수로 이동합니다.
또한 이동 중인 블록은 1로 정의됩니다.
Main.vue

move (x, y) {
  this.init()
  for (var b in this.block) {
    this.block.splice(b, 1, {x: this.block[b].x + x, y: this.block[b].y + y})
  }
}

4. 블록 설정
splice를 사용하여 "2"를 설정하면 블록이 설정된 것을 표시합니다.
Main.vue

setBlock () {
  this.init()
  for (var b in this.block) {
    console.log('setBlock: ' + this.block[b].x + ', ' + this.block[b].y)
    this.gameTable[this.block[b].y].splice(this.block[b].x, 1, 2)
  } 
}

5. 적목 제거
2는 설정된 블록을 나타냅니다.
그게 일렬로 늘어날 때 해소 처리해.
unshift를 사용하여 삭제 처리를 합니다.
Main.vue

clearLine () {
  var line = [2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
  var clearLine = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  for (var y = 0; y < this.gameTable.length; y++) {
    if (this.arrayCheck(this.gameTable[y], line)) {
      this.gameTable.splice(y, 1)
      this.gameTable.unshift(clearLine)
      this.score += 100
      this.level -= 5
    }
  }
}

실행 결과

지운 후의 그리기와 조작 주위의 작업은 여전히 바키이지만 모양은 다음과 같다.
시간이 있으면 Fix를 원합니다.