evolution-suika.github.io/index.html at main · osnHQ/evolution-suika.github.io · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Evolution Suika</title>
    <link rel="stylesheet" href="styles.css" />
    <!-- Matter.js Physics Engine -->
    <script src="https://cdn.jsdelivr.net/npm/matter-js@0.20.0/build/matter.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="start-screen" class="overlay visible">
        <div class="card">
          <h1>Evolution Suika</h1>
          <p>Drag to aim, release to drop. Merge creatures through evolution. Don’t let them cross the top!</p>
          <button id="play-button">Play</button>
        </div>
      </div>

      <div id="game-ui">
        <div id="hud">
          <div id="score-block">
            <div id="score-label">Score</div>
            <div id="score-value">0</div>
          </div>
          <div id="best-block">
            <div class="best-label">Best</div>
            <div id="best-value">0</div>
          </div>
          <button id="sound-toggle" class="icon-button" aria-label="Toggle sound">
            🔊
          </button>
          <div id="next-container">
            <div class="next-label">Next</div>
            <div id="next-preview"></div>
          </div>
        </div>
        <div id="game-container">
          <!-- Matter.js will inject canvas here -->
        </div>
      </div>

      <div id="game-over-screen" class="overlay">
        <div class="card">
          <h2>Game Over</h2>
          <p class="summary-line">
            Final Score:
            <span id="final-score">0</span>
          </p>
          <p class="summary-line">
            Highest This Run:
            <span id="final-highest">Cell</span>
          </p>
          <p class="summary-line">
            Best Score:
            <span id="final-best-score">0</span>
          </p>
          <p class="summary-line">
            Lifetime Highest:
            <span id="final-lifetime-highest">Cell</span>
          </p>
          <p id="tip-line">Tip: Merge early to avoid tall stacks.</p>
          <button id="restart-button">Restart</button>
        </div>
      </div>

      <div id="drop-indicator"></div>
      <div id="screen-flash"></div>

      <div id="tutorial-overlay" class="overlay">
        <div class="card">
          <h2>How to Play</h2>
          <p>1. Drag left/right to aim your creature.</p>
          <p>2. Release to drop it into the pit.</p>
          <p>3. Merge identical creatures to evolve them. Don’t let the stack reach the top!</p>
          <button id="tutorial-ok">Got it</button>
        </div>
      </div>
    </div>

    <script src="game.js"></script>
  </body>
  </html>