테트리스 기능 추가

추가한 기능

시간이 지날수록 내려오는 속도 빠르게 하기

블록이 자동으로 내려오는 것을 setInterVal을 활용해 구현한 것에서 착안하여 setInterVal을 또 활용하는 방식으로 이를 구현해 보았다.

• 게임이 시작할 때 setInterval을 사용해 1분마다
  duration에서 100씩 빼주는 방식을 통해 이를 구현하였다.

this.init = ()=>{
	...
    this.AccelationInterval = setInterval(() => {
      this.duration -= 100;
    }, 60000);
  
}

• 또, duration값이 일정 값 이하로 내려가는 것을 방지하기 위해 새로운 블록이 생성될 때 현재 duration값을 확인하여 200인 경우 clearInterval을 해줬다.

const generateNewBlock = (type)=>{
  ...
    if (this.duration === 200) {
      clearInterval(this.AccelationInterval);
    }
  ...
}

다음 블록을 게임판 옆에서 보여주기

0. 랜덤으로 블록 type을 결정하는 부분을 분리해 함수로 선언해줌

  const selectBlock = () => {
    const blockTypes = Object.keys(BLOCKS);
    const randomIndex = Math.floor(Math.random() * blockTypes.length);
    return blockTypes[randomIndex];
  };

1. 랜덤으로 블록 type을 결정(selectBlock)하고 블록을 랜더링해줌

 this.init = () =>{
 	generateNewBlock(selectBlock());
 }
 
 const generateNewBlock = (type) =>{
  	...
	renderBlocks();
    showNextBlocks();
}

2. 다음 블록을 결정(selectBlock), 해당 블록 type을 nextBlock에 저장하고, 게임판 옆에 다음 블록을 게임판 옆에 랜더링

const showNextBlocks = () => {
    // 다음 블록을 그리기 전에 이전의 블록을 제거
    clearNextBlockGround();
  
    const type = selectBlock();
    const direction = 0;
	
    BLOCKS[type][direction].forEach((block) => {
      let [x, y] = [block[0] + 1, block[1] + 1];
      const target = nextBlockGround.childNodes[y].children[0].childNodes[x];
      target.classList.add(type, "next-block");
      target.style.outline = "1px solid #ccc";
    });
	
    this.nextBlock = type;
  };

3. 현재 블록이 바닥에 닿고 난 후 새로운 블록을 생성할 때 랜덤으로 블록 type을 결정하지 않고 nextBlock에 저장된 블록 type을 사용한다.

const checkMatch = ()=>{
	...
    generateNewBlock(this.nextBlock)
}

추가 수정사항

게임 종료와 재시작 시 이벤트리스너 제거

removeEventListener

• 방향키 한 번 누르면 한칸 씩 이동해야하는데 두번째 판 부터 두칸씩, 세번 째 판에는 세칸씩 이동했다. 원인을 분석해보니(getEventListeners(window)로 확인함) 같은 eventListener가 게임이 시작될 때마다 호출이 되어 동일한 이벤트리스너가 중복으로 존재하였고 따라서 키보드 입력 이벤트 발생 시 중복으로 callback이 실행되는 것이었다. (다시 시작 버튼도 같은 문제가 있었다.)

• 또 게임이 종료되었음에도 eventListener가 등록되어 있어 블록을 움직일 수 있는 문제가 있었다.

• 이러한 문제를 해결하기 위해 임시방편으로 location.reload()을 사용하여 다시시작 버튼을 누르면 페이지를 새로고침하여 재시작 시 eventListener의 중복을 막을순 있었지만, 게임 종료시
  블록이 움직이는 문제를 해결할 수 없었다. 다른 방법을 찾게 되었고 removeEventListener를 알게 되었다.

• 게임 시작 시(init)과 종료 시에 removeEventListener를 사용하여, 이벤트 리스너를 제거하여 문제를 해결하였다.

마무리

• 점수 순위 보여주는 부분이 작동은 하지만 그냥 점수 순위를 나타내는 것에만 치중해 코드가 지저분한 것 같다. 다른 방법을 추가로 찾아봐야할 것 같다. (유저명을 입력받고 각 유저에 따라 점수를 저장하는 방식으로)

• css를 좀 더 익숙하게 다룰 수 있게 공부를 해야겠다.

• 모듈이나 컴포넌트에 대해 공부하기!