Are you looking for a fun and engaging way to learn JavaScript? Creating games is a great way to learn the language and gain experience with programming concepts such as logic, algorithms, and problem-solving skills.
In this blog post, I will share the 10 Easy to Build JavaScript Games for Beginners. Each game on this list is simple but challenging enough to help you learn new JavaScript concepts. So, whether you’re a beginner or an experienced developer, learning to code games with JavaScript is a rewarding experience.
To make your learning process easier, each game is built with HTML, CSS, and vanilla JavaScript which means no external libraries or frameworks are used. I’ve also provided the source code and a video tutorial for all the games on this list.
You can easily reference these resources for guidance if you encounter any problems. So, let’s not waste more time and dive right into the game list!
1. Memory Card Game
Memory Card is a beginner-friendly game that you can create using HTML, CSS, and JavaScript. In this game, 16 cards are placed randomly on the screen, and each pair of cards has the same image. The objective of the game is to find all the matching pairs by clicking on the cards.
There’s no time limit to finding the matching cards, so players can take their time and focus on improving their memory. Creating this game is a great way to practice different JavaScript concepts, including event listeners, loops, arrays, and others.
Source Code
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Memory Card Game in JavaScript | InsightsHub</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<ul class="cards">
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #6563FF;
}
.wrapper{
padding: 25px;
border-radius: 10px;
background: #F8F8F8;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cards, .card, .view{
display: flex;
align-items: center;
justify-content: center;
}
.cards{
height: 400px;
width: 400px;
flex-wrap: wrap;
justify-content: space-between;
}
.cards .card{
cursor: pointer;
list-style: none;
user-select: none;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
height: calc(100% / 4 - 10px);
width: calc(100% / 4 - 10px);
}
.card.shake{
animation: shake 0.35s ease-in-out;
}
@keyframes shake {
0%, 100%{
transform: translateX(0);
}
20%{
transform: translateX(-13px);
}
40%{
transform: translateX(13px);
}
60%{
transform: translateX(-8px);
}
80%{
transform: translateX(8px);
}
}
.card .view{
width: 100%;
height: 100%;
position: absolute;
border-radius: 7px;
background: #fff;
pointer-events: none;
backface-visibility: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: transform 0.25s linear;
}
.card .front-view img{
width: 19px;
}
.card .back-view img{
max-width: 45px;
}
.card .back-view{
transform: rotateY(-180deg);
}
.card.flip .back-view{
transform: rotateY(0);
}
.card.flip .front-view{
transform: rotateY(180deg);
}
@media screen and (max-width: 700px) {
.cards{
height: 350px;
width: 350px;
}
.card .front-view img{
width: 17px;
}
.card .back-view img{
max-width: 40px;
}
}
@media screen and (max-width: 530px) {
.cards{
height: 300px;
width: 300px;
}
.card .front-view img{
width: 15px;
}
.card .back-view img{
max-width: 35px;
}
}script.js
const cards = document.querySelectorAll(".card");
let matched = 0;
let cardOne, cardTwo;
let disableDeck = false;
function flipCard({target: clickedCard}) {
if(cardOne !== clickedCard && !disableDeck) {
clickedCard.classList.add("flip");
if(!cardOne) {
return cardOne = clickedCard;
}
cardTwo = clickedCard;
disableDeck = true;
let cardOneImg = cardOne.querySelector(".back-view img").src,
cardTwoImg = cardTwo.querySelector(".back-view img").src;
matchCards(cardOneImg, cardTwoImg);
}
}
function matchCards(img1, img2) {
if(img1 === img2) {
matched++;
if(matched == 8) {
setTimeout(() => {
return shuffleCard();
}, 1000);
}
cardOne.removeEventListener("click", flipCard);
cardTwo.removeEventListener("click", flipCard);
cardOne = cardTwo = "";
return disableDeck = false;
}
setTimeout(() => {
cardOne.classList.add("shake");
cardTwo.classList.add("shake");
}, 400);
setTimeout(() => {
cardOne.classList.remove("shake", "flip");
cardTwo.classList.remove("shake", "flip");
cardOne = cardTwo = "";
disableDeck = false;
}, 1200);
}
function shuffleCard() {
matched = 0;
disableDeck = false;
cardOne = cardTwo = "";
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(() => Math.random() > 0.5 ? 1 : -1);
cards.forEach((card, i) => {
card.classList.remove("flip");
let imgTag = card.querySelector(".back-view img");
imgTag.src = `images/img-${arr[i]}.png`;
card.addEventListener("click", flipCard);
});
}
shuffleCard();
cards.forEach(card => {
card.addEventListener("click", flipCard);
});2. Typing Speed Test Game
You may have tested your typing speed on different typing speed test websites. In this game, users have 60 seconds to type as many characters as possible and can check their WPM, CPM, accuracy, and more. Users can even erase their incorrect characters or go back using the backspace key.
Creating this game is a good way to improve your problem-solving skills and gain a better understanding of JavaScript concepts such as manipulating the DOM, handling event listeners, and creating user-friendly designs.
Source Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Typing Speed Test Game | InsightsHub</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<input type="text" class="input-field">
<div class="content-box">
<div class="typing-text">
<p></p>
</div>
<div class="content">
<ul class="result-details">
<li class="time">
<p>Time Left:</p>
<span><b>60</b>s</span>
</li>
<li class="mistake">
<p>Mistakes:</p>
<span>0</span>
</li>
<li class="wpm">
<p>WPM:</p>
<span>0</span>
</li>
<li class="cpm">
<p>CPM:</p>
<span>0</span>
</li>
</ul>
<button>Try Again</button>
</div>
</div>
</div>
<script src="js/paragraphs.js"></script>
<script src="js/script.js"></script>
</body>
</html>style.css
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #17A2B8;
}
::selection{
color: #fff;
background: #17A2B8;
}
.wrapper{
width: 770px;
padding: 35px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 15px rgba(0,0,0,0.05);
}
.wrapper .input-field{
opacity: 0;
z-index: -999;
position: absolute;
}
.wrapper .content-box{
padding: 13px 20px 0;
border-radius: 10px;
border: 1px solid #bfbfbf;
}
.content-box .typing-text{
overflow: hidden;
max-height: 256px;
}
.typing-text::-webkit-scrollbar{
width: 0;
}
.typing-text p{
font-size: 21px;
text-align: justify;
letter-spacing: 1px;
word-break: break-all;
}
.typing-text p span{
position: relative;
}
.typing-text p span.correct{
color: #56964f;
}
.typing-text p span.incorrect{
color: #cb3439;
outline: 1px solid #fff;
background: #ffc0cb;
border-radius: 4px;
}
.typing-text p span.active{
color: #17A2B8;
}
.typing-text p span.active::before{
position: absolute;
content: "";
height: 2px;
width: 100%;
bottom: 0;
left: 0;
opacity: 0;
border-radius: 5px;
background: #17A2B8;
animation: blink 1s ease-in-out infinite;
}
@keyframes blink{
50%{
opacity: 1;
}
}
.content-box .content{
margin-top: 17px;
display: flex;
padding: 12px 0;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-top: 1px solid #bfbfbf;
}
.content button{
outline: none;
border: none;
width: 105px;
color: #fff;
padding: 8px 0;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
background: #17A2B8;
transition: transform 0.3s ease;
}
.content button:active{
transform: scale(0.97);
}
.content .result-details{
display: flex;
flex-wrap: wrap;
align-items: center;
width: calc(100% - 140px);
justify-content: space-between;
}
.result-details li{
display: flex;
height: 20px;
list-style: none;
position: relative;
align-items: center;
}
.result-details li:not(:first-child){
padding-left: 22px;
border-left: 1px solid #bfbfbf;
}
.result-details li p{
font-size: 19px;
}
.result-details li span{
display: block;
font-size: 20px;
margin-left: 10px;
}
li span b{
font-weight: 500;
}
li:not(:first-child) span{
font-weight: 500;
}
@media (max-width: 745px) {
.wrapper{
padding: 20px;
}
.content-box .content{
padding: 20px 0;
}
.content-box .typing-text{
max-height: 100%;
}
.typing-text p{
font-size: 19px;
text-align: left;
}
.content button{
width: 100%;
font-size: 15px;
padding: 10px 0;
margin-top: 20px;
}
.content .result-details{
width: 100%;
}
.result-details li:not(:first-child){
border-left: 0;
padding: 0;
}
.result-details li p,
.result-details li span{
font-size: 17px;
}
}
@media (max-width: 518px) {
.wrapper .content-box{
padding: 10px 15px 0;
}
.typing-text p{
font-size: 18px;
}
.result-details li{
margin-bottom: 10px;
}
.content button{
margin-top: 10px;
}
}script.js
const paragraphs = [
"Authors often misinterpret the lettuce as a folklore rabbi, when in actuality it feels more like an uncursed bacon. Pursued distances show us how mother-in-laws can be charleses. Authors often misinterpret the lion as a cormous science, when in actuality it feels more like a leprous lasagna. Recent controversy aside, their band was, in this moment, a racemed suit. The clutch of a joke becomes a togaed chair. The first pickled chess is.",
"In modern times the first scrawny kitten is, in its own way, an input. An ostrich is the beginner of a roast. An appressed exhaust is a gun of the mind. A recorder is a grade from the right perspective. A hygienic is the cowbell of a skin. Few can name a dun brazil that isn't a highbrow playroom. The unwished beast comes from a thorny oxygen. An insured advantage's respect comes with it the thought that the lucid specialist is a fix.",
"In ancient times the legs could be said to resemble stroppy vegetables. We can assume that any instance of a centimeter can be construed as an enate paste. One cannot separate pairs from astute managers. Those americas are nothing more than fish. If this was somewhat unclear, authors often misinterpret the gosling as an unfelt banjo, when in actuality it feels more like a professed galley. A bow of the squirrel is assumed.",
"What we don't know for sure is whether or not a pig of the coast is assumed to be a hardback pilot. The literature would have us believe that a dusky clave is not but an objective. Few can name a limbate leo that isn't a sunlit silver. The bow is a mitten. However, the drawer is a bay. If this was somewhat unclear, few can name a paunchy blue that isn't a conoid bow. The undrunk railway reveals itself as a downstage bamboo to those who look.",
"Their politician was, in this moment, a notour paperback. The first armless grouse is, in its own way, a gear. The coat is a wash. However, a cake is the llama of a caravan. Snakelike armies show us how playgrounds can be viscoses. Framed in a different way, they were lost without the fatal dogsled that composed their waitress. Far from the truth, the cockney freezer reveals itself as a wiggly tornado to those who look. The first hawklike sack.",
"An aunt is a bassoon from the right perspective. As far as we can estimate, some posit the melic myanmar to be less than kutcha. One cannot separate foods from blowzy bows. The scampish closet reveals itself as a sclerous llama to those who look. A hip is the skirt of a peak. Some hempy laundries are thought of simply as orchids. A gum is a trumpet from the right perspective. A freebie flight is a wrench of the mind. Some posit the croupy.",
"A baby is a shingle from the right perspective. Before defenses, collars were only operations. Bails are gleesome relatives. An alloy is a streetcar's debt. A fighter of the scarecrow is assumed to be a leisured laundry. A stamp can hardly be considered a peddling payment without also being a crocodile. A skill is a meteorology's fan. Their scent was, in this moment, a hidden feeling. The competitor of a bacon becomes a boxlike cougar.",
"A broadband jam is a network of the mind. One cannot separate chickens from glowing periods. A production is a faucet from the right perspective. The lines could be said to resemble zincoid females. A deborah is a tractor's whale. Cod are elite japans. Some posit the wiglike norwegian to be less than plashy. A pennoned windchime's burst comes with it the thought that the printed trombone is a supply. Relations are restless tests.",
"In recent years, some teeming herons are thought of simply as numbers. Nowhere is it disputed that an unlaid fur is a marble of the mind. Far from the truth, few can name a glossy lier that isn't an ingrate bone. The chicken is a giraffe. They were lost without the abscessed leek that composed their fowl. An interviewer is a tussal bomb. Vanward maracas show us how scarfs can be doubts. Few can name an unguled punch that isn't pig.",
"A cough is a talk from the right perspective. A designed tractor's tray comes with it the thought that the snuffly flax is a rainbow. Their health was, in this moment, an earthy passbook. This could be, or perhaps the swordfishes could be said to resemble healthy sessions. A capricorn is a helium from the right perspective. However, a sled is a mailman's tennis. The competitor of an alarm becomes a toeless raincoat. Their twist was, in this moment.",
"Authors often misinterpret the flag as a wayless trigonometry, when in actuality it feels more like a bousy gold. Few can name a jasp oven that isn't a stutter grape. They were lost without the huffy religion that composed their booklet. Those waves are nothing more than pedestrians. Few can name a quartered semicolon that isn't a rounding scooter. Though we assume the latter, the literature would have us believe.",
"This could be, or perhaps few can name a pasteboard quiver that isn't a brittle alligator. A swordfish is a death's numeric. Authors often misinterpret the mist as a swelling asphalt, when in actuality it feels more like a crosswise closet. Some posit the tonal brother-in-law to be less than newborn. We know that the sizes could be said to resemble sleepwalk cycles. Before seasons, supplies were only fighters. Their stew was, in this moment.",
"The vision of an attempt becomes a lawny output. Dibbles are mis womens. The olden penalty reveals itself as a bustled field to those who look. Few can name a chalky force that isn't a primate literature. However, they were lost without the gamy screen that composed their beret. Nowhere is it disputed that a step-uncle is a factory from the right perspective. One cannot separate paints from dreary windows. What we don't know for sure is whether.",
"A tramp is a siamese from the right perspective. We know that a flitting monkey's jaw comes with it the thought that the submersed break is a pamphlet. Their cream was, in this moment, a seedy daffodil. The nest is a visitor. Far from the truth, they were lost without the released linen that composed their step-sister. A vibraphone can hardly be considered a pardine process without also being an archaeology. The bay of a hyacinth becomes.",
"The frosts could be said to resemble backstage chards. One cannot separate colleges from pinkish bacons. Far from the truth, the mom of a rooster becomes a chordal hydrogen. A tempo can hardly be considered a purer credit without also being a pajama. The first combined ease is, in its own way, a pantyhose. Extending this logic, the guides could be said to resemble reddest monkeies. Framed in a different way, an addle hemp is a van.",
"Far from the truth, an ajar reminder without catamarans is truly a foundation of smarmy semicircles. An alike board without harps is truly a satin of fated pans. A hubcap sees a parent as a painful beautician. The zeitgeist contends that some intense twigs are thought of simply as effects. A cross is a poppied tune. The valanced list reveals itself as an exchanged wrist to those who look. Recent controversy aside.",
"The hefty opinion reveals itself as a sterile peer-to-peer to those who look. This could be, or perhaps the watch of a diamond becomes a bosom baboon. In recent years, some posit the unstuffed road to be less than altern. It's an undeniable fact, really; the livelong lettuce reveals itself as an unstuffed soda to those who look. In ancient times a bit is a balance's season. The popcorn of a morning becomes a moonless beauty.",
"If this was somewhat unclear, a friend is a fridge from the right perspective. An upset carriage is a stitch of the mind. To be more specific, a temper is a pair from the right perspective. Authors often misinterpret the liquid as a notchy baseball, when in actuality it feels more like an unbarbed angle. Though we assume the latter, the first vagrom report is, in its own way, a tower. We know that the octopus of a cd becomes an unrent dahlia.",
"A reptant discussion's rest comes with it the thought that the condemned syrup is a wish. The drake of a wallaby becomes a sonant harp. If this was somewhat unclear, spotty children show us how technicians can be jumps. Their honey was, in this moment, an intime direction. A ship is the lion of a hate. They were lost without the croupous jeep that composed their lily. In modern times a butcher of the birth is assumed to be a spiral bean.",
"Those cowbells are nothing more than elements. This could be, or perhaps before stockings, thoughts were only opinions. A coil of the exclamation is assumed to be a hurtless toy. A board is the cast of a religion. In ancient times the first stinko sailboat is, in its own way, an exchange. Few can name a tutti channel that isn't a footless operation. Extending this logic, an oatmeal is the rooster of a shake. Those step-sons are nothing more than matches."
];3. Hangman Game with Illustration
Hangman is the classic word-guessing game you’ve likely enjoyed playing. In this game, players try to guess all the letters of a randomly generated word within a given number of tries. There is also a hangman illustration that will progressively appear on the gallows for each incorrect guess.
Building a Hangman game from scratch using HTML, CSS, and JavaScript is an enjoyable and rewarding experience that can strengthen your web development and problem-solving skills.
Source Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hangman Game JavaScript | InsightsHub</title>
<link rel="stylesheet" href="style.css">
<script src="scripts/word-list.js" defer></script>
<script src="scripts/script.js" defer></script>
</head>
<body>
<div class="game-modal">
<div class="content">
<img src="#" alt="gif">
<h4>Game Over!</h4>
<p>The correct word was: <b>rainbow</b></p>
<button class="play-again">Play Again</button>
</div>
</div>
<div class="container">
<div class="hangman-box">
<img src="#" draggable="false" alt="hangman-img">
<h1>Hangman Game</h1>
</div>
<div class="game-box">
<ul class="word-display"></ul>
<h4 class="hint-text">Hint: <b></b></h4>
<h4 class="guesses-text">Incorrect guesses: <b></b></h4>
<div class="keyboard"></div>
</div>
</div>
</body>
</html>style.css
/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #5E63BA;
}
.container {
display: flex;
width: 850px;
gap: 70px;
padding: 60px 40px;
background: #fff;
border-radius: 10px;
align-items: flex-end;
justify-content: space-between;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.hangman-box img {
user-select: none;
max-width: 270px;
}
.hangman-box h1 {
font-size: 1.45rem;
text-align: center;
margin-top: 20px;
text-transform: uppercase;
}
.game-box .word-display {
gap: 10px;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.word-display .letter {
width: 28px;
font-size: 2rem;
text-align: center;
font-weight: 600;
margin-bottom: 40px;
text-transform: uppercase;
border-bottom: 3px solid #000;
}
.word-display .letter.guessed {
margin: -40px 0 35px;
border-color: transparent;
}
.game-box h4 {
text-align: center;
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 15px;
}
.game-box h4 b {
font-weight: 600;
}
.game-box .guesses-text b {
color: #ff0000;
}
.game-box .keyboard {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 40px;
justify-content: center;
}
:where(.game-modal, .keyboard) button {
color: #fff;
border: none;
outline: none;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
border-radius: 4px;
text-transform: uppercase;
background: #5E63BA;
}
.keyboard button {
padding: 7px;
width: calc(100% / 9 - 5px);
}
.keyboard button[disabled] {
pointer-events: none;
opacity: 0.6;
}
:where(.game-modal, .keyboard) button:hover {
background: #8286c9;
}
.game-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 0 10px;
transition: opacity 0.4s ease;
}
.game-modal.show {
opacity: 1;
pointer-events: auto;
transition: opacity 0.4s 0.4s ease;
}
.game-modal .content {
padding: 30px;
max-width: 420px;
width: 100%;
border-radius: 10px;
background: #fff;
text-align: center;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.game-modal img {
max-width: 130px;
margin-bottom: 20px;
}
.game-modal img[src="images/victory.gif"] {
margin-left: -10px;
}
.game-modal h4 {
font-size: 1.53rem;
}
.game-modal p {
font-size: 1.15rem;
margin: 15px 0 30px;
font-weight: 500;
}
.game-modal p b {
color: #5E63BA;
font-weight: 600;
}
.game-modal button {
padding: 12px 23px;
}
@media (max-width: 782px) {
.container {
flex-direction: column;
padding: 30px 15px;
align-items: center;
}
.hangman-box img {
max-width: 200px;
}
.hangman-box h1 {
display: none;
}
.game-box h4 {
font-size: 1rem;
}
.word-display .letter {
margin-bottom: 35px;
font-size: 1.7rem;
}
.word-display .letter.guessed {
margin: -35px 0 25px;
}
.game-modal img {
max-width: 120px;
}
.game-modal h4 {
font-size: 1.45rem;
}
.game-modal p {
font-size: 1.1rem;
}
.game-modal button {
padding: 10px 18px;
}
}script.js
const wordList = [
{
word: "guitar",
hint: "A musical instrument with strings."
},
{
word: "oxygen",
hint: "A colorless, odorless gas essential for life."
},
{
word: "mountain",
hint: "A large natural elevation of the Earth's surface."
},
{
word: "painting",
hint: "An art form using colors on a surface to create images or expression."
},
{
word: "astronomy",
hint: "The scientific study of celestial objects and phenomena."
},
{
word: "football",
hint: "A popular sport played with a spherical ball."
},
{
word: "chocolate",
hint: "A sweet treat made from cocoa beans."
},
{
word: "butterfly",
hint: "An insect with colorful wings and a slender body."
},
{
word: "history",
hint: "The study of past events and human civilization."
},
{
word: "pizza",
hint: "A savory dish consisting of a round, flattened base with toppings."
},
{
word: "jazz",
hint: "A genre of music characterized by improvisation and syncopation."
},
{
word: "camera",
hint: "A device used to capture and record images or videos."
},
{
word: "diamond",
hint: "A precious gemstone known for its brilliance and hardness."
},
{
word: "adventure",
hint: "An exciting or daring experience."
},
{
word: "science",
hint: "The systematic study of the structure and behavior of the physical and natural world."
},
{
word: "bicycle",
hint: "A human-powered vehicle with two wheels."
},
{
word: "sunset",
hint: "The daily disappearance of the sun below the horizon."
},
{
word: "coffee",
hint: "A popular caffeinated beverage made from roasted coffee beans."
},
{
word: "dance",
hint: "A rhythmic movement of the body often performed to music."
},
{
word: "galaxy",
hint: "A vast system of stars, gas, and dust held together by gravity."
},
{
word: "orchestra",
hint: "A large ensemble of musicians playing various instruments."
},
{
word: "volcano",
hint: "A mountain or hill with a vent through which lava, rock fragments, hot vapor, and gas are ejected."
},
{
word: "novel",
hint: "A long work of fiction, typically with a complex plot and characters."
},
{
word: "sculpture",
hint: "A three-dimensional art form created by shaping or combining materials."
},
{
word: "symphony",
hint: "A long musical composition for a full orchestra, typically in multiple movements."
},
{
word: "architecture",
hint: "The art and science of designing and constructing buildings."
},
{
word: "ballet",
hint: "A classical dance form characterized by precise and graceful movements."
},
{
word: "astronaut",
hint: "A person trained to travel and work in space."
},
{
word: "waterfall",
hint: "A cascade of water falling from a height."
},
{
word: "technology",
hint: "The application of scientific knowledge for practical purposes."
},
{
word: "rainbow",
hint: "A meteorological phenomenon that is caused by reflection, refraction, and dispersion of light."
},
{
word: "universe",
hint: "All existing matter, space, and time as a whole."
},
{
word: "piano",
hint: "A musical instrument played by pressing keys that cause hammers to strike strings."
},
{
word: "vacation",
hint: "A period of time devoted to pleasure, rest, or relaxation."
},
{
word: "rainforest",
hint: "A dense forest characterized by high rainfall and biodiversity."
},
{
word: "theater",
hint: "A building or outdoor area in which plays, movies, or other performances are staged."
},
{
word: "telephone",
hint: "A device used to transmit sound over long distances."
},
{
word: "language",
hint: "A system of communication consisting of words, gestures, and syntax."
},
{
word: "desert",
hint: "A barren or arid land with little or no precipitation."
},
{
word: "sunflower",
hint: "A tall plant with a large yellow flower head."
},
{
word: "fantasy",
hint: "A genre of imaginative fiction involving magic and supernatural elements."
},
{
word: "telescope",
hint: "An optical instrument used to view distant objects in space."
},
{
word: "breeze",
hint: "A gentle wind."
},
{
word: "oasis",
hint: "A fertile spot in a desert where water is found."
},
{
word: "photography",
hint: "The art, process, or practice of creating images by recording light or other electromagnetic radiation."
},
{
word: "safari",
hint: "An expedition or journey, typically to observe wildlife in their natural habitat."
},
{
word: "planet",
hint: "A celestial body that orbits a star and does not produce light of its own."
},
{
word: "river",
hint: "A large natural stream of water flowing in a channel to the sea, a lake, or another such stream."
},
{
word: "tropical",
hint: "Relating to or situated in the region between the Tropic of Cancer and the Tropic of Capricorn."
},
{
word: "mysterious",
hint: "Difficult or impossible to understand, explain, or identify."
},
{
word: "enigma",
hint: "Something that is mysterious, puzzling, or difficult to understand."
},
{
word: "paradox",
hint: "A statement or situation that contradicts itself or defies intuition."
},
{
word: "puzzle",
hint: "A game, toy, or problem designed to test ingenuity or knowledge."
},
{
word: "whisper",
hint: "To speak very softly or quietly, often in a secretive manner."
},
{
word: "shadow",
hint: "A dark area or shape produced by an object blocking the light."
},
{
word: "secret",
hint: "Something kept hidden or unknown to others."
},
{
word: "curiosity",
hint: "A strong desire to know or learn something."
},
{
word: "unpredictable",
hint: "Not able to be foreseen or known beforehand; uncertain."
},
{
word: "obfuscate",
hint: "To confuse or bewilder someone; to make something unclear or difficult to understand."
},
{
word: "unveil",
hint: "To make known or reveal something previously secret or unknown."
},
{
word: "illusion",
hint: "A false perception or belief; a deceptive appearance or impression."
},
{
word: "moonlight",
hint: "The light from the moon."
},
{
word: "vibrant",
hint: "Full of energy, brightness, and life."
},
{
word: "nostalgia",
hint: "A sentimental longing or wistful affection for the past."
},
{
word: "brilliant",
hint: "Exceptionally clever, talented, or impressive."
},
];
const wordDisplay = document.querySelector(".word-display");
const guessesText = document.querySelector(".guesses-text b");
const keyboardDiv = document.querySelector(".keyboard");
const hangmanImage = document.querySelector(".hangman-box img");
const gameModal = document.querySelector(".game-modal");
const playAgainBtn = gameModal.querySelector("button");
// Initializing game variables
let currentWord, correctLetters, wrongGuessCount;
const maxGuesses = 6;
const resetGame = () => {
// Ressetting game variables and UI elements
correctLetters = [];
wrongGuessCount = 0;
hangmanImage.src = "images/hangman-0.svg";
guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`;
wordDisplay.innerHTML = currentWord.split("").map(() => `<li class="letter"></li>`).join("");
keyboardDiv.querySelectorAll("button").forEach(btn => btn.disabled = false);
gameModal.classList.remove("show");
}
const getRandomWord = () => {
// Selecting a random word and hint from the wordList
const { word, hint } = wordList[Math.floor(Math.random() * wordList.length)];
currentWord = word; // Making currentWord as random word
document.querySelector(".hint-text b").innerText = hint;
resetGame();
}
const gameOver = (isVictory) => {
// After game complete.. showing modal with relevant details
const modalText = isVictory ? `You found the word:` : 'The correct word was:';
gameModal.querySelector("img").src = `images/${isVictory ? 'victory' : 'lost'}.gif`;
gameModal.querySelector("h4").innerText = isVictory ? 'Congrats!' : 'Game Over!';
gameModal.querySelector("p").innerHTML = `${modalText} <b>${currentWord}</b>`;
gameModal.classList.add("show");
}
const initGame = (button, clickedLetter) => {
// Checking if clickedLetter is exist on the currentWord
if(currentWord.includes(clickedLetter)) {
// Showing all correct letters on the word display
[...currentWord].forEach((letter, index) => {
if(letter === clickedLetter) {
correctLetters.push(letter);
wordDisplay.querySelectorAll("li")[index].innerText = letter;
wordDisplay.querySelectorAll("li")[index].classList.add("guessed");
}
});
} else {
// If clicked letter doesn't exist then update the wrongGuessCount and hangman image
wrongGuessCount++;
hangmanImage.src = `images/hangman-${wrongGuessCount}.svg`;
}
button.disabled = true; // Disabling the clicked button so user can't click again
guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`;
// Calling gameOver function if any of these condition meets
if(wrongGuessCount === maxGuesses) return gameOver(false);
if(correctLetters.length === currentWord.length) return gameOver(true);
}
// Creating keyboard buttons and adding event listeners
for (let i = 97; i <= 122; i++) {
const button = document.createElement("button");
button.innerText = String.fromCharCode(i);
keyboardDiv.appendChild(button);
button.addEventListener("click", (e) => initGame(e.target, String.fromCharCode(i)));
}
getRandomWord();
playAgainBtn.addEventListener("click", getRandomWord);
