Skip to content

Commit

Permalink
Hp-Bar and Lava Rising Significant Changes - Enemies Team (#77)
Browse files Browse the repository at this point in the history
* Hp Bar

* fix

* style hp bar with width and center

* hp bar style and center and goomba bounce

* center bar in proportion

* create pixel art island

* island fix border

* hp bar styling fix (border radius, border style). make canvas better and have hpbar fit canvas for bettter future use

* fix center

* adding flying island

* collison fix

* FlyingIsland done!

* image fix

* Fix scaling and position of Ancient Greece flying island endpoint

* lava.js created, z-index modified so that lava is in front of everything, lava successfully works (anvay + yash)

* player can die to lava (anvay + yash)

* speed of lava optimized for player

* Timer for lava to rise

* create alert on screen + move text that shows how much time is left

* fix flyingIsland collision

* make Hp Bar disappear when Boss is died

* text styling

* player cant jump in boss

* beautify lava warning text

* 5 hits to kill boss

* Fix flag collisons & makes the player jump up when it hits the lava

* player HP bar for lava (temporary)

* player has three lives (FIX)

* player change

* fix

* Add files via upload

---------

Co-authored-by: TianbinLiu <[email protected]>
Co-authored-by: Hypernova101 <[email protected]>
Co-authored-by: illuminati1618 <[email protected]>
Co-authored-by: Mihir Bapat <[email protected]>
  • Loading branch information
5 people authored May 16, 2024
1 parent 9335fac commit 6f1bc1f
Show file tree
Hide file tree
Showing 19 changed files with 1,133 additions and 34 deletions.
5 changes: 5 additions & 0 deletions _sass/minima/dracula/platformer-styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,11 @@ $dt-leaderboard: #B385EB;
}
}
}

canvas #hpBar {
width: 100px;
height: 15px;
}
/// Input mixin
/// @description This mixin sets some common styles (e.g. color, height) for the input fields, avoiding duplication of common styles in each input class.
/// @param {Number} width - The width of the input field, how wide it is.
Expand Down
66 changes: 57 additions & 9 deletions assets/js/platformer3x/Boss.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import GameEnv from './GameEnv.js';
import Character from './Character.js';
import GameControl from './GameControl.js';
import Enemy from './Enemy.js';
import GameLevel from './GameLevel.js';


export class Boss extends Enemy {
Expand All @@ -15,7 +16,46 @@ export class Boss extends Enemy {
this.counter = data?.animationSpeed;

this.enemySpeed();

//Hp Bar
this.maxHp = 100; // Maximum health points
this.currentHp = 100; // Current health points
this.hpBar = document.createElement("canvas");
this.hpBar.width = 100;
this.hpBar.height = 15;
document.querySelector("#canvasContainer").appendChild(this.hpBar);
}

drawHpBox() { //Hp box
// Position and size of the health bar
const hpBarWidth = this.hpBar.width; // The width of the health bar matches the boss's width
const hpBarHeight = this.hpBar.height; // A fixed height for the health bar
const hpBarX = (this.x + this.canvasWidth/2 - this.hpBar.width/2); // Position above the boss
const hpBarY = this.y - this.canvasHeight/40; // 20 pixels above the boss

this.hpBar.id = "hpBar";
// Calculate health percentage
const hpPercentage = this.currentHp / this.maxHp;

// Draw the background (gray)
this.hpBar.getContext('2d').fillStyle = 'gray';
this.hpBar.getContext('2d').fillRect(0, 0, hpBarWidth, hpBarHeight);

// Draw the health bar (green, based on current health)
this.hpBar.getContext('2d').fillStyle = 'green';
this.hpBar.getContext('2d').fillRect(0, 0, hpBarWidth * hpPercentage, hpBarHeight);


this.hpBar.style.position = 'absolute'; //code from Flag.js, define the style of the Hp Bar
this.hpBar.style.left = `${hpBarX}px`;
this.hpBar.style.top = `${hpBarY}px`;
this.hpBar.style.borderRadius = '5px';
this.hpBar.style.width = `${hpBarWidth}px`;
this.hpBar.style.height = `${hpBarHeight}px`;
this.hpBar.style.border = '2px solid black';

}

//overwrite the method
updateFrameX() {
// Update animation frameX of the object
Expand Down Expand Up @@ -46,6 +86,7 @@ export class Boss extends Enemy {
}
} else {
this.destroy();
this.hpBar.remove();
}
}

Expand Down Expand Up @@ -103,7 +144,7 @@ export class Boss extends Enemy {

this.randomEvent();


this.drawHpBox();
}

