Color-Memory-Game-X/index.html at main · PseudoSyntax/Color-Memory-Game-X · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Color Game X!</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>
  <body>
    <h1>Bongo Piano</h1>


    <p>
      Welcome to the game! Repeat back the pattern of the colors pressed by bongo cat by pressing the buttons.
    </p>
<button id="startBtn" onclick="startGame()">Start</button>
<button id="stopBtn" onclick="stopGame()" class="hidden">Stop</button>
  <audio id="sound1" src="assets/mega.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>

    <div id="gameButtonArea">
    <button id="button1" onclick="guess(1)" onmousedown="startTone(1)" onmouseup="stopTone()"></button>
    <button id="button2" onclick="guess(2)" onmousedown="startTone(2)" onmouseup="stopTone()"></button>
    <button id="button3" onclick="guess(3)" onmousedown="startTone(3)" onmouseup="stopTone()"></button>
    <button id="button4" onclick="guess(4)" onmousedown="startTone(4)" onmouseup="stopTone()"></button>
    <button id="button5" onclick="guess(5)" onmousedown="startTone(5)" onmouseup="stopTone()"></button>
    <button id="button6" onclick="guess(6)" onmousedown="startTone(6)" onmouseup="stopTone()"></button>
    <button id="button7" onclick="guess(7)" onmousedown="startTone(7)" onmouseup="stopTone()"></button>
    <button id="button8" onclick="guess(8)" onmousedown="startTone(8)" onmouseup="stopTone()"></button>
    <button id="button9" onclick="guess(9)" onmousedown="startTone(9)" onmouseup="stopTone()"></button>
    <button id="button10" onclick="guess(10)" onmousedown="startTone(10)" onmouseup="stopTone()"></button>
    <button id="button11" onclick="guess(11)" onmousedown="startTone(11)" onmouseup="stopTone()"></button>
    <button id="button12" onclick="guess(12)" onmousedown="startTone(12)" onmouseup="stopTone()"></button>
    <button id="button13" onclick="guess(13)" onmousedown="startTone(13)" onmouseup="stopTone()"></button>
    <button id="button14" onclick="guess(14)" onmousedown="startTone(14)" onmouseup="stopTone()"></button>
    <button id="button15" onclick="guess(15)" onmousedown="startTone(15)" onmouseup="stopTone()"></button>
    <button id="button16" onclick="guess(16)" onmousedown="startTone(16)" onmouseup="stopTone()"></button>
    <button id="button17" onclick="guess(17)" onmousedown="startTone(17)" onmouseup="stopTone()"></button>
    <button id="button18" onclick="guess(18)" onmousedown="startTone(18)" onmouseup="stopTone()"></button>
    <button id="button19" onclick="guess(19)" onmousedown="startTone(19)" onmouseup="stopTone()"></button>
    <button id="button20" onclick="guess(20)" onmousedown="startTone(20)" onmouseup="stopTone()"></button>
    <button id="button21" onclick="guess(21)" onmousedown="startTone(21)" onmouseup="stopTone()"></button>
    <button id="button22" onclick="guess(22)" onmousedown="startTone(22)" onmouseup="stopTone()"></button>
    <button id="button23" onclick="guess(23)" onmousedown="startTone(23)" onmouseup="stopTone()"></button>


          <button id="button0" onclick="guess(0)" onmousedown="startTone(0)" onmouseup="stopTone()"></button>
    </div>
    <iframe style="display: none;" width="560" height="315" src="https://www.youtube.com/embed/wDgQdr8ZkTw?rel=0&autoplay=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <!-- If You see this change the 0 to a 1 on the auto play to hear real song-->


  </body>
</html>