Guessing Game version 2 -
Please use the following code structure to create a SECOND version of this classic 'guessing game'. Once you get this to run correctly you will describe the differences between the two renditions (as a developer comment in version 2). See main site for rest of assignment details!
Please use the following coding structure to remake the classic....what improvements can you spot? :)
<h1>Ultimate Number Guessing Game</h1>
<style>
body { font-family: sans-serif; text-align: center; }
.flash { animation: flash 0.4s; }
.shake { animation: shake 0.3s; }
@keyframes flash {
0% { background: #8f8; }
100% { background: white; }
}
@keyframes shake {
0% { transform: translateX(-5px); }
25% { transform: translateX(5px); }
50% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
100% { transform: translateX(0); }
}
</style>
<p>High Score: <span id="highScore">0</span></p>
<button id="startGame">Start Game</button>
<div class="gameArea" style="display:none;">
<p id="timer">Time: 60</p>
<p id="score">Score: 0</p>
<p id="rangeInfo"></p>
<input type="number" id="guessField">
<button id="guessSubmit">Guess</button>
<p class="feedback"></p>
<p class="heat"></p>
</div>
<script>
let minRange = 1;
let maxRange = 100;
let randomNumber;
let guessCount;
let maxGuesses = 7;
let timeLeft;
let timerInterval;
let score = 0;
const startBtn = document.getElementById("startGame");
const gameArea = document.querySelector(".gameArea");
const guessField = document.getElementById("guessField");
const guessSubmit = document.getElementById("guessSubmit");
const feedback = document.querySelector(".feedback");
const heat = document.querySelector(".heat");
const timerDisplay = document.getElementById("timer");
const scoreDisplay = document.getElementById("score");
const highScoreDisplay = document.getElementById("highScore");
const rangeInfo = document.getElementById("rangeInfo");
highScoreDisplay.textContent = localStorage.getItem("highScore") || 0;
startBtn.addEventListener("click", startGame);
guessSubmit.addEventListener("click", checkGuess);
guessField.addEventListener("keydown", e => {
if (e.key === "Enter") checkGuess();
});
function startGame() {
randomNumber = Math.floor(Math.random() * (maxRange - minRange + 1)) + minRange;
guessCount = 0;
timeLeft = 60;
score = 0;
gameArea.style.display = "block";
feedback.textContent = "";
heat.textContent = "";
rangeInfo.textContent = `Guess between ${minRange} and ${maxRange}`;
scoreDisplay.textContent = "Score: 0";
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = "";
guessField.focus();
startTimer();
}
function startTimer() {
clearInterval(timerInterval);
timerDisplay.textContent = "Time: " + timeLeft;
timerInterval = setInterval(() => {
timeLeft--;
timerDisplay.textContent = "Time: " + timeLeft;
if (timeLeft <= 0) endGame(false);
}, 1000);
}
function checkGuess() {
const guess = Number(guessField.value);
if (!guess) return;
guessCount++;
let distance = Math.abs(randomNumber - guess);
updateHeat(distance);
if (guess === randomNumber) {
playSound("win");
feedback.textContent = "Correct!";
feedback.classList.add("flash");
calculateScore();
endGame(true);
} else if (guessCount >= maxGuesses) {
playSound("lose");
feedback.textContent = "Game Over! Number was " + randomNumber;
feedback.classList.add("shake");
endGame(false);
} else {
playSound("wrong");
feedback.textContent = guess < randomNumber ? "Too low!" : "Too high!";
feedback.classList.add("shake");
}
setTimeout(() => {
feedback.classList.remove("flash", "shake");
}, 300);
guessField.value = "";
guessField.focus();
}
function updateHeat(distance) {
if (distance === 0) heat.textContent = " PERFECT!";
else if (distance <= 5) heat.textContent = " Very Hot!";
else if (distance <= 15) heat.textContent = " Warm";
else heat.textContent = "❄️ Cold";
}
function calculateScore() {
score = (maxGuesses - guessCount) * 20 + timeLeft;
scoreDisplay.textContent = "Score: " + score;
let highScore = localStorage.getItem("highScore") || 0;
if (score > highScore) {
localStorage.setItem("highScore", score);
highScoreDisplay.textContent = score;
}
// Adaptive difficulty
if (guessCount <= 3) {
maxRange += 50;
}
}
function endGame(won) {
clearInterval(timerInterval);
guessField.disabled = true;
guessSubmit.disabled = true;
const restartBtn = document.createElement("button");
restartBtn.textContent = "Play Again";
document.body.appendChild(restartBtn);
restartBtn.onclick = () => {
restartBtn.remove();
gameArea.style.display = "none";
};
}
function playSound(type) {
let sound;
if (type === "win") sound = new Audio("https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg");
if (type === "wrong") sound = new Audio("https://actions.google.com/sounds/v1/cartoon/wood_plank_flicks.ogg");
if (type === "lose") sound = new Audio("https://actions.google.com/sounds/v1/cartoon/boing.ogg");
sound.play();
}
</script>