Welcome to yet another exciting tutorial by Coding Artist. Building projects is one of the best ways to learn JavaScript. So in today’s tutorial let us expand our javascript knowledge with a fun and easy-to-build project called – Guess the movie with emojis. To build this project we need HTML, CSS, and Javascript.
Video Tutorial:
For a better understanding of how we built the functionality of this project, I would advise you to watch the video below. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Guess The Movie’. Inside this folder, we have three files. These files are index.html, style.css, and script.js.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="num-of-tries-left" id="chanceCount">
<span>Tries Left:</span>05
</div>
<div class="container"></div>
<div id="letter-container" class="hide"></div>
<div id="userInputSection"></div>
</div>
<div class="controls-container">
<p id="result"></p>
<a id="start">Start</a>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
padding: 0;
margin: 0;
height: 100vh;
background: linear-gradient(#9d7cff, #8254fd);
}
.wrapper {
width: 90%;
max-width: 500px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
background-color: #ffffff;
padding: 5em 3em;
border-radius: 0.8em;
}
.num-of-tries-left {
text-align: right;
margin-bottom: 2em;
}
.num-of-tries-left span {
font-weight: 600;
}
.container {
font-size: 1.87em;
display: flex;
justify-content: space-around;
}
#letter-container {
margin: 2em 0 3em 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.letters {
width: 2em;
height: 2em;
background-color: #ffffff;
border: 2px solid #8254fd;
border-radius: 0.3em;
color: #8254fd;
cursor: pointer;
}
#userInputSection {
display: flex;
justify-content: center;
gap: 0.5em;
}
.controls-container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: linear-gradient(#9d7cff, #8254fd);
height: 100vh;
width: 100vw;
top: 0;
left: 0;
}
#start {
background-color: #ffffff;
font-size: 1.4em;
padding: 0.8em 2em;
border-radius: 0.3em;
box-shadow: 0 10px #000000;
cursor: pointer;
transition: 0.1s;
}
#start:active {
box-shadow: 0 0 #000000;
transform: translateY(7px);
}
.hide {
display: none;
}
.used {
background-color: #f5f5f5;
border-color: #9e9ea6;
color: #9e9ea6;
}
Javascript:
Finally, we add functionality to the game using Javascript. Once again copy the code below and paste it into your script file. You can add as many hints and movie names as you like to the ‘moviesObject’ to make the game even more fun.
The steps included in creating this game are:
- Create Initial References to HTML elements, ‘startGame()’ and ‘stopGame()’ functions to hide/display the start screen
- Initial setup- this includes setting variables to the initial state and clearing all inputs, and sections.
- Generate a random hint from the object: A random hint would be picked up from the object and displayed in the div. Then the movie name will be displayed in the form of underscores ‘_’
- Create on-screen input buttons for letters: We use the ASCII values of each letter to generate buttons. For each button click we check whether the clicked letter exists in the movie name. If it does, we replace the underscore with the letter else, the user loses a chance (out of 5 chances).
- Finally, we implement a blocker function to block all the buttons after the user has lost the game.
const moviesObject = {
"👸👹🌹": "Beauty And The Beast",
"🧙👓⚡": "Harry Potter",
"🦇🃏 ": "Joker",
"👩❤️👨🚢🥶": "Titanic",
"👻👻🔫": "Ghostbusters",
"🐜👨 ": "Antman",
"🐀👨🍳 ": "Ratatouille",
"🖊️📓👩❤️👨": "The notebook",
"😈👗👠": "Devil Wears Prada",
"📱🍎 ": "Jobs",
"🎉🍺🎊❎": "This Is the End",
"🔍🐟 ": "Finding Nemo",
"👸📔 ": "Princess Diaries",
"🐔🏃 ": "Chicken Run",
};
const container = document.querySelector(".container");
const controls = document.querySelector(".controls-container");
const startButton = document.getElementById("start");
const letterContainer = document.getElementById("letter-container");
const userInputSection = document.getElementById("userInputSection");
const resultText = document.getElementById("result");
const hints = Object.keys(moviesObject);
let randomHint = "",
randomWord = "";
let winCount = 0,
lossCount = 5;
const generateRandomValue = (array) => Math.floor(Math.random() * array.length);
//Blocker
const blocker = () => {
let letterButtons = document.querySelectorAll(".letters");
letterButtons.forEach((button) => {
button.disabled = true;
});
stopGame();
};
//Start game
startButton.addEventListener("click", () => {
//Controls and buttons visibility
controls.classList.add("hide");
init();
});
//Stop Game
const stopGame = () => {
controls.classList.remove("hide");
};
//Generate Word
const generateWord = () => {
letterContainer.classList.remove("hide");
userInputSection.innerText = "";
randomHint = hints[generateRandomValue(hints)];
randomWord = moviesObject[randomHint];
container.innerHTML = `<div id="movieHint">${randomHint}</div>`;
let displayItem = "";
randomWord.split("").forEach((value) => {
if (value == " ") {
winCount += 1;
displayItem += `<span class="inputSpace"> </span>`;
} else {
displayItem += `<span class="inputSpace">_</span>`;
}
});
userInputSection.innerHTML = displayItem;
};
//Initial Function
const init = () => {
winCount = 0;
lossCount = 5;
document.getElementById(
"chanceCount"
).innerHTML = `<span>Tries Left:</span>${lossCount}`;
randomHint = null;
randomWord = "";
userInputSection.innerHTML = "";
letterContainer.classList.add("hide");
letterContainer.innerHTML = "";
generateWord();
for (let i = 65; i < 91; i++) {
let button = document.createElement("button");
button.classList.add("letters");
//Number to ASCII [A - Z]
button.innerText = String.fromCharCode(i);
//Character button click
button.addEventListener("click", () => {
let charArray = randomWord.toUpperCase().split("");
let inputSpace = document.getElementsByClassName("inputSpace");
if (charArray.includes(button.innerText)) {
charArray.forEach((char, index) => {
if (char === button.innerText) {
button.classList.add("used");
inputSpace[index].innerText = char;
winCount += 1;
if (winCount == charArray.length) {
resultText.innerHTML = "You Won";
blocker();
}
}
});
} else {
lossCount -= 1;
document.getElementById(
"chanceCount"
).innerHTML = `<span>Tries Left:</span> ${lossCount}`;
button.classList.add("used");
if (lossCount == 0) {
resultText.innerHTML = "Game Over";
blocker();
}
}
button.disabled = true;
});
letterContainer.appendChild(button);
}
};
window.onload = () => {
init();
};
Go ahead and customize the project the way you like. If you have any queries, suggestions, or feedback comment below. Download the source code by clicking on the ‘Download Code’ button below.
lijnm