[JavaScript] 테트리스 웹 게임 만들기 (6) 블록 부수기

테트리스 웹 게임 만들기 (6) 블록 부수기

 

 

1. 일정 시간마다 한 칸씩 이동 설정

우선, duration을 설정해주는 일정 시간을 점점 줄여주는 setSpeed함수를 정의한다.

처음 duration은 1000ms부터 시작해서 최소 120ms까지 20ms씩 줄여나갈 것이다.

처음엔 레벨 1이고 MAX레벨 45까지 증가하도록 해줬다.

  setSpeed() {
    if (this.duration <= 120) {
      return
    } else {
      this.duration -= 20
      this.level += 1
      if (this.level === 45) {
        this.level = '45(MAX)'
      }
      this.levelScreen.innerHTML = this.level
      console.log(this.duration)
    }
  }

 

그러고 나서 게임 시작 함수인 init에 게임 시작과 동시에 시간이 흐르게 설정해준다.

시간이 5초가 지나갈때마다 setSpeed함수를 실행해주어서 duration을 20ms씩 줄여주는 역할을 해준다.

  init() {
    this.level = 1
    this.duration = 1000
    this.levelScreen.innerHTML = this.level
    this.timeInterval = setInterval(() => {
      this.time += 1
      if (this.time % 5 == 0) {
        this.setSpeed()
      }
    }, 1000)
    
    ...
  }

 

새로 블록을 만들때, 기존의 인터벌을 없애고 새로운 downInterval을 설정해준다

  makeNewBlock() {
    ...
    clearInterval(this.downInterval)
    this.downInterval = setInterval(() => {
      this.moveBlock('n', 1)
    }, this.duration)
   ...
  }

 

---

2. 블록 전환 유효성 검사

블록이 좌우 양끝에서 돌았을 때, 표의 바깥으로 나갈 수도 있기 때문에

changeDirection에서 checkBlock으로 넘어간 블록들은 한번 더 유효성 검사를 해준다.

I 모양의 블록은 타 블록보다 하나는 더 길기 때문에 따로 검사를 해줬다.

움직인 블록이 해당 표의 범위 안에 있는지 검사 넘어간다면 알맞은 좌표를 넣어주고 다시 한번

유요한 블록인지 checkNextBlock

  moveAndTurn() {
    if (this.movingBlock.m < 0) {
      this.movingBlock.m = 0
    } else if (this.movingBlock.m + 3 >= this.M) {
      if (this.movingBlock.type === 'I') {
        this.movingBlock.m = 6
      } else {
        this.movingBlock.m = 7
      }
    }
    this.checkNextBlock('m')
  }

 

---

3. 블록 부수기

이제 블록이 Finish됐을 때마다 모든 표를 검사해서

블록으로 전부 차있는 줄을 없애고 사라진 줄 만큼 새로운 줄을 만들어주는 함수를 정의해보자

  breakBlock() {
    const tr = this.stage.childNodes
    tr.forEach((line) => {
      let isBreak = true
      line.childNodes.forEach((td) => {
        if (!td.classList.contains('finish')) {
          isBreak = false
        }
      })
      if (isBreak) {
        line.remove()
        const tr = document.createElement('tr')
        let ground = []
        for (let j = 0; j < this.M; j++) {
          ground.push('<td></td>')
        }
        tr.innerHTML = ground.join('')
        this.stage.prepend(tr)
      }
    })
    this.makeNewBlock()
  }

 

그리고 기존의 블록의 움직임을 끝내는 finishBlock에서 breakBlock()을 호출해준다.

finishBlock() {
    clearInterval(this.downInterval)
    const temp = document.querySelectorAll('.moving')
    temp.forEach((block) => {
      block.classList.remove('moving')
      block.classList.add('finish')
    })
    this.breakBlock()
  }

 

 

다음엔 점수 설정과 게임 종료, 게임 재시작 등을 구현해보자