As a father of 8yo twin daughters and a 3yo son, they often come bursting into my office midway through me concentrating on whatever it is I’m tinkering with. Recently they’ve started asking what I’m actually doing, and what ‘work’ actually is – I decided that for the twins at least, I should probably start to teach them some ‘stuff’. They love playing Hangman and Tic-Tac-Toe on their drawing pads, so this seemed like a pretty good place to start. HTML seemed like a no brainer too.
First off we opened a text editor (I use Sublime, but Notepad, whatever), and create a new document.
Next up I got her to write out her fist few lines of ‘code’ (leave it out haters – it is code);
<!DOCTYPE html>
<html lang="en">
</html>We then saved the file as index.html, and her first HTML file was born!
Obviously her face was less than impressed when we opened it and she saw… NOTHING!
Time to actually make it do something;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazing Hangman Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>Twin 1's Game of Hangman</h1>
</body>
</html>Yup all that typing kiddo and all you can see is a few words – welcome to the real world;
Next we’ll write out the script for actually playing the game before we add it to our HTML page;
<script>
const words = ["mummy", "daddy", "developer", "coding", "sister", "brother", "dinner", "zebra", "elephant", "camel"];
let selectedWord = words[Math.floor(Math.random() * words.length)];
let guessedLetters = new Set();
let wrongGuesses = new Set();
function displayWord() {
let display = selectedWord.split('').map(letter => guessedLetters.has(letter) ? letter : '_').join(' ');
document.getElementById("wordDisplay").innerText = display;
}
function checkGuess(letter) {
if (selectedWord.includes(letter)) {
guessedLetters.add(letter);
} else {
wrongGuesses.add(letter);
document.getElementById("wrongGuesses").innerText = "Wrong Guesses: " + [...wrongGuesses].join(', ');
}
updateGameStatus();
}
function updateGameStatus() {
if (selectedWord.split('').every(letter => guessedLetters.has(letter))) {
document.getElementById("result").innerText = "Congratulations! You won!";
disableKeyboard();
} else if (wrongGuesses.size >= 8) {
document.getElementById("result").innerText = "Game Over! The word was: " + selectedWord;
disableKeyboard();
}
displayWord();
}
function disableKeyboard() {
document.querySelectorAll('#keyboard button').forEach(button => button.disabled = true);
}
function createKeyboard() {
const keyboardDiv = document.getElementById("keyboard");
keyboardDiv.innerHTML = '';
for (let i = 97; i <= 122; i++) {
let letter = String.fromCharCode(i);
let button = document.createElement("button");
button.innerText = letter;
button.onclick = () => { checkGuess(letter); button.disabled = true; };
keyboardDiv.appendChild(button);
}
}
function resetGame() {
selectedWord = words[Math.floor(Math.random() * words.length)];
guessedLetters.clear();
wrongGuesses.clear();
document.getElementById("wrongGuesses").innerText = "Wrong Guesses: ";
document.getElementById("result").innerText = "";
createKeyboard();
displayWord();
}
createKeyboard();
displayWord();
</script>I didn’t want to make this too hard, so as you can see above we’ve given it a list of words to choose from, mainly because i didn’t want to overcomplicate it for her, but also I want some control over the words it wants her to guess. We can change them out or add more pretty easily, so seemed sensible.
Next up we need to create a couple more styles in the HTML page, and start to organise the components – should be pretty easy now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazing Hangman Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
#wordDisplay {
font-size: 36px;
letter-spacing: 5px;
margin: 20px;
}
#wrongGuesses {
color: red;
font-size: 28px;
}
#keyboard button {
margin: 5px;
padding: 10px;
font-size: 28px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Twin 1's Game of Hangman</h1>
<p id="wordDisplay"></p>
<p id="wrongGuesses">Wrong Guesses: </p>
<div id="keyboard"></div>
<p id="result"></p>
<button onclick="resetGame()">Restart</button>
</body>
</html>Now we just need to add in the script we made earlier and save it…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazing Hangman Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
#wordDisplay {
font-size: 36px;
letter-spacing: 5px;
margin: 20px;
}
#wrongGuesses {
color: red;
font-size: 28px;
}
#keyboard button {
margin: 5px;
padding: 10px;
font-size: 28px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Twin 1's Game of Hangman</h1>
<p id="wordDisplay"></p>
<p id="wrongGuesses">Wrong Guesses: </p>
<div id="keyboard"></div>
<p id="result"></p>
<button onclick="resetGame()">Restart</button>
<script>
const words = ["mummy", "daddy", "developer", "coding", "sister", "brother", "dinner", "zebra", "elephant", "camel"];
let selectedWord = words[Math.floor(Math.random() * words.length)];
let guessedLetters = new Set();
let wrongGuesses = new Set();
function displayWord() {
let display = selectedWord.split('').map(letter => guessedLetters.has(letter) ? letter : '_').join(' ');
document.getElementById("wordDisplay").innerText = display;
}
function checkGuess(letter) {
if (selectedWord.includes(letter)) {
guessedLetters.add(letter);
} else {
wrongGuesses.add(letter);
document.getElementById("wrongGuesses").innerText = "Wrong Guesses: " + [...wrongGuesses].join(', ');
}
updateGameStatus();
}
function updateGameStatus() {
if (selectedWord.split('').every(letter => guessedLetters.has(letter))) {
document.getElementById("result").innerText = "Congratulations! You won!";
disableKeyboard();
} else if (wrongGuesses.size >= 8) {
document.getElementById("result").innerText = "Game Over! The word was: " + selectedWord;
disableKeyboard();
}
displayWord();
}
function disableKeyboard() {
document.querySelectorAll('#keyboard button').forEach(button => button.disabled = true);
}
function createKeyboard() {
const keyboardDiv = document.getElementById("keyboard");
keyboardDiv.innerHTML = '';
for (let i = 97; i <= 122; i++) {
let letter = String.fromCharCode(i);
let button = document.createElement("button");
button.innerText = letter;
button.onclick = () => { checkGuess(letter); button.disabled = true; };
keyboardDiv.appendChild(button);
}
}
function resetGame() {
selectedWord = words[Math.floor(Math.random() * words.length)];
guessedLetters.clear();
wrongGuesses.clear();
document.getElementById("wrongGuesses").innerText = "Wrong Guesses: ";
document.getElementById("result").innerText = "";
createKeyboard();
displayWord();
}
createKeyboard();
displayWord();
</script>
</body>
</html>
And TADA, she’s now a game developer!
Twin 1’s Game of Hangman
_ _ _ _ _
Wrong Guesses: