118 lines
3.7 KiB
JavaScript
118 lines
3.7 KiB
JavaScript
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;
|
|
}
|
|
} |