Ex30 - Whack a mole

fthebaud · fthebaud · commit be865947f672 · 2017-01-20T16:22:15.000+01:00
diff --git a/30 - Whack A Mole/index.html b/30 - Whack A Mole/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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">
+</head>
+<body>
+
+  <h1>Whack-a-mole! <span class="score">0</span></h1>
+  <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" charset="utf-8"></script>
+
+</body>
+</html>
diff --git a/30 - Whack A Mole/script.js b/30 - Whack A Mole/script.js
@@ -0,0 +1,59 @@
+'use strict';
+
+const scoreBoard = document.querySelector('.score');
+const holes = document.querySelectorAll('.hole');
+const moles = document.querySelectorAll('.mole');
+
+let lastHole;
+let timesup = true;
+let score = 0;
+
+function randtime(min, max) {
+  // randtime = rand * (max - min) + min
+  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('same, retry !');
+     randomHole(holes);
+  }
+  lastHole = hole;
+  return hole;
+}
+
+function peep() {
+  const time = randtime(200, 1000);
+  const hole = randomHole(holes);
+  hole.classList.add('up');
+  setTimeout(() => {
+    hole.classList.remove('up');
+    if (!timesup) peep(); // eslint-disable-line curly
+  }, time);
+}
+
+function startGame() {
+  score = 0;
+  scoreBoard.textContent = 0;
+  timesup = false;
+  peep();
+  setTimeout(() => {
+    timesup = true;
+  }, 10000);
+}
+
+function bonk(event) {
+  if (!event.isTrusted) return; // eslint-disable-line curly
+  score++;
+  this.classList.remove('up');
+  scoreBoard.textContent = score;
+}
+
+document.querySelector('button').addEventListener('click', startGame);
+
+moles.forEach(mole => {
+  mole.addEventListener('click', bonk);
+});
diff --git a/30 - Whack A Mole/style.css b/30 - Whack A Mole/style.css
@@ -67,3 +67,8 @@ h1 {
 .hole.up .mole {
   top:0;
 }
+
+button {
+  position: relative;
+  left: 50%;
+}

Original file line number	Diff line number	Diff line change
`@@ -67,3 +67,8 @@ h1 {`
`67`	`67`	`.hole.up .mole {`
`68`	`68`	`top:0;`
`69`	`69`	`}`
	`70`	`+`
	`71`	`+button {`
	`72`	`+ position: relative;`
	`73`	`+ left: 50%;`
	`74`	`+}`