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
Note: You can use your pictures for the game images. I used 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.
<!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;
}
//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();
Top comments (2)
You can syntax-highlight your code blocks here by putting the language immeditately after the three backticks (same line), i.e. html, css and js in your cases.
Okay, thankyou so much.