Polish game with intro, inline score, and mobile

Also: * compress images, so they load faster * Add README for Gitea/GitHub
moonfloof · Oct 21, 2023 · e1433df · e1433df
1 parent 8cfdbb5
commit e1433df
Show file tree

Hide file tree

Showing 17 changed files with 244 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Suika / Watermelon Clone
+
+![](./screenshot.png)
+
+Built using plain javascript and the [matter.js](https://github.com/liabru/matter-js) physics engine.
+
+**[Play the game](https://tombofry.github.io/suika-game/)**
diff --git a/assets/img/bg-menu.png b/assets/img/bg-menu.png
diff --git a/assets/img/btn-start.png b/assets/img/btn-start.png
diff --git a/assets/img/circle0.png b/assets/img/circle0.png
diff --git a/assets/img/circle1.png b/assets/img/circle1.png
diff --git a/assets/img/circle10.png b/assets/img/circle10.png
diff --git a/assets/img/circle2.png b/assets/img/circle2.png
diff --git a/assets/img/circle3.png b/assets/img/circle3.png
diff --git a/assets/img/circle4.png b/assets/img/circle4.png
diff --git a/assets/img/circle5.png b/assets/img/circle5.png
diff --git a/assets/img/circle6.png b/assets/img/circle6.png
diff --git a/assets/img/circle7.png b/assets/img/circle7.png
diff --git a/assets/img/circle8.png b/assets/img/circle8.png
diff --git a/assets/img/circle9.png b/assets/img/circle9.png
diff --git a/index.html b/index.html
@@ -5,7 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Suika Clone</title>
   <style>
-    @import url(https://fonts.bunny.net/css?family=bevan:400);
+    @import url(https://fonts.bunny.net/css?family=azeret-mono:700,900);
+
+    :root {
+      --col-bg: #FFD59D;
+      --col-bg-light: #FFEEDB;
+      --col-primary: #FF5300;
+      --col-primary-dark: #FF2700;
+      --col-primary-light: #FF8800;
+      --col-shadow: rgba(0, 0, 0, 0.25);
+    }
+
     * {
       box-sizing: border-box;
       padding: 0;
@@ -14,51 +24,100 @@
     }
 
     body {
-      background-color: #FFD59D;
+      background-color: var(--col-bg);
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     }
 
     .container {
-      width: 1024px;
+      width: 100%;
+      max-width: 640px;
       margin: 0 auto;
+      height: 100vh;
       display: flex;
     }
 
     #game-canvas {
-      width: 640px;
-      height: 960px;
+      position: relative;
     }
 
-    #game-stats {
-      padding: 32px;
+    #game-ui {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      user-select: none;
+      font-family: 'Azeret Mono', sans-serif;
       font-weight: 700;
-      font-family: Bevan, sans-serif;
-      color: #218504;
-      -webkit-text-fill-color: #ffffc6;
-      -webkit-text-stroke: 3px;
-    }
-
-    .game-stats-label {
-      font-size: 48px;
+      display: none;
+      transform-origin: top left;
     }
 
     #game-score {
+      position: absolute;
+      width: 100%;
+      border-bottom: 2px dotted #333;
       font-size: 84px;
+      font-weight: 900;
+      padding-left: 16px;
+      color: var(--col-bg-light);
+      text-shadow: 3px 3px 0 var(--col-primary), -3px -3px 0 var(--col-primary), -3px 3px 0 var(--col-primary), 3px -3px 0 var(--col-primary);
+    }
+
+    #game-end-container {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-items: center;
+      background-color: var(--col-shadow);
     }
 
     #game-end {
-      margin-top: 64px;
+      text-align: center;
+      padding: 32px 48px;
+      background-color: var(--col-bg-light);
+      border: 5px solid var(--col-primary);
+      box-shadow: 0 4px 32px var(--col-shadow);
+      border-radius: 32px;
+      margin: 0 auto;
+      pointer-events: initial;
+      user-select: initial;
+    }
+
+    #game-end-title {
+      font-weight: 400;
       font-size: 48px;
+      color: var(--col-primary-dark);
+    }
+
+    #game-end-link {
+      display: inline-block;
+      color: #fff;
+      font-size: 24px;
+      text-decoration: none;
+      background-color: var(--col-primary-light);
+      margin-top: 16px;
+      padding: 16px;
+      border-radius: 16px;
+      box-shadow: 4px 4px 0 var(--col-shadow);
     }
   </style>
 </head>
 <body>
   <div class="container">
-    <div id="game-canvas"></div>
-    <div id="game-stats">
-      <p class="game-stats-label">Score:</p>
-      <p id="game-score">0</p>
-      <div id="game-end"></div>
+    <div id="game-canvas">
+      <div id="game-ui">
+        <p id="game-score"></p>
+
+        <div id="game-end-container">
+          <div id="game-end">
+            <div id="game-end-title">You Lose!</div>
+            <a id="game-end-link" href="">Try Again</a>
+          </div>
+        </div>
+
+      </div>
     </div>
   </div>
   <script type="text/javascript" src="./matter.js"></script>