//overwrite the method
Expand Down Expand Up @@ -135,15 +176,22 @@ export class Boss extends Enemy {
this.state.animation = "attackR";
this.speed = 0;
}
else if(this.collisionData.touchPoints.other.bottom && this.immune == 0){
this.state.animation = "death";
if(!this.state.isDying && this.state.animation == "death"){
this.frameX = 0;
else if(this.collisionData.touchPoints.other.bottom && this.immune == 0){
if(this.currentHp == 0){
this.state.animation = "death";
if(!this.state.isDying && this.state.animation == "death"){
this.frameX = 0;
}
this.state.isDying = true;
GameEnv.invincible = true;
GameEnv.goombaBounce = true;
GameEnv.playSound("goombaDeath");
}
this.state.isDying = true;
GameEnv.invincible = true;
GameEnv.goombaBounce = true;
GameEnv.playSound("goombaDeath");
else{
this.currentHp -= 20;
GameEnv.goombaBounce = true;
}

}

}
Expand Down
42 changes: 42 additions & 0 deletions assets/js/platformer3x/BossItem.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import GameControl from './GameControl.js';
import GameEnv from './GameEnv.js';
import JumpPlatform from './JumpPlatform.js';

export class BossItem extends JumpPlatform {
constructor(canvas, image, data, xPercentage, yPercentage, name) {
super(canvas, image, data, xPercentage, yPercentage, name);
}

// Required, but no update action
update() {
super.update();
}

collisionAction() {
//collision only detects mario and it only applies to the item block
if (this.collisionData.touchPoints.other.id === "player" && this.name === "itemBlock") {
if (this.relativeX === 0 || this.relativeX === this.canvas.width) {
if (this.relativeX === 0) {
GameControl.startRandomEvent("zombie");
//console.log("randomEventtriggered", GameControl.randomEventId);
};
this.relativeX = -1 * this.canvas.width;
} else if (this.relativeX === "") {
this.relativeX = 0;
}
}
}

// Set platform position
size() {
super.size();

}

// Draw position is always 0,0
draw() {
super.draw();
}
}

export default BossItem;
4 changes: 2 additions & 2 deletions assets/js/platformer3x/Flag.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export class Flag extends GameObject {
const scaledHeight = GameEnv.innerHeight * (480/832);
// Formula for Width is scaled: scaledWidth/scaledHeight == this.width/this.height
const scaledWidth = scaledHeight * this.aspect_ratio;
const flagX = .82 * GameEnv.innerWidth;
const flagY = (GameEnv.bottom - (.25 * scaledHeight));
const flagX = .86 * GameEnv.innerWidth;
const flagY = (GameEnv.bottom - (.99999 * scaledHeight));

// set variables used in Display and Collision algorithms
this.bottom = flagY;
Expand Down
42 changes: 42 additions & 0 deletions assets/js/platformer3x/FlyingIsland.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import GameObject from './GameObject.js';
import GameEnv from './GameEnv.js';
import GameControl from './GameControl.js';
import BlockPlatform from './BlockPlatform.js';

export class FlyingIsland extends BlockPlatform {
constructor(canvas, image, data, xPercentage, yPercentage) {
super(canvas, image, data, xPercentage, yPercentage);
}

update() {
super.update();
}

draw() {
super.draw();
}

size() {
// Formula for Height should be on constant ratio, using a proportion of 832
const scaledWidth = this.canvas.width*0.75;
const scaledHeight = this.canvas.height*0.75;

const platformX = this.platformX;
const platformY = (GameEnv.bottom - scaledHeight) * this.platformY;
// set variables used in Display and Collision algorithms
this.bottom = platformY;
this.collisionHeight = scaledHeight;
this.collisionWidth = scaledWidth;
//this.canvas.width = this.width;
//this.canvas.height = this.height;
this.canvas.style.width = `${scaledWidth}px`;
this.canvas.style.height = `${scaledHeight}px`;
this.canvas.style.position = 'absolute';
this.canvas.style.left = `${platformX}px`;
this.canvas.style.top = `${platformY}px`;
}

}


export default FlyingIsland;
6 changes: 6 additions & 0 deletions assets/js/platformer3x/GameControl.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
* - call or add listener to GameControl.startTimer() to start the game timer.
*/
import GameEnv from './GameEnv.js';
import GameLevel from './GameLevel.js';
import GameSetup from './GameSetup.js';
import Socket from './Multiplayer.js';
import PlayerZombie from './PlayerZombie.js';
import SettingsControl from "./SettingsControl.js";

/**
Expand Down Expand Up @@ -192,6 +195,9 @@ const GameControl = {
* 3: Let the boss to walk right
*/
}
else if (event === "zombie"){
GameEnv.playerChange = true;
}
},

