Memory-Game/index.html at main · deletidev/Memory-Game · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />
    <link rel="icon" type="image/svg+xml" href="/favicon-svg.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Memory Game</title>
  </head>
  <body>
    <div id="app">
      <h1>Memory</h1>
      <div class="display">
        <p class="intentos">
          Moves: <span id="intentos-number" class="intentos__number"></span>
        </p>
        <button id="sonidos" class="sound">
          <img src="/sound-high.svg" alt="" />
        </button>
      </div>

      <div class="cards">
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="0">
            <img src="" alt="" class="card__img" data-indice-id="0" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="1">
            <img src="" alt="" class="card__img" data-indice-id="1" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="2">
            <img src="" alt="" class="card__img" data-indice-id="2" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="3">
            <img src="" alt="" class="card__img" data-indice-id="3" />
          </div>
        </div>

        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="4">
            <img src="" alt="" class="card__img" data-indice-id="4" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="5">
            <img src="" alt="" class="card__img" data-indice-id="5" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="6">
            <img src="" alt="" class="card__img" data-indice-id="6" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="7">
            <img src="" alt="" class="card__img" data-indice-id="7" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="8">
            <img src="" alt="" class="card__img" data-indice-id="8" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="9">
            <img src="" alt="" class="card__img" data-indice-id="9" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="10">
            <img src="" alt="" class="card__img" data-indice-id="10" />
          </div>
        </div>
        <div class="card__perspective">
          <div id="card" class="card" data-state="vuelta" data-indice-id="11">
            <img src="" alt="" class="card__img" data-indice-id="11" />
          </div>
        </div>
        <div id="mensaje" class="mensaje oculto">
          <h2>Congrats, you win!</h2>
        </div>
      </div>
      <button id="empezar-partida" class="btn">Start game</button>
    </div>

    <audio id="sound-card" src="/sonidos/carta1.mp3"></audio>
    <audio id="sound-match" src="/sonidos/pareja1.mp3"></audio>
    <audio id="sound-error" src="/sonidos/error.mp3"></audio>
    <audio id="sound-win" src="/sonidos/ganar-partida.mp3"></audio>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>