Skip to content

feat: Add reset score button to Whack A Mole #735

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Add reset score button to Whack A Mole #735

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 175 additions & 32 deletions 03 - CSS Variables/index-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,194 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped CSS Variables and JS</title>
<title>Whack A Mole!</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>

<div class="controls">
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<h1>Whack-a-mole! <span class="score">0</span></h1>
<button onClick="startGame()">Start!</button>
<button id="reset-score-btn">Reset Score</button>

<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
<div class="game">
<div class="hole hole1">
<div class="mole"></div>
</div>
<div class="hole hole2">
<div class="mole"></div>
</div>
<div class="hole hole3">
<div class="mole"></div>
</div>
<div class="hole hole4">
<div class="mole"></div>
</div>
<div class="hole hole5">
<div class="mole"></div>
</div>
<div class="hole hole6">
<div class="mole"></div>
</div>
</div>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
<style>
/* Basic game styles - no changes needed here */
html {
box-sizing: border-box;
font-size: 10px;
background: #ffc600;
}

<style>
*, *:before, *:after {
box-sizing: inherit;
}

/*
misc styles, nothing to do with CSS variables
*/
body {
padding: 0;
margin: 0;
font-family: 'Amatic SC', cursive;
}

body {
text-align: center;
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
h1 {
text-align: center;
font-size: 10rem;
line-height: 1;
margin-bottom: 0;
}

.controls {
margin-bottom: 50px;
}
.score {
background: rgba(255,255,255,0.2);
padding: 0 3rem;
line-height: 1;
border-radius: 1rem;
}

.game {
width: 600px;
height: 400px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}

.hole {
flex: 1 0 33.33%;
overflow: hidden;
position: relative;
}

.hole:after {
display: block;
background: url(dirt.svg) bottom center no-repeat;
background-size: contain;
content: '';
width: 100%;
height: 70px;
position: absolute;
z-index: 2;
bottom: -30px;
}

.mole {
background: url('mole.svg') bottom center no-repeat;
background-size: 60%;
position: absolute;
top: 100%;
width: 100%;
height: 100%;
transition: all 0.4s;
}

.hole.up .mole {
top: 0;
}

button {
margin: 10px auto;
display: block;
padding: 10px 20px;
font-size: 2rem;
background: rgba(255,255,255,0.2);
border: 0;
border-radius: 5px;
font-family: 'Amatic SC', cursive;
cursor: pointer;
}

input {
width: 100px;
/* 2. CSS: ADDED BASIC STYLING FOR THE RESET BUTTON */
#reset-score-btn {
margin-left: 10px;
padding: 5px 10px;
font-size: 1.5rem; /* Make it slightly smaller */
display: inline-block; /* Place it next to Start button */
vertical-align: middle; /* Align vertically with Start button */
}

</style>

<script>
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
const resetScoreBtn = document.getElementById('reset-score-btn'); // 3. JS: SELECT THE NEW BUTTON
let lastHole;
let timeUp = false;
// 4. JS: LOAD SCORE FROM LOCALSTORAGE OR DEFAULT TO 0
let score = localStorage.getItem('whackAMoleScore') || 0;
scoreBoard.textContent = score; // Display initial score

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) {
console.log('Ah nah thats the same one bud');
return randomHole(holes);
}
</style>
lastHole = hole;
return hole;
}

function peep() {
const time = randomTime(200, 1000);
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp) peep();
}, time);
}

function startGame() {
scoreBoard.textContent = score; // Ensure score is displayed correctly at start
timeUp = false;
peep();
setTimeout(() => timeUp = true, 10000) // Game duration 10 seconds
}

function bonk(e) {
if(!e.isTrusted) return; // cheater!
score++;
this.parentNode.classList.remove('up');
scoreBoard.textContent = score;
// 5. JS: SAVE UPDATED SCORE TO LOCALSTORAGE
localStorage.setItem('whackAMoleScore', score);
}

moles.forEach(mole => mole.addEventListener('click', bonk));

<script>
</script>
// 6. JS: ADD EVENT LISTENER FOR RESET BUTTON
resetScoreBtn.addEventListener('click', () => {
score = 0; // Reset score variable
scoreBoard.textContent = score; // Update display
localStorage.removeItem('whackAMoleScore'); // Remove score from storage
});

</script>
</body>
</html>
</html>