melting snowman

Example heading with h2 size

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Melting Snowman Game</title> <link hreflang="MeltingSnowman"="stylesheet" hreflang="Melting"ef="style.css"> </head> <body> <div class="container"> <h1>Melting Snowman Game</h1> <div class="Melting Snowman">  </div> <div class="word">  </div> <div class="letters">  </div> <div class="message">  </div> </div> <script src="MeltingSnowman.js"></script>

Example heading with h3 size

body {
background-color: #f5f5f5;
}

container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}

container img {
max-width: 100%;
max-height: 100%;
}

MeltingSnowman {
width: 400px;
height: 400px;
border: 2px solid blue;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
}

word {
font-size: 2rem;
margin: 20px;
display: flex;
justify-content: center;
}

letters {
margin: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

letters button {
margin: 5px;
padding: 10px;
font-size: 1.2rem;
border: none;
background-color: blue;
color: #fff;
cursor: pointer;
}

message {
font-size: 1.5rem;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
}
Following is sample Html code
// Define the maximum number of incorrect guesses allowed
const maxWrongGuesses = 6;

let wordToGuess = '';
let guessedLetters = [];
let wrongGuesses = 0;
let imageCount = 1;

// Select random word from the list
function selectRandomWord() {
return words[Math.floor(Math.random() * words.length)];
}

// Initialize the game
function initializeGame() {
wordToGuess = selectRandomWord();
guessedLetters = Array(wordToGuess.length).fill('_');
wrongGuesses = 0;

// Update the word display
updateWordDisplay();

updateMeltingSnowmanGraphic();

// Remove any previously generated buttons
const lettersContainer = document.querySelector('.letters');
while (lettersContainer.firstChild) {
lettersContainer.removeChild(lettersContainer.firstChild);
}

// Generate the letter buttons
for (let i = 0; i < 26; i++) {
const letter = String.fromCharCode(65 + i);
const button = document.createElement('button');
button.innerText = letter;
button.addEventListener('click', function () {
handleGuess(letter);
});
lettersContainer.appendChild(button);
}

// Clear any previous win/lose message
const messageContainer = document.querySelector('.message');
messageContainer.innerText = '';
}

// Update the word display
function updateWordDisplay() {
const wordContainer = document.querySelector('.word');
wordContainer.innerText = guessedLetters.join(' ');
}

// Handle a letter guess
function handleGuess(letter) {
// If the letter has already been guessed, do nothing
if (guessedLetters.includes(letter)) {
return;
}

// Add the letter to the list of guessed letters
guessedLetters.forEach((guessedLetter, index) => {
if (wordToGuess[index] === letter) {
guessedLetters[index] = letter;
}
});

// If the letter is not in the hidden word, increment the wrong guesses count and update the Melting Snowman graphic
if (!wordToGuess.includes(letter)) {
wrongGuesses++;
updateMeltingSnowmanGraphic();
}

// Update the word display
updateWordDisplay();

// Check if the game has been won or lost
checkWinOrLose();
}

// Update the Melting Snowman graphic
function updateMeltingSnowmanGraphic() {
const meltingSnowmanContainer = document.querySelector('.MeltingSnowman');
meltingSnowmanContainer.innerHTML = <img src="images/MeltingSnowman${imageCount}.png" alt="MeltingSnowman ${imageCount}">;
imageCount++;
}

// Check if the game has been won or lost
function checkWinOrLose() {
if (guessedLetters.join('') === wordToGuess) {
const messageContainer = document.querySelector('.message');
messageContainer.innerText = 'You win!';
const letterButtons = document.querySelectorAll('.letters button');
letterButtons.forEach(button => {
button.disabled = true;
button.removeEventListener('click', handleGuess);
});
} else if (wrongGuesses >= maxWrongGuesses) {
const messageContainer = document.querySelector('.message');
messageContainer.innerText = You lose! The word was "${wordToGuess}".;
const meltingSnowmanContainer = document.querySelector('.MeltingSnowman');
meltingSnowmanContainer.innerHTML = <img src="images/gameover.png" alt="gameover">;
const letterButtons = document.querySelectorAll('.letters button');
letterButtons.forEach(button => {
button.disabled = true;
button.removeEventListener('click', handleGuess);
});
}
}

// Initialize the game when the page loads
window.addEventListener('load', initializeGame);