Whack-a-Mole and Simon Game

Developer
Adam
Size
10,604 Kb
Views
6,072
  1. Whack-a-Mole and Simon Game Previews
  2. Whack-a-Mole and Simon Game HTML Codes
  3. Whack-a-Mole and Simon Game CSS Codes
  4. Whack-a-Mole and Simon Game JS Codes

How do I make an whack-a-mole and simon game?

Combined the final projects of Free Code Camp and 30 days of Javascript into one idea in plain javascript. What is a whack-a-mole and simon game? How do you make a whack-a-mole and simon game? This script and codes were developed by Adam on 28 November 2022, Monday.

Whack-a-Mole and Simon Game Previews
IQ Test

Whack-a-Mole and Simon Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Whack-a-Mole and Simon Game</title> <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <!--Intro Modal--> <div class="modal intro"> <h2>Choose Your Game</h2> <div> <p class="choice-whack">Whack-a-Mole</p> <p class="choice-mime">Mime-a-Mole</p> </div> </div> <!--Difficulty Modal for Whack. Hidden at Start--> <div class="modal mode"> <h2>Choose Your Difficulty</h2> <div class="mode-options"> <p class="easy">Easy</p> <p class="medium">Medium</p> <p class="hard">Hard</p> </div> </div> <!--Setting Modal for Mime. Hidden at Start--> <div class="modal mime-settings"> <h2>Choose Your Settings</h2> <div class="mime-options"> <p class="normal-mode">Normal Mode</p> <p>Sequence repeats after mistakes</p> <p class="strict-mode">Strict Mode</p> <p>One mistake and it's game over!</p> </div> </div> <!--Info for Whack Game. Hidden at Start--> <div class="info-container"> <div class="whack-info"> <h1>Whack-a-mole!</h1> <div class="scores-container"> <div> <p>Current<br>Score</p> <div class="score current-score">0</div> </div> <p> <span class="menu-options whack-start">Start</span><br> <span class="menu-options whack-menu">Menu</span> </p> <div> <p>High<br>Score</p> <div class="score high-score">0</div> </div> </div> <div class="message-whack">You Scored</div> </div> <!--Info for Mime Game. Hidden at Start--> <div class="mime-info"> <h1>Mime-a-mole!</h1> <div class="scores-container"> <div> <p>Current<br>Streak</p> <div class="score current-streak">0</div> </div> <p> <span class="menu-options mime-start">Start</span> <span class="menu-options mime-reset">Reset</span> <br> <span class="menu-options mime-menu">Menu</span> </p> <div> <p>High<br>Streak</p> <div class="score high-streak">0</div> </div> </div> </div> <div class="message">Game Over</div> </div> <!--Game board--> <div class="game-container"> <div class="game"> <div data-key="0" class="hole hole1"> <div class="mole"></div> </div> <div data-key="1" class="hole hole2"> <div class="mole"></div> </div> <div data-key="2" class="hole hole3"> <div class="mole"></div> </div> <div data-key="3" class="hole hole4 "> <div class="mole"></div> </div> </div> </div>
</div>
<audio class="sound1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" preload></audio>
<audio class="sound2" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" preload></audio>
<audio class="sound3" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" preload></audio>
<audio class="sound4" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" preload></audio>
<audio class="error-sound" src="https://www.dropbox.com/s/n3jezc5cnht4qig/366103__original-sound__error-wooden.wav?raw=1" preload></audio> <script src="js/index.js"></script>
</body>
</html>

Whack-a-Mole and Simon Game - Script Codes CSS Codes

