save progress

src/game/Player.js

@@ -0,0 +1,118 @@
+export class Player {
+    // p5 = the instance, x and y are start position
+    constructor(p5, x, y){
+        this.p5 = p5;
+        this.spawnX = x;
+        this.spawnY = y;
+
+        // p5play sprite - this is the body with physics
+        this.sprite = new p5.Sprite(x,y,28,28);
+
+        // get the character image
+        this.sprite.image = '/assets/player.png';
+
+        // we dont want player to tip over
+        // lock rotation 
+        this.sprite.rotationLock = true;
+
+        // how slidey the movement is 
+        // 0 is not friction 1 is very high friction 
+        this.sprite.friction = 0; // we change later based on vibes
+
+        // we dont want the player to be bouncy... for now at least
+        this.sprite.bounciness = 0;
+
+        // game state
+        this.lives = 3;
+        this.collectedColors = []; // hex color strings
+        this.isInvincible = false; 
+        this.invincibleTimer = 0; 
+    }
+
+    // this will be called every frame from the game loop
+    // KeysDwon is an object we can use it is {left, right, jump}
+    update(keysDown){
+        const SPEED = 4; // we can change this later
+
+        if (keysDown.left) this.sprite.vel.x = -SPEED;
+        if (keysDown.right) this.sprite.vel.x = SPEED;
+
+        // If no key is pressed, slow down 
+        if (!keysDown.left && !keysDown.right){
+            this.sprite.vel.x *= 0.7; 
+        }
+
+        // jump but only if the character is on the ground 
+        // p5play built in = sprite.touching.bottom 
+        if (keysDown.jump && this.sprite.touching && this.sprite.touching.bottom){
+            this.sprite.vel.y = -11; // negative is up in p5 
+            keysDown.jump = false;
+        }
+
+        // for when the player is invincible
+        if (this.isInvincible){
+            this.invincibleTimer--;
+            if (this.invincibleTimer <= 0){
+                this.isInvincible = false;
+            }
+        }
+    }
+
+    // if player hits tar or enemym they lose a life
+    /// if no lives left, game over
+    loseLife(){
+        if (this.isInvincible) return false; 
+
+        this.lives--;
+        this.isInvincible = true; // wont gain damage a little bit after losign a life
+        this.invincibleTimer = 90; // 1.5 seconds if we are at 60fps
+        this.respawn();
+
+        return this.lives <=0; // if true = game over
+    }
+
+    // respawn at level start spawn point and be static
+    respawn(){
+        this.sprite.x = this.spawnX;
+        this.sprite.y = this.spawnY;
+        this.sprite.vel.x = 0;
+        this.sprite.vel.y = 0;
+    }
+
+    // player walks into a frament 
+    collectFragment(hexColor){
+        this.collectedColors.push(hexColor);
+        // we start getting color!
+    }
+
+    //glow effect around the player
+    // this should be called before drawing character so its under it 
+    drawGlow(){
+        if (this.collectedColors.length === 0) return;
+
+        // we want the last collected color to be the glow
+        const c = this.collectedColors[this.collectedColors.length -1]; 
+
+        this.p5.push();
+        this.p5.noStroke();
+
+        // draw a gradiet with circles that lessen in opacity 
+        // fake flow effect lol
+        // measurements based on 64 by 64 character 
+        for (let radius = 60; radius > 0; radius -= 8){
+            const alpha = (radius / 60) * 40; // max is 40
+            const col = this.p5.color(c);
+            col.setAlpha(alpha);
+            this.p5.fill(col);
+            this.p5.circle(this.sprite.x, this.sprite.y, radius*2);
+        }
+        this.p5.pop();
+    }
+
+    // flickery effect for invincibility
+    isVisible(){
+        if (!this.isInvincible) return true;
+        // show/hide every 6 frames so it blinks 
+        return Math.floor(this.invincibleTimer / 6) % 2 === 0;
+    }
+}