[JS] 바닐라 자바스크립트 타이핑 게임

Typing game with Vanilla Javascript

 

실행화면

첫 실행화면/ 게임종료창

 

레벨, 최고 점수 박스

 

 

 

 

 

---

 

 

기능

 

• 랜덤한 단어 제시
• 선택한 레벨 로컬 스토리지에 저장, 새로고침해도 유지
• 게임 시작버튼 누르면 게임 시작 => 시간 1초씩 줄어듬
• 타이핑한 값이 입력 값과 같을 경우 => 점수 1증가, 레벨에 따른 시간 증가, 새로운 단어 제시, 입력창 비움
• 최고 기록 갱신할 경우 로컬스토리지에 저장

 

const wordSpan = document.querySelector(".word");
const typing = document.getElementById("typing");
const scoreSpan = document.querySelector(".scoreSpan");
const timeSpan = document.querySelector(".timeSpan");
const playBtn = document.querySelector(".playBtn");
const scoreBtn = document.querySelector(".scoreBtn");

const level = document.getElementById("level");
const levelBox = document.querySelector(".level-box");

const levelBtn = document.querySelector(".icon");
const gameOverBox = document.querySelector(".gameOver-box");
const typingBox = document.querySelector(".typing-box");
const scoreBox = document.querySelector(".score-box");
const words = [
...
];

const levelLS = localStorage.getItem("level");

let score = 0;
let time = 10;
let randomWord;
let playable = false;

function makeRandWord() {
  randomWord = words[Math.floor(Math.random() * words.length)];
  wordSpan.innerHTML = randomWord;
}
const scoreLS = localStorage.getItem("score");

function updateValue(e) {
  const levelLS = localStorage.getItem("level");
  console.log(levelLS);
  if (playable) {
    if (e.target.value == randomWord) {
      // score 올려줌
      score++;
      scoreSpan.innerHTML = `SCORE: ${score}`;

      if (scoreLS < score) {
        localStorage.setItem("score", score);
      }

      // left time 올려줌
      if (levelLS == "easy") {
        time += 4;
      } else if (levelLS == "medium") {
        time += 2;
      } else {
        time += 1;
      }

      // 창 안 비워줌
      typing.value = "";

      makeRandWord();
    }
  }
}

function handleLevel() {
  const selectedLevel = level.options[level.selectedIndex].value;

  localStorage.setItem("level", selectedLevel);
}

function gameEnd() {
  typingBox.style.display = "none";
  gameOverBox.style.display = "flex";
  gameOverBox.innerHTML = `
    <p>GAME OVER</p>
    <p>Final Score: ${score}</p>
    <button class="replayBtn" onclick="location.reload()">BACK</p>
  `;
}

function countDown(e) {
  playable = true;
  typing.value = "";
  playBtn.style.display = "none";
  levelBtn.style.display = "none";
  scoreBtn.style.display = "none";
  const timer = setInterval(() => {
    time--;
    timeSpan.innerHTML = `<i class="far fa-clock"></i>${time}s`;
    if (time == 0) {
      clearInterval(timer);
      gameEnd();
    }
    if (time < 4) {
      timeSpan.style.color = "red";
    }
  }, 1000);
}

function showScoreBox() {
  scoreBox.classList.toggle("up");
  levelBox.classList.add("up");
  scoreBox.innerHTML = "";

  const bestScore = localStorage.getItem("score");
  if (bestScore === null) {
    scoreBox.innerHTML = `BEST SCORE: 0`;
  } else {
    scoreBox.innerHTML = `BEST SCORE: ${bestScore}`;
  }
}

function setting() {
  if (levelLS) {
    const option = document.querySelector(`option[value="${levelLS}"]`);
    option.selected = true;
  }
  makeRandWord();
  handleLevel();
  gameOverBox.innerHTML = "";
  gameOverBox.style.display = "none";
}

playBtn.addEventListener("click", countDown);
typing.addEventListener("input", updateValue);
level.addEventListener("change", handleLevel);
scoreBtn.addEventListener("click", showScoreBox);
levelBtn.addEventListener("click", function () {
  levelBox.classList.toggle("up");
  scoreBox.classList.add("up");
});

document.addEventListener(
  "keydown",
  function (event) {
    if (event.keyCode === 13) {
      event.preventDefault();
    }
  },
  true
);

setting();

 

 

setInterval 함수: 일정한 시간 간격으로 작업을 수행. clearInterval함수로 중지한다.

 

위의 함수를 적절히 활용해볼 수 있는 미니 프로젝트였다. setInterval함수를 통해 1초마다 시간을 줄게 하고 시간이 0이 되었을 때 clearInterval함수를 호출하여 중지시켰다.