|
7 | 7 | </head> |
8 | 8 | <body> |
9 | 9 |
|
10 | | - <div id="score"> |
11 | | - 0 |
12 | | - </div> |
| 10 | + <span id="score">0</span> |
| 11 | + |
13 | 12 |
|
14 | 13 | <div class="keys"> |
15 | 14 | <div data-key="65" class="key"> |
|
51 | 50 | </div> |
52 | 51 |
|
53 | 52 | <audio data-key="65" src="sounds/clap.wav"></audio> |
54 | | - <audio data-key="83" src="sounds/hihat.wav"></audio> |
55 | 53 | <audio data-key="68" src="sounds/kick.wav"></audio> |
56 | 54 | <audio data-key="70" src="sounds/openhat.wav"></audio> |
57 | 55 | <audio data-key="71" src="sounds/boom.wav"></audio> |
58 | 56 | <audio data-key="72" src="sounds/ride.wav"></audio> |
59 | 57 | <audio data-key="74" src="sounds/snare.wav"></audio> |
60 | 58 | <audio data-key="75" src="sounds/tom.wav"></audio> |
61 | 59 | <audio data-key="76" src="sounds/tink.wav"></audio> |
| 60 | + <audio data-key="83" src="sounds/hihat.wav"></audio> |
62 | 61 |
|
63 | 62 | <script> |
64 | 63 | function removeTransition(e) { |
|
76 | 75 | audio.play(); |
77 | 76 | } |
78 | 77 |
|
79 | | - function playGame(e){ |
80 | | - var question=65; |
81 | | - var answer; |
| 78 | + function playQuestion() { |
| 79 | + question = questions[Math.floor(Math.random()*questions.length)]; |
| 80 | + const audio = document.querySelector(`audio[data-key="${question}"]`); |
| 81 | + const key = document.querySelector(`div[data-key="${question}"]`); |
| 82 | + console.log(question); |
| 83 | + if (!audio) return; |
| 84 | + key.classList.add('playing'); |
| 85 | + audio.play(); |
| 86 | + } |
82 | 87 |
|
| 88 | + function playGame(e){ |
| 89 | + var nextQuestion; |
83 | 90 | answer=e.keyCode; |
| 91 | + console.log(answer); |
84 | 92 | if (question === answer){ |
85 | 93 | score+=1; |
| 94 | + |
86 | 95 | console.log('win'); |
87 | 96 | console.log(score); |
88 | | - |
| 97 | + document.getElementById('score').innerHTML=score; |
89 | 98 | }else { |
90 | 99 | console.log('lose'); |
91 | 100 | score=0; |
92 | 101 | } |
| 102 | + nextQuestion = setTimeout(function(){ playQuestion(); }, 2000); |
| 103 | + |
93 | 104 | } |
| 105 | + question=0; |
94 | 106 | score=0; |
| 107 | + answer=0; |
| 108 | + questions = Array(65, 68, 70, 71, 72, 74, 75, 76, 83); |
95 | 109 | const keys = Array.from(document.querySelectorAll('.key')); |
96 | 110 | keys.forEach(key => key.addEventListener('transitionend', removeTransition)); |
97 | 111 | window.addEventListener('keydown', playSound); |
|
0 commit comments