add camera

src/cat.js

@@ -6,6 +6,7 @@ export class Cat {
     this.targetSize = targetSize;
     this.sprite = null;
     this.loaded = false;
+    this.velocity = 24;
 
     loadImage('assets/cat.webp', (img) => {
       this.sprite = new Sprite(this.x, this.y, this.size, this.size);
@@ -39,8 +40,29 @@ export class Cat {
     if (this.sprite) this.sprite.draw();
   };
 
-  changeAni(name) {
+  changeAni(key) {
-    if (this.sprite) this.sprite.changeAni(name);
+    if (!this.sprite) return;
+    console.log('changing animation...');
+    console.log(key);
+    switch (key) {
+      case 'w':
+        this.sprite.changeAni("walk");
+        break;
+      case 'j':
+        this.sprite.changeAni("jump");
+        break;
+      case 'i':
+        this.sprite.changeAni("idle");
+        break;
+      case 'h':
+        this.sprite.changeAni("hurt");
+        break;
+      case 'd':
+        this.sprite.changeAni("death");
+        break;
+      default:
+        break;
+    };
   };
 
   setPosition(x, y) {
@@ -50,11 +72,37 @@ export class Cat {
     };
   };
 
+  moveRight() {
+    if (this.x + this.targetSize >= width) {
+      this.x = width - this.targetSize; // Ensure it doesn't go beyond the boundary
+      this.setPosition(this.x, this.y);
+      this.changeAni('i'); // Optionally change to idle if boundary reached
+      return;
+    }
+    this.x += this.velocity;  // Keep moving
+    this.setPosition(this.x, this.y);
+    console.log(`sprite's actual position: ${this._getSpritePosition()}`)
+    this.changeAni('w'); // Keep walking animation
+  }
+
+  keyPressed(key) {
+    if (key === 'ArrowRight') {
+      this.moveRight();
+    }
+  }
+  
+
   remove() {
     if (!this.sprite) return;
 
     this.sprite.remove();
     this.sprite = null;
   }
+
+  // helper
+  _getSpritePosition(){
+    console.log(`sprite's actual position: ${this.sprite.x}, ${this.sprite.y}`);
+    return (this.sprite.x, this.sprite.y);
+  }
 }
   

src/main.js

@@ -36,9 +36,14 @@ function preload(){
     Arrow.preload();
 }
 
+function keyPressed(){
+    mgr.handleEvent('keyPressed');
+}
+
 
 window.setup = setup;
 window.draw = draw;
-window.windowResized = windowResized;
+// window.windowResized = windowResized;
 window.mousePressed = mousePressed;
 window.preload = preload;
+window.keyPressed = keyPressed;

src/scenes/gameScene.js

@@ -38,14 +38,14 @@ export default function GameScene() {
 
     steps = new ControlPanel({
       name: 'steps',
-      x: width / 32 * 12,
+      x: width / 32 * 7 + 48 * 4,
       y: height / 32,
       numBoxes: 6
     });
 
     loops = new ControlPanel({
       name: 'loop',
-      x: width / 32 * 21,
+      x: width / 32 * 7 + 48 * 11.5,
       y: height / 32,
       numBoxes: 4
     })
@@ -67,13 +67,15 @@ export default function GameScene() {
     fill(colors.secondary);
     rect(width / 2, height - 100 / 2, width, 80);
 
-    // Sprite
-    cat.draw();
     runButton.draw();
     blocks.draw();
     steps.draw();
     loops.draw();
     
+    // Sprite
+    camera.on();
+    cat.draw();
+    camera.off();
   };
 
   this.onResize = () => {
@@ -82,4 +84,15 @@ export default function GameScene() {
     blocks.setPosition(width / 32, height / 32);
     steps.setPosition((width / 32) * 4, height / 32);
   }
+
+  this.keyPressed = () => {
+    const _key = key;
+    console.log(`key passed: ${_key}`);
+    if (_key == "ArrowRight") {
+      cat.keyPressed(_key);
+    } else {
+      cat.changeAni(_key);
+    }
+    
+  }
 }