endRandomEvent() {
Expand Down
2 changes: 2 additions & 0 deletions assets/js/platformer3x/GameEnv.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ export class GameEnv {
static time = 0;
static darkMode = true

static playerChange = false;

static claimedCoinIds = []


Expand Down
30 changes: 28 additions & 2 deletions assets/js/platformer3x/GameSetup.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,17 @@ import Snowman from './Snowman.js';
import Cerberus from './Cerberus.js';
import PlayerGreece from './PlayerGreece.js';
import Flag from './Flag.js';
import Lava from './Lava.js';
import Dragon from './Dragon.js';
import Star from './Star.js';
import Dementor from './Dementor.js';
import Draco from './Draco.js';
import Boss from './Boss.js';
import FlyingIsland from './FlyingIsland.js';
import PlayerBaseOneD from './PlayerBaseOneD.js';
import PlayerZombie from './PlayerZombie.js';
import BossItem from './BossItem.js';
import PlayerBoss from './PlayerBoss.js';

//test comment

Expand Down Expand Up @@ -264,6 +270,7 @@ const GameSetup = {
yellowredpattern: { src: "/images/platformer/platforms/yellowredpattern.jpg" },
lionpattern: { src: "/images/platformer/platforms/lionpattern.jpg" },
turf: { src: "/images/platformer/platforms/turf.png" },
island: { src: "/images/platformer/platforms/island.png" },
block: { src: "/images/platformer/platforms/brick_block.png" }, //MAY need 3 new variables: sizeRatio, widthRatio, and heightRatio
itemBlock: {
src: "/images/platformer/platforms/mario_block_spritesheet_v2.png",
Expand Down Expand Up @@ -427,6 +434,21 @@ const GameSetup = {
runningLeft: { row: 5, frames: 3, idleFrame: { column: 1, frames: 0 } },
runningRight: { row: 4, frames: 3, idleFrame: { column: 1, frames: 0 } },
},
zombie: { //one direction player
src: "/images/platformer/sprites/zombie.png",
width: 130,
height: 70,
scaleSize: 60,
speedRatio: 0.7,
idle: { row: 2, frames: 11, idleFrame: { column: 1, frames: 0 } },
walk: { row: 3, frames: 11 }, // default - right Movement
run: { row: 3, frames: 11 }, // default - right Movement
jump: { row: 3, frames: 11 }, // default - right Movement
attack: { row: 4, min: 6,frames: 11 },
jumpAttack : { row: 6, frames: 11 },
death : { row: 11, frames: 11 },
hitbox: { widthPercentage: 0.3, heightPercentage: 0.8 }
},
},
enemies: {
goomba: {
Expand Down Expand Up @@ -700,14 +722,16 @@ const GameSetup = {
//{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.16 },
//{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.1 },
//{ name: 'sandstone', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.sandstone, xPercentage: 0.75, yPercentage: 0.06 },
{ name: 'cerberus', id: 'cerberus', class: Cerberus, data: this.assets.enemies.cerberus, xPercentage: 0.2, minPosition: 0.05, difficulties: ["normal", "hard", "impossible"] },
{ name: 'cerberus', id: 'cerberus', class: Cerberus, data: this.assets.enemies.cerberus, xPercentage: 0.2, minPosition: 0.09, difficulties: ["normal", "hard", "impossible"] },
{ name: 'cerberus', id: 'cerberus', class: Cerberus, data: this.assets.enemies.cerberus, xPercentage: 0.5, minPosition: 0.3, difficulties: ["normal", "hard", "impossible"] },
{ name: 'cerberus', id: 'cerberus', class: Cerberus, data: this.assets.enemies.cerberus, xPercentage: 0.7, minPosition: 0.1, difficulties: ["normal", "hard", "impossible"] },//this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
{ name: 'dragon', id: 'dragon', class: Dragon, data: this.assets.enemies.dragon, xPercentage: 0.5, minPosition: 0.05 },
{ name: 'knight', id: 'player', class: PlayerGreece, data: this.assets.players.knight },
{ name: 'flag', id: 'flag', class: Flag, data: this.assets.obstacles.flag },
{ name: 'flyingIsland', id: 'flyingIsland', class: FlyingIsland, data: this.assets.platforms.island, xPercentage: 0.82, yPercentage: 0.55 },
{ name: 'tubeU', id: 'tubeU', class: TubeGreece, data: this.assets.obstacles.tubeU, xPercentage: 0.66, yPercentage: 1.13 },
{ name: 'hillsEnd', id: 'background', class: BackgroundTransitions, data: this.assets.transitions.hillsEnd },
{ name: 'lava', id: 'lava', class: Lava, data: this.assets.platforms.lava, xPercentage: 0, yPercentage: 1 },
];
// Greece Game Level added to the GameEnv ...
new GameLevel({ tag: "ancient greece", callback: this.playerOffScreenCallBack, objects: greeceGameObjects });
Expand Down Expand Up @@ -934,7 +958,9 @@ const GameSetup = {
{ name: 'bossbackground', id: 'background', class: Background, data: this.assets.backgrounds.boss },
{ name: 'boss', id: 'boss', class: Boss, data: this.assets.enemies.boss, xPercentage: 0.5, minPosition: 0.3 },
{ name: 'boss1', id: 'boss', class: Boss, data: this.assets.enemies.boss, xPercentage: 0.3, minPosition: 0.07 },
{ name: 'mario', id: 'player', class: PlayerHills, data: this.assets.players.mario },
{ name: 'itemBlock', id: 'jumpPlatform', class: BossItem, data: this.assets.platforms.itemBlock, xPercentage: 0.2, yPercentage: 0.65 }, //item block is a platform
{ name: 'mario', id: 'player', class: PlayerBoss, data: this.assets.players.mario },
{ name: 'zombie', id: 'player', class: PlayerZombie, data: this.assets.players.zombie },
{ name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
{ name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass }
];
Expand Down
Loading

0 comments on commit 6f1bc1f

Please sign in to comment.