fix bug @ startScreen

src/cat.js

@@ -228,7 +228,7 @@ export class Cat {
     let h = this.sprite.height;
 
     rectMode(CENTER);
-    rect(this.sprite.x, this.sprite.y, w, h);
+    // rect(this.sprite.x, this.sprite.y, w, h);
   };
 
   changeAni(key) {

src/main.js

@@ -4,6 +4,7 @@ import { ClickableArrow } from './components/ClickableArrow.js';
 import StartScene from './scenes/startScene.js';
 import GameScene from './scenes/gameScene.js';
 import Level1 from './scenes/lvl1.js';
+import Level2 from './scenes/lvl2.js';
 
 
 let mgr;
@@ -17,9 +18,11 @@ function setup(){
 
     mgr = new SceneManager();
     mgr.addScene(StartScene);
-    mgr.addScene(GameScene);
+    // mgr.addScene(GameScene);
     mgr.addScene(Level1);
-    mgr.showScene(Level1);
+    mgr.addScene(Level2);
+
+    mgr.showScene(StartScene);
 };
 
 function draw(){

src/scenes/lvl1.js

@@ -109,6 +109,7 @@ export default function Level1() {
 
     flag = new Flag(12 * worldBlockSize, height - worldBlockSize * 4, catSize * 0.75);
 
+    // Ground (Physical)
     for (let i = 0; i < width; i += worldBlockSize) {
       let b = new Sprite(
           i + worldBlockSize / 2,
@@ -142,7 +143,16 @@ export default function Level1() {
     }
 
     // Sprites
-    cat = new Cat(2.25 * worldBlockSize, height - catSize * 13/12, catSize, blocksGround, blockSprites, worldBlockSize);
+    cat = new Cat(
+      2.25 * worldBlockSize,
+      height - (catSize * 13) / 12,
+      catSize,
+      blocksGround,
+      blockSprites,
+      worldBlockSize
+    );
+
+    // x, y, targetSize, groundRef, obstacleRefs, worldBlockSize
   };
 
   this.draw = () => {

src/scenes/startScene.js

@@ -2,15 +2,16 @@ import { colors } from '../utils/theme.js';
 import { Cat } from '../_cat.js';
 import { buttonL } from '../utils/theme.js';
 import GameScene from './gameScene.js';
+import { MyButton } from '../utils/components.js';
+import Level1 from './lvl1.js';
 
 export default function StartScene() {
+  const worldBlockSize = 125;
+  const groundHeight = worldBlockSize;
+
   let cat;
-  let button = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-  };
+  let blocksGround = [];
+
   let startButton;
 
   this.name = "StartScene";
@@ -18,31 +19,34 @@ export default function StartScene() {
   this.setup = () => {
     cat = new Cat(width / 2, height - 200, 200);
     
-    startButton = new Clickable();
+    startButton = new MyButton({
+      x: width/2,
+      y: height/2 + 50,
+      text: 'start',
+      mode: 'CENTER',
+      style: buttonL,
+      onPress: () => {
+          console.log("press");
+          this.sceneManager.showScene(Level1);
+      }
+    });
 
-    // Position and mode
-    startButton.mode = "CENTER";
-    startButton.locate(width/2, height/2 + 50);
+    // Ground (physical)
+    for (let i = 0; i < width; i += worldBlockSize) {
+      let b = new Sprite(
+          i + worldBlockSize / 2,
+          height - groundHeight / 2,
+          worldBlockSize,
+          worldBlockSize,
+          'static'
+      );
+      const i_cnt = Math.floor(i / worldBlockSize);
 
-    // Size
-    startButton.width = buttonL.width;
-    startButton.height = buttonL.height;
-
-    // Visual styling
-    startButton.color = buttonL.color;
-    startButton.stroke = buttonL.stroke;
-    startButton.strokeWeight = buttonL.strokeWeight;
-
-    // Text properties
-    startButton.text = 'start';
-    startButton.textFont = buttonL.textFont;
-    startButton.textSize = buttonL.textSize;
-    startButton.textColor = buttonL.textColor;
-
-    startButton.onPress = () => {
-      console.log("press");
-      this.sceneManager.showScene(GameScene);
-    };
+      b.color = (i_cnt % 2) === 0 ? color(colors.secondary) : color(colors.darkRed);
+      b.strokeWeight = 5;
+      b.stroke = (i_cnt % 2) === 0 ? color(colors.darkRed) : color(colors.darkRed);
+      blocksGround.push(b);
+    }
   };
 
   this.draw = () => {
@@ -55,24 +59,6 @@ export default function StartScene() {
 
     text("rUn ThE cAT!", width / 2, height / 2 - 100);
 
-    // Button
-    // fill(colors.tertiary);
-    // stroke(colors.secondary);
-    // strokeWeight(3);
-    // rectMode(CENTER);
-    // rect(width / 2, height / 2 + 50, 300, 75, 10);
-    // rectMode(CORNER);
-
-    // button.x = width / 2 - 300 / 2;
-    // button.y = height / 2 + 50 - 75 / 2;
-    // button.width = 300;
-    // button.height = 75;
-
-    // fill(colors.secondary);
-    // noStroke();
-    // textSize(32);
-    // text("Start", width / 2, height / 2 + 60);
-
     // Ground
     fill(colors.secondary);
     rectMode(CENTER);