[JavaScript] 테트리스 웹 게임 만들기 (7) 기능 마무리

테트리스 웹 게임 만들기 (7) 기능 마무리

 

 

1. 점수 설정

동시에 1개의 블록을 없앴을 때 : 1점

동시에 2개의 블럭을 없앴을 때 : 2배 = 4점

동시에 3개의 블력을 없앴을 때 : 3배 = 9점

동시에 4개의 블럭을 없앴을 때 : 4배 = 16점

 

생성자에 score과 DOM요소를 추가해준다.

constructor() {
    ...
    this.score = 0
    this.scoreScreen = document.querySelector('.score')
    ...
}

 

기존의 breakBolock에서 블록 한 줄이 없어질 때마다 s를 1씩 더해주었고

해당 s의 보너스 점수를 부여한다음, 현재 score에 반영하고 innerText를 바꿔줬다.

  breakBlock() {
    let s = 0
    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)
        s++
      }
    })
    if (s == 1) {
      //one
    } else if (s == 2) {
      //double
      s *= 2
    } else if (s == 3) {
      //triple
      s *= 3
    } else if (s == 4) {
      //tetris
      s *= 4
    }
    this.score += s
    this.scoreScreen.innerText = this.score
    this.makeNewBlock()
  }

 

---

2. 게임 오버

기존의 checkNextBlock을 체크할 때, where가 'start'라면 게임을 끝내주기 위해서

this.finishGame을 호출한다.

  checkNextBlock(where = ''){
  ...
        // 그외 : 좌,우 이동 & 처음 시작했을 경우
        else {
          // 범위 내이지만 해당 위치에 블록이 이미 있을 경우
          if (target && target.classList.contains('finish')) {
            isFinished = true
            this.movingBlock = { ...this.blockInfo }
            // 만약 처음 렌더링 된 블록이라면 게임 종료
            if (where === 'start') {
              setTimeout(() => {
                this.finishGame()
              }, 0)
              return true
            }
            ...
          }
  ...
  }

 

게임이 종료하게 되면 popup창의 display를 flex로 해서 보여주게 한다.

downInterval과 timeInterval은 clear 해준다.

finishGame() {
    const popup = document.querySelector('.popup')
    popup.style.display = 'flex'
    clearInterval(this.downInterval)
    clearInterval(this.timeInterval)
  }

 

css설정도 해주었다.

.popup {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  left: 0;
  top: 0;
  color: #fff;
  font-size: 50px;
  z-index: 1;
}
.popup > button {
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: salmon;
  border: none;
  cursor: pointer;
  transition: ease-in, 300ms;
}
.popup > button:hover {
  transform: scale(1.1);
}

 

---

3. 다시 시작

다시 시작하는 함수를 만들어준다.

팝업창의 display는 none으로 설정해서 숨긴다.

  reStart() {
    const popup = document.querySelector('.popup')
    popup.style.display = 'none'
    this.init()
  }

 

DOM을 정의하고 해당 버튼에 이벤트를 설정해서 reStart를 실행해준다.

  const restart = document.querySelector('.restart')
  restart.addEventListener('click', () => {
    this.reStart()
  })

 

 

드디어 게임의 기본적인 기능들을 전부 구현했다.

다음 게시글에는 남은 디자인들과 효과음 설정을 해주고 마무리를 할 것이다.