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.

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

Whack-a-mole game #166

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
1 change: 1 addition & 0 deletions 66. Whack-a-mole/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# whack-a-mole
Binary file added 66. Whack-a-mole/dirt.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions 66. Whack-a-mole/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!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="styles.css">
<title>Whack a Mole!</title>
</head>

<body>
<h1 class="head1">Whack-a-mole!</h1><span class="score">0</span>
<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 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>
<script src="script.js"></script>
</body>

</html>
Binary file added 66. Whack-a-mole/mole.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 66. Whack-a-mole/mole.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions 66. Whack-a-mole/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
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);
}

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;
}

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);
}

function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
setTimeout(() => timeUp = true, 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;
}

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

159 changes: 159 additions & 0 deletions 66. Whack-a-mole/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
html {
font-size: 35px;
background: #8BBCCC;
}

body {
padding: 0;
margin: 0;
text-align: center;
}

.head1 {
font-family: JetBrains mono;
}

h1 {
text-align: center;
font-size: 100px;
line-height: 1;
margin-bottom: 0;
}

.score {
background: #FF9F29;
padding: 0 48px;
line-height: 1;
border-radius: 16px;
color: black;
margin-left: 15px;
}

.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.png) bottom center no-repeat;
background-size: contain;
content: '';
width: 100%;
height: 90px;
position: absolute;
z-index: 2;
bottom: -30px;
}

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

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

button {
width: 175px;
font-size: 35px;
height: 70px;
color: black;
background-color: #FF9F29;
border-radius: 10px;
margin-left: 20px;
margin-top: 90px;
}

@media (min-width: 667px) and (max-width: 1024px) {

h1 {
display: none;
}

.score {
background: blue;
padding: 0 12px;
line-height: 1;
border-radius: 16px;
color: #fff;
font-size: 40px;
margin-left: 20px;
}

.hole.up .mole {
top: 17px;
}
}

@media (max-width: 667px) {

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

.score {
width: 35px;
font-size: 15px;
height: 40px;
color: #fff;
background-color: blue;
border-radius: 10px;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
}

button {
margin: 10px 10px 10px 10px;
height: 40px;
width: 75px;
font-size: 15px;
}

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

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

.hole.up .mole {
top: 50px;
}
}