! Сегодня

Главная » Web и Технологии » Javascript игра «Угадай число»

Javascript игра «Угадай число»

Отдельные товарищи пологают, что при капитализме будет процветание. Будет, но лишь для кучки буржуев и их лакеев. И.В.Сталин

13-ноября-2023, 21:53   14   0

Javascript игра «Угадай число»

В этом уроке мы рассмотрим, как создать игру «Угадай число». Для создания этого проекта нам нужны HTML, CSS и jаvascript. 

HTML:

Начнем с HTML-кода. Скопируйте приведенный ниже код и вставьте его в свой HTML-документ.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Guess The Number Game</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div id="game">
        <h3>
          I am thinking of a number between 1-100.<br />
          Can you guess it?
        </h3>
        <div class="input-wrapper">
          <input type="number" placeholder="00" id="guess" />
          <button id="check-btn">Guess</button>
        </div>
        <p id="no-of-guesses">No. Of Guesses: 0</p>
        <p id="guessed-nums">Guessed Numbers are: None</p>
      </div>
      <button id="restart">Restart</button>
      <div class="result">
        <div id="hint"></div>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Далее мы стилизуем нашу игру с помощью CSS. Для этого скопируйте код, предоставленный вам ниже, и вставьте его в свою таблицу стилей.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #3c6fff;
}
.container {
  width: min(90%, 31.25em);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: #ffffff;
  padding: 4em 2em;
  border-radius: 0.5em;
  box-shadow: -1.5em -1.5em #202020;
  text-align: center;
}
h3 {
  font-size: 1.2em;
  font-weight: 500;
  line-height: 2em;
  color: #303030;
}
.input-wrapper {
  width: 70%;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1em;
  margin: 3em auto 1.5em auto;
}
input[type="number"] {
  width: 100%;
  padding: 1em;
  font-size: 1.2em;
  text-align: center;
  border: 2px solid #adaeae;
  border-radius: 0.3em;
  outline: none;
  appearance: text-field;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]:focus {
  border-color: #3c6fff;
}
button {
  font-size: 1em;
  background-color: #3c6fff;
  color: #ffffff;
  border: none;
  outline: none;
  border-radius: 0.5em;
  font-weight: 500;
  cursor: pointer;
}
#restart {
  margin: 0 auto 0 auto;
  padding: 0.8em 1em;
  display: none;
}
.result {
  margin-top: 1em;
}
p {
  font-size: 1em;
  font-weight: 400;
  color: #565b70;
  word-break: break-all;
}
.error,
.success {
  padding: 0.5em 0;
  border-radius: 0.3em;
  margin-bottom: 1em;
  animation: pop 0.4s forwards;
  transform: scale(0);
}
.error {
  background-color: #ffcbcb;
  color: #ff3e3e;
}
.success {
  background-color: #b9ffd5;
  color: #05c451;
}
@keyframes pop {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

jаvascript:

Наконец, мы добавляем функциональность с помощью jаvascript. Cкопируйте приведенный ниже код и вставьте его в файл сценария.

Во-первых, мы начнем со ссылок на элементы HTML. Когда окно загружается, мы вызываем функцию «init», которая устанавливает случайное число и инициализирует счетчик количества догадок и массив для хранения догадок, которые затем отображаются на нашей веб-странице. Когда пользователь нажимает кнопку проверки или если пользователь нажимает клавишу «Ввод», мы вызываем функцию «воспроизведение», которая сначала проверяет недопустимый ввод, затем добавляет предположение в массив догадок и увеличивает счетчик предположений. Далее мы проверяем, равна ли догадка пользователя ответу или нет. Если нет, мы проверяем, является ли предположение высоким или низким, и отображаем соответствующее сообщение с количеством предположений и предположением. Если ответ аналогичен решению, мы отображаем сообщение о победе и прекращаем выполнение. Наконец, мы определяем функцию для кнопки «Перезапустить», позволяющую перезапустить игру.

const hint = document.getElementById("hint");
const noOfGuessesRef = document.getElementById("no-of-guesses");
const guessedNumsRef = document.getElementById("guessed-nums");
const restartButton = document.getElementById("restart");
const game = document.getElementById("game");
const guessInput = document.getElementById("guess");
const checkButton = document.getElementById("check-btn");

let answer, noOfGuesses, guessedNumsArr;

const play = () => {
  const userGuess = guessInput.value;
  if (userGuess < 1 || userGuess > 100 || isNaN(userGuess)) {
    alert("Please enter a valid number between 1 and 100.");
    return;
  }
  guessedNumsArr.push(userGuess);
  noOfGuesses += 1;
  if (userGuess != answer) {
    if (userGuess < answer) {
      hint.innerHTML = "Too low. Try Again!";
    } else {
      hint.innerHTML = "Too high. Try Again!";
    }
    noOfGuessesRef.innerHTML = `<span>No. Of Guesses:</span> ${noOfGuesses}`;
    guessedNumsRef.innerHTML = `<span>Guessed Numbers are: </span>${guessedNumsArr.join(
      ","
    )}`;
    hint.classList.remove("error");
    setTimeout(() => {
      hint.classList.add("error");
    }, 10);
  } else {
    hint.innerHTML = `Congratulations!<br>The number was <span>${answer}</span>.<br>You guessed the number in <span>${noOfGuesses} </span>tries.`;
    hint.classList.add("success");
    game.style.display = "none";
    restartButton.style.display = "block";
  }
};

const init = () => {
  console.log("Game Started");
  answer = Math.floor(Math.random() * 100) + 1;
  console.log(answer);
  noOfGuesses = 0;
  guessedNumsArr = [];
  noOfGuessesRef.innerHTML = "No. Of Guesses: 0";
  guessedNumsRef.innerHTML = "Guessed Numbers are: None";
  guessInput.value = "";
  hint.classList.remove("success", "error");
};

guessInput.addEventListener("keydown", (event) => {
  if (event.keyCode === 13) {
    event.preventDefault();
    play();
  }
});

restartButton.addEventListener("click", () => {
  game.style.display = "grid";
  restartButton.style.display = "none";
  hint.innerHTML = "";
  hint.classList.remove("success");
  init();
});

checkButton.addEventListener("click", play);
window.addEventListener("load", init);

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Спутник земли ?

Редакторы выбирают

Web и Технологии