Skip to content
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

Disable Start button when game begins #1730

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

Disable Start button when game begins #1730

Show file tree
Hide file tree
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
62 changes: 30 additions & 32 deletions Hunt-The-Mole-Game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,43 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Whack a Mole!</title>
</head>
</head>

<body>
<h1>Whack-a-mole!</h1><span class="score">0</span>
<button onClick="startGame()">Start!</button>
<body>
<h1>Whack-a-mole!</h1>
<span class="score">0</span>
<button class="start-button" onClick="startGame()">Start!</button>

<div class="game">
<div class="hole hole1">
<div class="mole"></div>
</div>

<div class="hole hole2">
<div class="mole"></div>
</div>
<div class="hole hole1">
<div class="mole"></div>
</div>

<div class="hole hole3">
<div class="mole"></div>
</div>
<div class="hole hole2">
<div class="mole"></div>
</div>

<div class="hole hole4">
<div class="mole"></div>
</div>
<div class="hole hole3">
<div class="mole"></div>
</div>

<div class="hole hole5">
<div class="mole"></div>
</div>
<div class="hole hole4">
<div class="mole"></div>
</div>

<div class="hole hole6">
<div class="mole"></div>
</div>
<div class="hole hole5">
<div class="mole"></div>
</div>

<div class="hole hole6">
<div class="mole"></div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
</body>
</html>
72 changes: 42 additions & 30 deletions Hunt-The-Mole-Game/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
const startButton = document.querySelector('.start-button');
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
Expand All @@ -7,46 +8,57 @@ let score = 0;

//create a function to make a random time for mole to pop from the hole
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
return Math.round(Math.random() * (max - min) + min);
}

function randomHole(holes){
const index = Math.floor(Math.random() * holes.length);
const hole = holes[index];
function randomHole(holes) {
const index = Math.floor(Math.random() * holes.length);
const hole = holes[index];

//prevent same hole from getting the same number
if (hole === lastHole){
return randomHole(holes);
}
lastHole = hole;
return hole;
//prevent same hole from getting the same number
if (hole === lastHole) {
return randomHole(holes);
}
lastHole = hole;
return hole;
}

function peep() {
const time = randomTime(500, 1000); //get a random time to determine how long mole should peep
const hole = randomHole(holes); //get the random hole from the randomHole function
hole.classList.add('up'); //add the CSS class so selected mole can "pop up"
setTimeout(() => {
hole.classList.remove('up'); //make the selected mole "pop down" after a random time
if(!timeUp) {
peep();
}
}, time);
const time = randomTime(500, 1000); //get a random time to determine how long mole should peep
const hole = randomHole(holes); //get the random hole from the randomHole function
hole.classList.add('up'); //add the CSS class so selected mole can "pop up"
setTimeout(() => {
hole.classList.remove('up'); //make the selected mole "pop down" after a random time
if (!timeUp) {
peep();
}
}, time);
}

function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
setTimeout(() => timeUp = true, 15000) //show random moles for 15 seconds
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();

//disable the start button when game starts to prevent user from clicking it again (which causes extra moles to appear)
if (timeUp === false) {
startButton.disabled = true;
startButton.classList.add('disabled');
}

setTimeout(() => {
timeUp = true;
startButton.disabled = false; //remove disabled "state" when game time is up
startButton.classList.remove('disabled'); // remove disabled styles when game time is up
}, 15000); //show random moles for 15 seconds
}

function wack(e){
if(!e.isTrusted) return; //** new thing I learned */
score++;
this.parentNode.classList.remove('up'); //this refers to item clicked
scoreBoard.textContent = score;
function wack(e) {
if (!e.isTrusted) return; //** new thing I learned */
score++;
this.parentNode.classList.remove('up'); //this refers to item clicked
scoreBoard.textContent = score;
}

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