html { box-sizing: border-box; font-size: 10px;
}
@media (max-width: 600px) { html { font-size: 8px; }
}
@media (max-width: 400px) { html { font-size: 6px; }
}
*,
*:before,
*:after { box-sizing: inherit;
}
body { font-family: 'Luckiest Guy', cursive; color: #89260b; background-color: #4ac5d3; text-align: center; height: 100%;
}
.container { max-width: 600px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; position: relative;
}
p { font-family: 'Luckiest Guy';
}
/*Modals*/
.modal { width: 66.6%; background: white; background: rgba(255, 255, 255, 0.9); position: absolute; top: 10%; left: 16.5%; z-index: 3; border-radius: 10px; border: 5px solid #89260b;
}
.modal h2 { font-size: 5rem; margin: 2% 1% 0;
}
/*Intro Modal*/
.intro p { font-size: 4rem; margin-top: 2%; cursor: pointer; color: #0c7006;
}
.intro p:hover { color: black;
}
/*Option Modals*/
.mode div > p { margin: 1% 0 0; padding: 1%; font-size: 3rem; cursor: pointer; color: #0c7006;
}
.mode div > p:hover { color: black;
}
.mime-options :nth-child(odd) { font-size: 3.5rem; margin: 2% 0 0; color: #0c7006; cursor: pointer;
}
.mime-options :nth-child(odd):hover { cursor: pointer; color: black;
}
.mime-options :nth-child(2n) { font-size: 2.5rem; margin: 0;
}
/*Game Info*/
.info-container { height: 240px; width: 100%;
}
@media (max-width: 400px) { .info-container { height: 150px; }
}
h1 { font-size: 6rem; line-height: 1; margin: 10px 0 10px; text-shadow: 3px 3px white;
}
.scores-container { width: 100%; display: flex; justify-content: space-around; padding: 2%;
}
.scores-container > div { background: #0c7006; padding: 1%; color: white; border: 5px solid #89260b; border-radius: 10px; font-size: 2rem;
}
.score { width: 100%; margin: -10px 0 0; font-size: 5rem;
}
.menu-options { font-size: 4rem; cursor: pointer; text-shadow: 3px 3px white;
}
.menu-options:hover { color: black;
}
.message, .message-whack { margin-top: 1%; display: block; position: relative; z-index: 10; font-size: 5rem; color: #0c7006; text-shadow: 3px 3px white;
}
.message-whack { margin-top: 6%;
}
/*Game Board*/
.game-container { width: 100vw; padding: 0; margin: 10px 0 0; background: linear-gradient(#4ac5d3 40%, black 40.1%, green 41%, green 83%, black 83.1%, #0e5900 84%);
}
.game { width: 600px; height: 350px; display: flex; flex-wrap: wrap; margin: 0px auto 50px; cursor: url("https://www.dropbox.com/s/th0zd8ufw5xkwye/mallet.png?raw=1"), pointer;
}
@media (max-width: 600px) { .game { width: 400px; }
}
@media (max-width: 400px) { .game { width: 300px; }
}
.hole { flex: 1 0 50%; overflow: hidden; position: relative; margin: 0 auto;
}
.hole:after { display: block; background: linear-gradient(135deg, #59260a, #a34310); background-size: contain; content: ''; width: 200px; height: 80px; border: 3px solid black; border-radius: 75px 75px 0 0; position: absolute; z-index: 2; bottom: -30px; left: 50px;
}
@media (max-width: 600px) { .hole:after { left: 0px; }
}
@media (max-width: 400px) { .hole:after { width: 150px; height: 70px; }
}
.mole { background: url("https://www.dropbox.com/s/6bxx8txo4kawb3k/mole.png?raw=1") bottom center no-repeat; background-size: 120px 160px; position: absolute; top: 100%; width: 100%; height: 100%; transition: all 0.4s;
}
@media (max-width: 400px) { .mole { background-size: 100px 138px; }
}
/*Active Classes for Mime a Mole*/
.hole.up .mole { top: 0;
}
.avoid-clicks { pointer-events: none;
}
.hole1.active:after { background: #d63100;
}
.hole1.active.light:after { background: red;
}
.hole2.active:after { background: #4c0760;
}
.hole2.active.light:after { background: #a602d8;
}
.hole3.active:after { background: #0a7e84;
}
.hole3.active.light:after { background: #0ff3ff;
}
.hole4.active:after { background: #846c0b;
}
.hole4.active.light:after { background: #ffe01c;
}

Whack-a-Mole and Simon Game - Script Codes JS Codes

'use strict';
/*Whack-a-Mole/Simon 2 in 1 game. I thought I'd try to combine the final FCC project with the final tutorial from 30 days of Javascript by Wes Bos in vanilla Javascript. Most of the code for the Whack-a-Mole game is from the tutorial. I've modified it by storing it in an object to keep it separate from the simon game, adding difficultly levels, high scores and different styling.*/
document.addEventListener("DOMContentLoaded", function () { var intro = document.querySelector('.intro'); var message = document.querySelector('.message'); var messageWhack = document.querySelector('.message-whack'); var choiceWhack = document.querySelector('.choice-whack'); var choiceMime = document.querySelector('.choice-mime'); var game = document.querySelector('.game'); var holes = document.querySelectorAll('.hole'); var moles = document.querySelectorAll('.mole'); /*HELPER FUNCTIONS*/ //Had to add as Edge browser doesn't have the forEach method on the nodeList object NodeList.prototype.forEach = Array.prototype.forEach; function hide(element) { element.style.display = "none"; } function show(element) { element.style.display = ""; } /************************* ******MIME A MOLE********* *************************/ var highStreak = document.querySelector('.high-streak'); var currentStreak = document.querySelector('.current-streak'); var strictMode = document.querySelector('.strict-mode'); var normalMode = document.querySelector('.normal-mode'); var mimeMenu = document.querySelector('.mime-menu'); var mimeStartButton = document.querySelector('.mime-start'); var mimeResetButton = document.querySelector('.mime-reset'); var mimeSettings = document.querySelector('.mime-settings'); var mimeInfo = document.querySelector('.mime-info'); var mimeReset = document.querySelector('.mime-reset'); /*Menu Screens etc*/ function handleMode() { if (this.className === "strict-mode") { mime.strict = true; } else { mime.strict = false; } hide(mimeSettings); holes.forEach(function (hole) { return hole.classList.add("active"); }); game.classList.add("active"); show(mimeInfo); holes.forEach(function (hole) { return hole.classList.add('avoid-clicks'); }); hide(mimeResetButton); show(mimeStartButton); } function toggleButtons() { if (!mime.playFinished) { holes.forEach(function (hole) { return hole.classList.add('avoid-clicks'); }); } else { holes.forEach(function (hole) { return hole.classList.remove('avoid-clicks'); }); } } function mimeMenuHandler() { hide(mimeInfo); hide(mode); hide(message); mimeResetGame(); mime.high = 0; highStreak.textContent = 0; holes.forEach(function (hole) { return hole.classList.remove("active", "avoid-clicks"); }); holes.forEach(function (hole) { return hole.removeEventListener('click', playerClick); }); holes.forEach(function (mole) { return mole.classList.remove('up'); }); game.classList.remove("active"); show(intro); startAnimation(); } function mimeStartGame() { show(mimeResetButton); hide(mimeStartButton); hide(message); holes.forEach(function (hole) { return hole.addEventListener('click', playerClick); }); addToSequence(); } function mimeResetGame() { hide(mimeResetButton); show(mimeStartButton); mime.sequence = []; mime.playerSequence = []; mime.playFinished = false; mime.holeNumber = 0; mime.count = 0; mime.streak = 0; currentStreak.textContent = mime.streak; } /*Sounds*/ /*Error Sound from https://freesound.org/people/original_sound/sounds/366103*/ var errorSound = document.querySelector(".error-sound"); var sound1 = document.querySelector(".sound1"); var sound2 = document.querySelector(".sound2"); var sound3 = document.querySelector(".sound3"); var sound4 = document.querySelector(".sound4"); var soundArray = [sound1, sound2, sound3, sound4]; /*Gameplay*/ var mime = { strict: false, sequence: [], playerSequence: [], playFinished: false, holeNumber: 0, count: 0, streak: 0, high: 0, speed: 600 }; function addToSequence() { if (mime.sequence.length > 19) { show(message); message.textContent = 'You Win!'; mimeResetGame(); return; } var random = Math.floor(Math.random() * 4); mime.sequence.push(random); mime.streak++; currentStreak.textContent = mime.streak; if (mime.streak >= mime.high) { mime.high = mime.streak; highStreak.textContent = mime.high; } playSequence(); } function playerClick() { if (mime.playFinished) { mime.holeNumber = parseInt(this.dataset.key); mime.playerSequence.push(mime.holeNumber); if (mime.holeNumber !== mime.sequence[mime.count]) { if (mime.strict) { error(); mimeResetGame(); show(message); message.textContent = 'Game Over'; return; } else { mime.playerSequence = []; error(); mime.count = 0; return; } } holes[mime.holeNumber].classList.add('light'); holes[mime.holeNumber].classList.add('up'); soundArray[mime.holeNumber].play(); (function () { setTimeout(function () { holes[mime.holeNumber].classList.remove('light'); holes[mime.holeNumber].classList.remove('up'); }, mime.speed); })(); if (mime.count >= mime.sequence.length - 1) { if (mime.sequence.length < 19) { show(message); message.textContent = 'Next Round'; } setTimeout(function () { hide(message); mime.playerSequence = []; mime.count = 0; addToSequence(); return; }, 2000); } mime.count++; } } function playSequence() { mime.playFinished = false; toggleButtons(); var _loop = function _loop(i) { setTimeout(function () { if (mime.sequence.length === 0) { return; } holes[mime.sequence[i]].classList.add('light'); holes[mime.sequence[i]].classList.add('up'); soundArray[mime.sequence[i]].play(); (function () { setTimeout(function () { if (mime.sequence.length === 0) { return; } holes[mime.sequence[i]].classList.remove('light'); holes[mime.sequence[i]].classList.remove('up'); }, mime.speed); })(i); }, i * (mime.speed * 2)); }; for (var i = 0; i < mime.sequence.length; i++) { _loop(i); } setTimeout(function () { mime.playFinished = true; toggleButtons(); }, mime.sequence.length * (mime.speed * 2)); } function error() { holes.forEach(function (hole) { return hole.classList.add('light', 'up'); }); errorSound.play(); setTimeout(function () { holes.forEach(function (hole) { return hole.classList.remove('light', 'up'); }); if (!mime.strict) { message.textContent = 'Try Again'; show(message); setTimeout(function () { hide(message); playSequence(); }, mime.speed * 2); } }, mime.speed * 2.5); } /*Event Listeners*/ mimeStartButton.addEventListener('click', mimeStartGame); mimeResetButton.addEventListener('click', mimeResetGame); strictMode.addEventListener('click', handleMode); normalMode.addEventListener('click', handleMode); mimeMenu.addEventListener('click', mimeMenuHandler); /************************* ******WHACK-A-MOLE******** *************************/ var modeOptions = document.querySelectorAll('.mode-options > p'); var currentScore = document.querySelector('.current-score'); var highScore = document.querySelector('.high-score'); var whackStartButton = document.querySelector('.whack-start'); var whackMenu = document.querySelector('.whack-menu'); var mode = document.querySelector('.mode'); var whackInfo = document.querySelector('.whack-info'); /*Menu and Settings*/ function modeSelectionHandler() { whack.modeSelection(this); show(whackInfo); hide(mode); } function menuHandler() { hide(whackInfo); whack.high = 0; whack.score = 0; hide(messageWhack); currentScore.textContent = whack.score; highScore.textContent = whack.high; moles.forEach(function (mole) { return mole.removeEventListener('click', whack.hit); }); moles.forEach(function (mole) { return mole.classList.remove('up'); }); show(intro); startAnimation(); } /*Gameplay*/ var whack = { lastHole: null, timeUp: false, score: 0, high: 0, minPeep: 200, maxPeep: 1000, randomTime: function randomTime(min, max) { return Math.round(Math.random() * (max - min) + min); }, randomHole: function randomHole(holes) { var idx = Math.floor(Math.random() * holes.length); var hole = holes[idx]; if (hole === this.lastHole) { return this.randomHole(holes); } this.lastHole = hole; return hole; }, peep: function peep() { var time = this.randomTime(whack.minPeep, whack.maxPeep); var hole = this.randomHole(holes); hole.classList.add('up'); setTimeout(function () { hole.classList.remove('up'); if (!whack.timeUp) { whack.peep(); } }, time); }, startGame: function startGame(length) { hide(messageWhack); moles.forEach(function (mole) { return mole.addEventListener('click', whack.hit); }); currentScore.textContent = 0; whack.timeUp = false; whackStartButton.classList.add('avoid-clicks'); whack.score = 0; whack.peep(); setTimeout(function () { whack.timeUp = true; whackStartButton.classList.remove('avoid-clicks'); setTimeout(function () { messageWhack.textContent = 'You Scored: ' + whack.score; show(messageWhack); }, 500); }, length); }, hit: function hit(e) { if (!e.isTrusted) return; whack.score++; if (whack.score >= whack.high) { whack.high = whack.score; } this.parentElement.classList.remove('up'); currentScore.textContent = whack.score; highScore.textContent = whack.high; }, modeSelection: function modeSelection(e) { var option = e.className; if (option === 'easy') { whack.minPeep = 1000; whack.maxPeep = 2000; } if (option === 'medium') { whack.minPeep = 200; whack.maxPeep = 1000; } if (option === 'hard') { whack.minPeep = 100; whack.maxPeep = 400; } } }; /*Event Listeners*/ modeOptions.forEach(function (option) { return option.addEventListener('click', modeSelectionHandler); }); whackStartButton.addEventListener('click', function () { return whack.startGame(10000); }); whackMenu.addEventListener('click', menuHandler); /**********************/ /*START MENU*/ function startAnimation() { whack.timeUp = true; whack.timeUp = false; whack.peep(); } function init() { hide(whackInfo); hide(mode); hide(mimeSettings); hide(mimeInfo); hide(mimeReset); hide(message); hide(messageWhack); startAnimation(); } //Start Whack a mole game function whackStart() { whack.timeUp = true; hide(intro); show(mode); } //Start Mime a mole game function mimeStart() { whack.timeUp = true; hide(intro); show(mimeSettings); } //Event Listeners choiceWhack.addEventListener('click', whackStart); choiceMime.addEventListener('click', mimeStart); init();
});
Whack-a-Mole and Simon Game - Script Codes
Whack-a-Mole and Simon Game - Script Codes
Home Page Home
Developer Adam
Username rzencoder
Uploaded November 28, 2022
Rating 3
Size 10,604 Kb
Views 6,072
Do you need developer help for Whack-a-Mole and Simon Game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam (rzencoder) Script Codes
Name
CSS World Flags
HTML Canvas Paint App
Playable Piano Keyboard with Demos
Scatterplot Graph D3
Placeholder Portfolio
Wikipedia Viewer
Markdown Previewer
Calculator
The Crystal Maze
React Betting App
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!