JavaScript Five Lives Game
Tags: beginners, javascript, programming, tutorial
Published: 2024-05-21 23:33:03

**Intro:** This is a small game created with JavaScript. It's like the Hangman word game where you guess the letters till you get the full word. After you've guessed the word correctly, a picture of the word appears. You have nine lives and each time a wrong letter is guessed you lose a life. 
This is for complete beginners as I have commented on each line of code to tell you what it does. Please let me know if I have made mistakes and feel free to copy and tweak this game to your liking.  

**Watch Demo Here:** [https://youtube.com/shorts/hsW7Xz7Pg9c?feature=share](https://youtube.com/shorts/hsW7Xz7Pg9c?feature=share)

**Note:** You can use your pictures for the game images. I used [https://spellai.art/](https://spellai.art/) to get my pictures. Always put the full file path to your pictures just in case.

**Tip:** There are mostly five-letter words in this game but you can add seven six or eight-letter words etc... if you want and put your pictures for these words. Also, you can remove the input box and the button completely and leave the letter buttons there if that's what you want.

The first code block is HTML, the second is CSS, and the third is JavaScript.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Five Lives Game</title>
    <link rel="stylesheet" href="five_lives.css">
</head>
<body>
    <div class="game-container">
        <h1>Five Lives Game</h1>
		<div class="result" id="result"></div>
        <div class="image-container">
            <img id="result-image" src="" alt="Result Image" style="display: none;">
        </div>
        <div class="clue" id="clue">?????</div>
        <div class="lives" id="lives">Lives left: <span class="heart">❤❤❤❤❤</span></div>
        <div class="alphabet" id="alphabet"></div>
        <div class="input-container">
            <input type="text" id="guess-input" placeholder="Guess a letter">
            <button onclick="makeGuess()">Guess</button>
        </div>
    </div>

    <script src="five_lives.js"></script>
</body>
</html>
```

```
body {
    font-family: Arial, sans-serif;
	color: #00413f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #fff;
	text-align: center;
}

.game-container {
    text-align: center;
    background: #e1f6ff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.clue, .lives{
    font-size: 24px;
    margin: 20px 0;
}

.heart {
    color: red;
    font-size: 30px;
}

.alphabet {
    margin: 20px 0;
	background: #b9ebff;
}

.alphabet span {
	display: inline-block;
    padding: 5px;
    margin: 2px;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 4px;
}

.alphabet .guessed {
    background-color: grey;
    color: white;
    cursor: not-allowed;
}

.input-container {
    margin: 20px 0;
}

.input-container input {
    padding: 10px;
    font-size: 16px;
    width: 200px;
    margin-right: 10px;
}

.input-container button {
    padding: 10px;
    font-size: 16px;
	background-color: #b9ebff;
}

.result {
    font-size: 24px;
    margin: 20px 0;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;

	 
}

.image-container img {
    max-width: 100%;
    height: 400px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
```

```javascript
//five_lives.js
//create an array of words
const words = ['dragon','pizza','fairy','night', 'shirt', 'otter', 'plane'] ;
//choose a word in the words array and place it in the secretWord variable
const secretWord = words[Math.floor(Math.random() * words.length)];
//an array is created and filled with as many ? as the letters in secretWord
let clue = Array(secretWord.length).fill('?');
//variable lives gets integer 5
let lives = 5;
//variable guessedWordCorrectly gets a boolean value - false
let guessedWordCorrectly = false;
//variable guessedLetters gets a Set()
let guessedLetters = new Set();

//variable alphabetContainer gets alphabet div
const alphabetContainer = document.getElementById('alphabet');
//variable alphabet gets a string of letters from a to z
const alphabet = 'abcdefghijklmnopqrstuvwxyz';

//Splits the alphabet string into individual letters.
//Iterates over each letter, creating a <span> element for each one.
//Sets the text content of the <span> to the letter.
//Assigns a unique id to each <span> using the letter.
//Adds an onclick event handler to each <span> that calls the makeGuess function with the corresponding letter.
//Appends each <span> to the alphabetContainer.
alphabet.split('').forEach(letter => {
    const span = document.createElement('span');
    span.textContent = letter;
    span.id = `letter-${letter}`;
    span.onclick = () => makeGuess(letter);
    alphabetContainer.appendChild(span);
});

//create a function called updateClue that takes one parameter - guessedLetter
function updateClue(guessedLetter) {
	//loop through the letters in secretWord
    for (let i = 0; i < secretWord.length; i++) {
		//if the value of guessedLetter is equal to any of the letters in secretWords
        if (guessedLetter === secretWord[i]) {
			//then replace a ? in clue with the guessedLetter value
            clue[i] = guessedLetter;
        }
    }
}

//create a function called makeGUess with one parameter - input
function makeGuess(input) {
	//guessInput gets an html element id 
    const guessInput = document.getElementById('guess-input');
	//checks the type of input that the user enters and if it's a string,
	//guess is set to input, If input is not a string, guess is set to the value 
	//from the input field (guessInput.value) and converted to lowercase.
    const guess = (typeof input === 'string') ? input : guessInput.value.toLowerCase();
	//set the value of guessInput to an empty string
    guessInput.value = '';
	
	//if the Set guessedLetters has the value of guess 
    if (guessedLetters.has(guess)) {
		//then call this function
        showModal();
		//stop function
        return;
    }
	//add the value of guess to the set guessedLetters
    guessedLetters.add(guess);
	//The line `document.getElementById(`letter-${guess}`).classList.add('guessed')` 
	//selects the HTML element with an `id` corresponding to the guessed letter 
	//(e.g., `letter-a` for the guess 'a'). It then adds the CSS class 'guessed' 
	//to this element, typically to change its appearance and indicate it has been guessed.
    document.getElementById(`letter-${guess}`).classList.add('guessed');

	//if the value of guess is equal to secretWord
    if (guess === secretWord) {
		//the value if guessedWordCorrectly changes to tru
        guessedWordCorrectly = true;
	//if the amount of letters in guess is equal to 1 and the value of
	//secretWord which is an array has the value of guess
	//basically if the user made a guess and its in the secretWord array
    } else if (guess.length === 1 && secretWord.includes(guess)) {
		//call updateClue function with guess as its argument
        updateClue(guess);
	//if the amount of letters in guess is equal to one
	//basically if the user made a guess
    } else if (guess.length === 1) {
		//minus one from the value of guess
        lives--;
    }
	//if ? is not in clue
    if (!clue.includes('?')) {
		//the value of guessedWordCorrectly is now true
        guessedWordCorrectly = true;
    }
	//call the function updateDisplay
    updateDisplay();
	//call the function checkGameStatus()
    checkGameStatus();
}

//create a function updateDisplay
function updateDisplay() {
	//join the items in clue together to form a string and put it in the html element clue
    document.getElementById('clue').textContent = clue.join('');
	//updates the content of an HTML element with id lives to show a message "Lives left:"
	//followed by a heart symbol repeated for the number of lives left.
    document.getElementById('lives').innerHTML = 'Lives left: ' + '<span class="heart">'.repeat(lives) + '❤'.repeat(lives) + '</span>'.repeat(lives);
}

//create checkGameStatus function
function checkGameStatus() {
	//variable result gets an html element id result
    const result = document.getElementById('result');
	//variable result gets an html element id resultImage
    const resultImage = document.getElementById('result-image');
	//if guessedWordCorrectly is true
    if (guessedWordCorrectly) {
		//display this text in result
        result.textContent = 'You won! The secret word was ' + secretWord + '!';
		//display an image 
        resultImage.src = `C:/Users/petix/OneDrive/Desktop/my_javascript_games/nine_lives/${secretWord}.png`;  // Ensure images are named according to words
		//style the image
        resultImage.style.display = 'block';
		//call disableInput() function
        disableInput();
	  //if lives is less than or equal to zero
    } else if (lives <= 0) {
		//display this in the result html element 
        result.textContent = 'You lost! The secret word was ' + secretWord;
		//call disableInput() function
        disableInput();
    }
}

//create disabledInput() funtion
function disableInput() {
	//diasble the input html element
    document.getElementById('guess-input').disabled = true;
	//disable the button
    document.querySelector('.input-container button').disabled = true;
	//disable the letter buttons
    alphabetContainer.querySelectorAll('span').forEach(span => {
        span.onclick = null;
    });
}


// Add an event listener to the input field to detect Enter key presses
document.getElementById('guess-input').addEventListener('keydown', function(event) {
	//if the user presses the "enter" key
    if (event.key === 'Enter') {
		//call makeGUess() function
        makeGuess();
    }
});

//call updateDisplay() function
updateDisplay();
```