Add game start screen and restart functionality

src/main.js

@@ -2,6 +2,9 @@ import kaboom from "kaboom"
 import { createClient } from "@supabase/supabase-js";
 
 async function main() {
+  let score = 0;
+  let time = 0;
+
   const kb = kaboom({
     // width: 640,
     // height: 480,
@@ -10,6 +13,8 @@ async function main() {
     // background: [ 0, 0, 0, 0 ],
     maxFPS: 30,
     global: false,
+    // stretch: true,
+    scale: 0.8,
   });
 
   kb.volume(0.5);
@@ -42,6 +47,19 @@ async function main() {
     },
   });
 
+  kb.loadSprite("forest", "tiles/Tileset_Forest_10x.png", {
+    sliceX: 4,
+    sliceY: 1,
+    anims: {
+      move: {
+        from: 0,
+        to: 3,
+        loop: true,
+        speed: 5,
+      },
+    },
+  });
+
   kb.loadSprite("ground", "tiles/Tileset_Cropped_10x.png", {
     sliceX: 2,
     sliceY: 1,
@@ -72,11 +90,47 @@ async function main() {
   // const SPEED = 320;
   const JUMP_FORCE = 700;
 
-  kb.scene("game", () => {
-    let score = 0;
-    let time = 0;
+  kb.scene("splash", () => {
+    kb.onUpdate(() => kb.setCursor("default"));
+
+    kb.add([
+      kb.text("Dodge Dodo", {
+        font: "monospace",
+        size: 48,
+      }),
+      kb.pos(kb.width() / 2, kb.height() / 2 - 64),
+      kb.anchor("center"),
+    ]);
+
+    const btn = kb.add([
+      kb.rect(200, 48, { radius: 4 }),
+      kb.pos(kb.width() / 2, kb.height() / 2),
+      kb.area(),
+      kb.scale(1),
+      kb.anchor("center"),
+      kb.outline(4),
+    ]);
+
+    btn.add([
+      kb.text("Start", {
+        font: "monospace",
+        size: 24,
+      }),
+      kb.anchor("center"),
+      kb.color(0, 0, 0),
+    ]);
+
+    btn.onHoverUpdate(() => {
+      kb.setCursor("pointer");
+    });
+
+    btn.onClick(() => {
+      kb.go("game");
+    });
+  });
 
-    kb.setGravity(920);
+  kb.scene("game", () => {
+    kb.setGravity(900);
 
     const player = kb.add([
       kb.sprite("dodo"),
@@ -86,6 +140,7 @@ async function main() {
       kb.area({ scale: kb.vec2(0.65, 1), offset: kb.vec2(10, 0) }),
       kb.body(),
       kb.doubleJump(1),
+      kb.z(10),
     ]);
 
     player.flipX = true;
@@ -103,8 +158,21 @@ async function main() {
       kb.area(),
       kb.outline(1),
       kb.pos(0, kb.height() - FLOOR_HEIGHT * 3),
-      // kb.anchor("botleft"),
       kb.body({ isStatic: true }),
+      kb.z(5),
+    ]);
+
+    kb.add([
+      kb.sprite("forest", {
+        tiled: true,
+        width: kb.width(),
+        height: FLOOR_HEIGHT * 3,
+        frame: 0,
+      }),
+      kb.area(),
+      kb.outline(1),
+      kb.pos(0, kb.height() - FLOOR_HEIGHT * 3 * 2),
+      kb.z(2),
     ]);
 
     const spawnEnemy = () => {
@@ -117,6 +185,7 @@ async function main() {
         kb.body(),
         kb.offscreen({ destroy: true }),
         kb.move(kb.LEFT, 240 + Math.floor(time) * 2),
+        kb.z(10),
         "hunter",
       ]);
 
@@ -151,16 +220,25 @@ async function main() {
       player.play("walk");
     });
 
-    kb.onKeyPress("space", () => {
+    let jumpCount = 0;
+    const jump = () => {
+      jumpCount++;
       if (player.isGrounded()) {
         player.jump(JUMP_FORCE);
-        player.play("jump");
       } else {
         player.doubleJump(JUMP_FORCE * 0.8);
+      }
+
+      if (player.isJumping()) {
         player.play("jump");
+        kb.play("jump");
       }
+    };
 
-      kb.play("jump");
+    kb.onKeyPress("space", jump);
+
+    kb.onTouchStart((pos, t) => {
+      jump();
     });
 
     const scoreLabel = kb.add([
@@ -170,6 +248,8 @@ async function main() {
         align: "right",
       }),
       kb.pos(24, 24),
+      kb.z(100),
+      kb.fixed(),
     ]);
 
     // kb.debug.inspect = true;
@@ -193,20 +273,33 @@ async function main() {
       kb.anchor("center"),
     ]);
 
+    // add score
     kb.add([
-      kb.text("Press space to restart", {
+      kb.text(`Score: ${Math.floor(score)}`, {
         font: "monospace",
       }),
       kb.pos(kb.width() / 2, kb.height() / 2 + 32),
       kb.anchor("center"),
     ]);
 
+    kb.add([
+      kb.text("Press space to restart", {
+        font: "monospace",
+      }),
+      kb.pos(kb.width() / 2, kb.height() / 2 + 64),
+      kb.anchor("center"),
+    ]);
+
     kb.onKeyPress("space", () => {
       kb.go("game");
     });
+
+    kb.onTouchStart((pos, t) => {
+      kb.go("game");
+    });
   });
 
-  kb.go("game");
+  kb.go("splash");
 }
 
 main();