JS. 테트리스에 시간 추가하기

개요

요즘 테트리스를 만들고 있다

어찌저찌 굴러가게는 만들고 있는데,,,,

(...)

 

여튼 시간을 추가하려고 한다 (게임을 수행한 시간)

Time 00:00 <- 이런 식으로 적을거다!!!

// 시계
const time = tetrisWrap.querySelector(".tetris__score .t");

let sec = 0;
let min = 0;

function tick(){
  sec++;
  if(sec > 59){
    min++;
    sec = 0;
  }
}
function add(){
    tick();
    sec > 9 ? sec = sec: sec = "0" + sec;
    time.textContent = `Time ${min}:${sec}`;
    timer();
}


function timer() {
  t = setTimeout(add, 1000);
}

본문

1. 일단 시간을 표시해 줄 기본 뼈대인 html과 let을 가져온다.

min : 분 / sec : 초

const time = tetrisWrap.querySelector(".tetris__score .t");

let min = 0;
let sec = 0;

 

2. 함수를 돌린다.

 

2-1. tick 함수

sec를 1씩 증가 시켜주고,

60초가 되면 sec를 초기화하고 min을 1씩 증가시킨다

function tick(){
  sec++;
  if(sec > 59){
    min++;
    sec = 0;
  }
}

 

2-2. timer 함수

1초에 한 번씩 add함수를 실행시켜 주는 t를 설정해준다

function timer() {
  t = setTimeout(add, 1000);
}

 

2-3. add 함수

자릿 수가 1개가 아니면 그대로 쓰고,

초의 자릿 수가 1개이면 0을 붙여준다

 

즉, 01초 02초 ... 09초 10초 11초 이런식

그리고 timer함수를 실행시키고 또 1초뒤에 자기가 실행되고 이런 식이다 

function add(){
    tick();
    sec > 9 ? sec = sec: sec = "0" + sec;
    time.textContent = `Time ${min}:${sec}`;
    timer();
}

 

3. 게임오버가 됐을 때

타임을 초기화 시켜서 시간이 더이상 흐르지 않도록 해준다

clearTimeout(t);

덧붙이는 말

요즘 리액트를 배우고 있다

리액트에서는 코드를 길게 써야하는지,

탭키 설정을 스페이스바 4칸이 아닌, 2칸으로 설정을 한다

 

그래서 앞으로는 2칸에 적응하려고 한다