Skip to content

Instantly share code, notes, and snippets.

@tjr05d
Last active August 18, 2018 21:08
Show Gist options
  • Save tjr05d/ae7c28b2cfb674839831e313b5f0c441 to your computer and use it in GitHub Desktop.
Save tjr05d/ae7c28b2cfb674839831e313b5f0c441 to your computer and use it in GitHub Desktop.
Guac-a-mole Game for Wyncode One Day Coding Event
<!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">
<title>Guac-A-Mole</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1> Wyntroduction </h1>
<h3>Guac-A-Mole: <span class="score"> 0 </span></h3>
<button onClick="startGame()">Start</button>
<main>
<div class="guac-bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/bowl.png" alt="bowl" class="bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/avocado.png" alt="avocado" class="avocado">
</div>
<div class="guac-bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/bowl.png" alt="bowl" class="bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/avocado.png" alt="avocado" class="avocado">
</div>
<div class="guac-bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/bowl.png" alt="bowl" class="bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/avocado.png" alt="avocado" class="avocado">
</div>
<div class="guac-bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/bowl.png" alt="bowl" class="bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/avocado.png" alt="avocado" class="avocado">
</div>
<div class="guac-bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/bowl.png" alt="bowl" class="bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/avocado.png" alt="avocado" class="avocado">
</div>
<div class="guac-bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/bowl.png" alt="bowl" class="bowl">
<img src="https://minio.dokku-hosted.thruhere.net/wyntroduction/avocado.png" alt="avocado" class="avocado">
</div>
</main>
<script src="index.js"></script>
</body>
</html>
const avocados = document.querySelectorAll(".avocado");
const scoreBoard = document.querySelector(".score");
let score = 0;
let timeUp;
let lastAvocado;
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomAvocado(avocados) {
const index = Math.floor(Math.random() * avocados.length);
const activeAvocado = avocados[index];
if (activeAvocado === lastAvocado) {
console.log("nah fam same one!")
return randomAvocado(avocados);
}
lastAvocado = activeAvocado;
return activeAvocado;
}
function peep() {
let time = randomTime(200, 2000)
let avocado = randomAvocado(avocados);
avocado.classList.add('up');
setTimeout( () => {
avocado.classList.remove('up');
if(!timeUp) peep();
}, time)
}
function startGame() {
score = 0;
scoreBoard.textContent = 0;
timeUp = false;
peep();
setTimeout( () => {
timeUp = true
}, 15000)
}
function bonk(e) {
score++;
e.target.classList.remove('up');
scoreBoard.textContent = score;
}
avocados.forEach( avocado => {
avocado.addEventListener('click', bonk)
})
body {
background-color: aquamarine;
text-align: center;
}
button {
width: 10%;
height: 2em;
}
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 90%;
margin: 0 auto;
}
.guac-bowl {
height: 250px;
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.bowl {
width: 200px;
z-index: 10;
position: absolute;
right: 0;
left: 0;
bottom: 0;
margin: 0 auto;
text-align: center;
}
.avocado {
z-index: 0;
position: absolute;
bottom: -50px;
transition:all 0.4s;
left: 0;
right: 0;
margin: 0 auto;
}
.up {
bottom: 30px;
}
@JuhaMikkola
Copy link

This is awesome

@javabr
Copy link

javabr commented Aug 18, 2018

That’s a memorable Ocasion!

So proud of you!

Welcome to the tribe !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment