[JavaScript] 테트리스 웹 게임 만들기 (3) 블록 정의 및 렌더링

테트리스 웹 게임 만들기 (3) - 블록 정의 및 렌더링

 

1. 블록 정의

이제 블록의 모양을 지정할 차례이다. 정의하기 전에 좌표를 설정하기 위해서 블록들을 그렸다.

이후 아래와 같이 블록 객체에 각 블록의 이름을 지정해주고 블록의 위치인 2차원 배열을 할당해주었다.

// js/block.js
const blocks = {
  square: [
    [
      [0, 1],
      [0, 2],
      [1, 1],
      [1, 2],
    ],
    [
      [0, 1],
      [0, 2],
      [1, 1],
      [1, 2],
    ],
    [
      [0, 1],
      [0, 2],
      [1, 1],
      [1, 2],
    ],
    [
      [0, 1],
      [0, 2],
      [1, 1],
      [1, 2],
    ],
  ],
  I: [
    // ...
  ],
  L: [
    // ...
  ],
  L2: [
    // ...
  ],
  Z: [
    // ...
  Z2: [
   // ...
  ],
  H: [
    // ...
  ],
}

export default blocks

---

 

2. 다음에 나타날 블록 리스트 정의

현재 블록의 정보를 담을 blockInfo, 다음에 나올 블록의 정보들을 담을 nextBlocks, 현재 블록이 움직임 movingBlock 선언

// js/tetris.js
import Blocks from './blocks.js'

export default class Tetris {
  constructor() {
    //block
    this.blockInfo = undefined
    this.movingBlock = undefined
    this.nextBlocks = []
  }
}

 

Block객체의 entries를 이용해서 blockArray를 선언해준다.

Math의 랜덤함수를 이용해서 0부터 6까지의 무작위의 index값을 생성해준다.

이를 이용해서 nextBlocks리스트에 push를 해준다.

다음 블록을 4개까지 보여주기 위해 init에서 네 번 호출해준다. 

// js/tetris.js 클래스 내부

  init() {
    this.makeGround()
    this.nextBlocks = []
    for (let i = 0; i < 4; i++) {
      this.makeNextBlock()
    }
  }
  
  makeNextBlock() {
    const blockArray = Object.entries(Blocks)
    const randomIndex = Math.floor(Math.random() * blockArray.length)
    this.nextBlocks.push(blockArray[randomIndex][0])
  }

 

콘솔 창에 찍어보면 아주 잘 들어왔다.

---

 

3. 다음 블록 렌더링

이제 위의 값을 이용해서 다음 블록들을 화면에 띄워보자

코딩하기에 앞서 미리 루트에서 img폴더를 만들어서 이미지들을 넣어줬다.

 

이후 img태그들을 next클래스를 가진 div태그에 넣어주자

// js/tetris.js 클래스 내부

  init() {
    this.makeGround()
    this.nextBlocks = []
    for (let i = 0; i < 4; i++) {
      this.makeNextBlock()
    }
    this.renderNextBlock()
  }
  
renderNextBlock() {
    const next = document.querySelector('.next')
    let temp = []
    for (let i = 0; i < 4; i++) {
      temp.push(
        `<img class='tetris' src="./img/${this.nextBlocks[i]}.png" alt=${this.nextBlocks[i]}"/>`
      )
    }
    next.innerHTML = temp.join('')
  }

 

이후 css를 설정해준다 첫 번째 블록은 바로 다음에 나올 블록이라서 조금 더 크게 설정을 해주었다.

.tetris:first-child {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.tetris {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 10px;
}
.next {
  display: flex;
  flex-direction: column;
  width: 100px;
  margin-left: 1em;
}

 

---

 

4. 블록 렌더링

init함수를 아래와 같이 업데이트하고 블록을 렌더링 할 renderBlock함수를 만들어줬다.

현재 움직이는 block의 값을 받아와서 초기값인 n, m에 해당 블록 타입의 좌표를 Blocks에서 받아온다.

이후 각 칸마다 type 클래스와 moving 클래스를 적용해주었다.

여기서 type은 색을 입히기 위한 클래스이고, moving은 현재 움직이는 블록들을 구분하기 위한 클래스이다.

 

이후 makeNewBlock함수에서 nextBlocks에서 shift를 해준 값을 기본 값인 blockInfo에 넣어준다

이를 스프레드를 이용해서 movingBlock에 복사해준다.

shift해준 값을 채워주기 위해 makeNextBlock(랜덤 블록 생성)을 한번 실행해주고

renderNextBlock(다음에 올 블록 리스트 보여주기)를 실행해서 값을 업데이트해준다.

// js/tetris.js 클래스 내부

  init() {
    this.makeGround()
    this.nextBlocks = []
    for (let i = 0; i < 4; i++) {
      this.makeNextBlock()
    }
    this.renderNextBlock()
    this.renderBlock()
  }
  
  makeNewBlock() {
    const next = this.nextBlocks.shift()
    this.blockInfo = {
      type: next,
      direction: 0,
      n: 0,
      m: 3,
    }
    this.movingBlock = { ...this.blockInfo }
    this.makeNextBlock()
    this.renderNextBlock()
    this.renderBlock()
  }

  renderBlock() {
    const { type, direction, n, m } = this.movingBlock
    Blocks[type][direction].forEach((block) => {
      const x = block[0] + n
      const y = block[1] + m
      const target = this.stage.childNodes[x].childNodes[y]
      target.classList.add(type, 'moving')
    })
  }

 

이후, css에서 각 블록 타입마다 색을 지정해주었다.

.square {
  background-color: #cc0b10;
}
.L {
  background-color: #369a30;
}
.L2 {
  background-color: #1265a6;
}
.I {
  background-color: #5ab0bd;
}
.Z {
  background-color: #da8400;
}
.Z2 {
  background-color: #894085;
}
.H {
  background-color: #ebd500;
}