Whack-a-Mole is a popular arcade game where players use a mallet to hit mechanical moles that randomly pop up from holes in the game console. The objective is to hit as many moles as possible within a set time limit, earning points for each successful hit. The game requires quick reflexes and hand-eye coordination. There are also digital and handheld versions of the game available, extending its popularity beyond physical arcades. In this blog you will get to know how to create whack-a-mole game using JavaScript.
Whack-a-Mole Game Online
Prerequisites for playing Whack-A-Mole
- Quick Reflexes: The game involves rapidly hitting moles as they pop up, so players need fast reaction times.
- Hand-Eye Coordination: Players must be able to quickly and accurately move the mallet to the popping moles.
- Basic Understanding of the Game Rules: Knowing that the goal is to hit the moles and earn points, with more points typically awarded for faster and more accurate hits.
GitHub Repository
Whack-a-Mole Game Using JavaScript (Requirements)
HTML Code:
Whack-a-Mole Game
Score: 0
High Score: 0
Time Left: 30s
Mode: Easy
CSS Code:
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
}
.game {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
max-width: 400px;
width: 100%;
}
.header {
margin-bottom: 20px;
}
.info-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
padding: 0 10px;
}
.info-item {
font-size: 20px;
}
.mode-selection {
margin-bottom: 20px;
}
.mode-selection label {
font-size: 16px;
}
.mode-selection select {
font-size: 16px;
padding: 5px;
margin-left: 10px;
}
.mole-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 300px;
margin: 20px auto;
}
.hole {
width: 100px;
height: 100px;
background-color: #8b5e3c;
position: relative;
border-radius: 10px;
overflow: hidden; /* Ensure mole is hidden when off-screen */
}
.mole {
width: 80px;
height: 80px;
background-color: #d4af37;
border-radius: 50%;
position: absolute;
bottom: -100px; /* Start off-screen */
left: 50%;
transform: translateX(-50%);
cursor: pointer;
transition: bottom 0.3s, opacity 0.3s;
opacity: 0; /* Start invisible */
}
.mole.up {
bottom: 10px;
opacity: 1; /* Fully visible when up */
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
margin-top: 20px;
}
button:hover {
background-color: #218838;
}
button:focus {
outline: none;
}
button:active {
background-color: #1e7e34;
}
JavaScript Code:
const holes = document.querySelectorAll(".hole");
const moles = document.querySelectorAll(".mole");
const scoreBoard = document.getElementById("score");
const highScoreBoard = document.getElementById("highScore");
const timeLeftBoard = document.getElementById("timeLeft");
const modeBoard = document.getElementById("mode");
const modeSelect = document.getElementById("modeSelect");
const startButton = document.getElementById("startButton");
let lastHole;
let timeUp = false;
let score = 0;
let highScore = 0;
let timeLeft = 30;
let mode = "easy";
let peepTime = 1000;
let gameTimer;
let moleTimer;
function setPeepTime(mode) {
switch (mode) {
case "easy":
return 1000;
case "medium":
return 800;
case "hard":
return 600;
default:
return 1000;
}
}
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
const idx = Math.floor(Math.random() * holes.length);
const hole = holes[idx];
if (hole === lastHole) {
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
const time = randomTime(peepTime - 300, peepTime);
const hole = randomHole(holes);
const mole = hole.querySelector(".mole");
mole.classList.add("up");
moleTimer = setTimeout(() => {
mole.classList.remove("up");
if (!timeUp) peep();
}, time);
}
function startGame() {
clearInterval(gameTimer);
clearTimeout(moleTimer);
scoreBoard.textContent = 0;
timeLeftBoard.textContent = 30;
modeBoard.textContent = mode.charAt(0).toUpperCase() + mode.slice(1);
score = 0;
timeLeft = 30;
peepTime = setPeepTime(mode);
timeUp = false;
peep();
gameTimer = setInterval(() => {
timeLeft--;
timeLeftBoard.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(gameTimer);
timeUp = true;
updateHighScore();
alert("Game Over! Your score is " + score);
}
}, 1000);
}
function bonk(e) {
if (!e.isTrusted) return; // Cheater!
score++;
this.classList.remove("up");
scoreBoard.textContent = score;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
highScoreBoard.textContent = highScore;
}
}
moles.forEach((mole) => mole.addEventListener("click", bonk));
startButton.addEventListener("click", startGame);
modeSelect.addEventListener("change", (e) => {
mode = e.target.value;
});
Related Articles
FAQ's
One of the most widely used 3D game engines among developers is js. It offers built-in functions to speed up the implementation of common 3D functionality, just like any other 3D library.
→ How to Write JavaScript Code for a Game.
- Choose a code editor.
- Create a game canvas in step two.
- Code Your Player.
- Give Your Player Code Functionality.
- Code Jump Logic for Your Player.
- Construct the Attack Block.
An arcade game known as Whack-A-Mole, It was developed in 1975 in Japan under the name Mogura Taiji by the entertainment company TOGO.
10 thoughts on “Whack-a-Mole Game Using JavaScript”
Comments are closed.