1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < title > Whack A Mole!</ title >
7+ < link href ='https://fonts.googleapis.com/css?family=Amatic+SC:400,700 ' rel ='stylesheet ' type ='text/css '>
8+ < link rel ="stylesheet " href ="style.css ">
9+ </ head >
10+
11+ < body >
12+
13+ < h1 > Whack-a-mole! < span class ="score "> 0</ span > </ h1 >
14+ < button onClick ="startGame() "> Start!</ button >
15+
16+ < div class ="game ">
17+ < div class ="hole hole1 ">
18+ < div class ="mole "> </ div >
19+ </ div >
20+ < div class ="hole hole2 ">
21+ < div class ="mole "> </ div >
22+ </ div >
23+ < div class ="hole hole3 ">
24+ < div class ="mole "> </ div >
25+ </ div >
26+ < div class ="hole hole4 ">
27+ < div class ="mole "> </ div >
28+ </ div >
29+ < div class ="hole hole5 ">
30+ < div class ="mole "> </ div >
31+ </ div >
32+ < div class ="hole hole6 ">
33+ < div class ="mole "> </ div >
34+ </ div >
35+ </ div >
36+
37+ < script >
38+ const holes = document . querySelectorAll ( '.hole' ) ;
39+ const scoreBoard = document . querySelector ( '.score' ) ;
40+ const moles = document . querySelectorAll ( '.mole' ) ;
41+ let lastHole ;
42+ let timeUp = false ;
43+ let score = 0 ;
44+ function randomTime ( min , max ) {
45+ return Math . round ( Math . random ( ) * ( max - min ) + min ) ;
46+ }
47+
48+ function randomHole ( holes ) {
49+ const index = Math . floor ( Math . random ( ) * holes . length ) ;
50+ const hole = holes [ index ] ;
51+ if ( lastHole === hole ) {
52+ return randomHole ( holes ) ;
53+ }
54+ lastHole = hole ;
55+ return hole ;
56+ }
57+
58+ function peep ( ) {
59+ const hole = randomHole ( holes ) ;
60+ const time = randomTime ( 200 , 2000 ) ;
61+ hole . classList . add ( 'up' ) ;
62+ setTimeout ( ( ) => {
63+ hole . classList . remove ( 'up' ) ;
64+ if ( ! timeUp ) {
65+ peep ( ) ;
66+ }
67+ } , time ) ;
68+ }
69+
70+ function startGame ( ) {
71+ timeUp = false ;
72+ scoreBoard . textContent = 0 ;
73+ score = 0 ;
74+ peep ( ) ;
75+ setTimeout ( ( ) => {
76+ timeUp = true ;
77+ } , 10000 )
78+ }
79+
80+ function bonk ( e ) {
81+ if ( ! e . isTrusted ) {
82+ return ;
83+ }
84+ score ++ ;
85+ this . parentNode . classList . remove ( 'up' ) ;
86+ scoreBoard . textContent = score ;
87+ }
88+
89+ moles . forEach ( mole => {
90+ mole . addEventListener ( 'click' , bonk , false ) ;
91+ } ) ;
92+ </ script >
93+ </ body >
94+
95+ </ html >
0 commit comments