<div class="main-box">
  <select>
    <option value="easy">Легко</option>
    <option value="medium">Средне</option>
    <option value="hard">Сложно</option>
  </select>

  <h3 class="word"></h3>

  <input type="text" autocomplete="off" placeholder="Введите слово">

  <p class="time-box">Осталось времени: <span class="time">10 с</span></p>

  <p class="score-box">Очки: <span class="score">0</span></p>
</div>

<div class="game-over"></div>
body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: helvetica;
  color: #222;
}

.main-box {
  text-align: center;
}

h3 {
  margin: 0.5em;
  font-size: 2em;
  text-shadow: 1px 1px #ddd;
  text-transform: uppercase;
}

select,
input {
  margin: 1em;
  padding: 0.4em;
  width: 100px;
  height: 30px;
  border: none;
  border-radius: 5px;
  font-size: 0.9em;
  text-align: center;
}

input {
  width: 200px;
}

.game-over {
  text-align: center;
  display: none;
}

button {
  padding: 0.6em 1em;
  border: none;
  border-radius: 3px;
  background: linear-gradient(lightgreen, darkgreen);
  box-shadow: 0 1px 1px #666;
  font-size: 0.9em;
  cursor: pointer;
  transition: 0.2s;
}

button:hover {
  color: #ddd;
}
const word = document.querySelector(".word");
const input = document.querySelector("input");
const scoreEl = document.querySelector(".score");
const timeEl = document.querySelector(".time");
const mainEl = document.querySelector(".main-box");
const gameOverEl = document.querySelector(".game-over");
const difficultyEl = document.querySelector("select");

const words = [
  "звукорежиссер",
  "птицефабрика",
  "лесозаготовки",
  "хлебозавод",
  "газобаллон",
  "теплоотдача",
  "кораблекрушение",
  "кинотеатр",
  "формотворчество",
  "нефтепромышленность",
  "мировоззрение",
  "овощехранилище",
  "пассажиропоток",
  "жирозаменитель",
  "сухофрукты",
  "быстродействие",
  "первоисточник",
  "главнокомандующий"
];

let randomWord;

let score = 0;

let time = 10;

let difficulty =
  localStorage.getItem("difficulty") !== null
    ? localStorage.getItem("difficulty")
    : "medium";

difficultyEl.value =
  localStorage.getItem("difficulty") !== null
    ? localStorage.getItem("difficulty")
    : "medium";

input.focus();

const timer = setInterval(updateTime, 1000);

function getRandomWord() {
  return words[Math.floor(Math.random() * words.length)];
}

function addWordToDOM() {
  randomWord = getRandomWord();
  word.innerHTML = randomWord;
}

function updateScore() {
  score++;
  scoreEl.innerHTML = score;
}

function updateTime() {
  time--;
  timeEl.textContent = time + " c";

  if (time === 0) {
    clearInterval(timer);

    gameOver();
  }
}

function gameOver() {
  gameOverEl.innerHTML = `
<h3>Время вышло!</h3>
<p>Ваш результат: ${score}</p>
<button onclick="location.reload()">Заново</button>
`;
  mainEl.style.display = "none";
  gameOverEl.style.display = "block";
}

addWordToDOM();

input.addEventListener("input", () => {
  const text = input.value;

  if (text === randomWord) {
    addWordToDOM();
    updateScore();

    input.value = "";

    if (difficulty === "hard") {
      time += 2;
    } else if (difficulty === "medium") {
      time += 3;
    } else {
      time += 5;
    }

    updateTime();
  }
});

difficultyEl.addEventListener("change", (e) => {
  difficulty = e.target.value;
  localStorage.setItem("difficulty", difficulty);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.