Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
jm1021 committed May 16, 2024
2 parents 9a7be23 + 00f328a commit 9335fac
Show file tree
Hide file tree
Showing 10 changed files with 125 additions and 11 deletions.
Binary file added .DS_Store
Binary file not shown.
24 changes: 24 additions & 0 deletions assets/js/platformer3x/BackgroundNarwhal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import GameEnv from './GameEnv.js';
import Background from './Background.js';

export class BackgroundNarwhal extends Background {
constructor(canvas, image, data) {
super(canvas, image, data);

this.parallaxSpeed = 2;
}

// speed is used to background parallax behavior
update() {
this.speed = this.parallaxSpeed;
super.update();
}

draw() {
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
super.draw();
}

}

export default BackgroundNarwhal;
25 changes: 19 additions & 6 deletions assets/js/platformer3x/GameSetup.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import BackgroundMountains from './BackgroundMountains.js';
import BackgroundTransitions from './BackgroundTransitions.js';
import BackgroundClouds from './BackgroundClouds.js';
import BackgroundWinter from './BackgroundWinter.js';
import BackgroundNarwhal from './BackgroundNarwhal.js';
import BackgroundSnow from './BackgroundSnow.js';
import BackgroundFish from './BackgroundFish.js';
import Platform from './Platform.js';
Expand All @@ -19,6 +20,7 @@ import PlayerMini from './PlayerMini.js';
import PlayerQuidditch from './PlayerQuidditch.js';
import Tube from './Tube.js';
import Tube1 from './Tube1.js';
import TubeGreece from './TubeGreece.js';
import Cabin from './Cabin.js';
import Goomba from './Goomba.js';
import FlyingGoomba from './FlyingGoomba.js';
Expand Down Expand Up @@ -211,9 +213,17 @@ const GameSetup = {

assets: {
obstacles: {
tube: {
src: "/images/platformer/obstacles/blue-tube-up.png",
hitbox: { widthPercentage: 0.5, heightPercentage: 0.5 }
tube: { src: "/images/platformer/obstacles/tube.png",
hitbox: { widthPercentage: 0.5, heightPercentage: 0.5}
},
tubeU: { src: "/images/platformer/obstacles/blue-tube-up.png",
hitbox: { widthPercentage: 0.5, heightPercentage: 0.5}
},
tubeD: { src: "/images/platformer/obstacles/blue-tube.png",
hitbox: { widthPercentage: 0.5, heightPercentage: 0.5}
},
tubeGreece: {src: "/images/platformer/obstacles/blue-tube-up.png",
hitbox: { widthPercentage: 0.5, heightPercentage: 0.5}
},
cabin: {
src: "/images/platformer/obstacles/cabin.png",
Expand Down Expand Up @@ -282,6 +292,7 @@ const GameSetup = {
castles: { src: "/images/platformer/backgrounds/castles.png" },
winter: { src: "/images/platformer/backgrounds/winter.png" },
snow: { src: "/images/platformer/backgrounds/snowfall.png" },
narwhal: { src: "/images/platformer/backgrounds/narwhal.png" },
mini: { src: "/images/platformer/backgrounds/mini.png" },
},
transitions: {
Expand Down Expand Up @@ -695,6 +706,7 @@ const GameSetup = {
{ 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: '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 },
];
// Greece Game Level added to the GameEnv ...
Expand Down Expand Up @@ -770,9 +782,9 @@ const GameSetup = {
{ name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.7675, yPercentage: 0.5 },
{ name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.7875, yPercentage: 0.5 },
{ name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.coin, xPercentage: 0.8075, yPercentage: 0.5 },
{ name: 'mario', id: 'player', class: PlayerMini, data: this.assets.players.mario },
{ name: 'tubeD', id: 'tubeD', class: Tube1, data: this.assets.obstacles.tubeD },
{ name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
{ name: 'knight', id: 'player', class: PlayerMini, data: this.assets.players.knight },
{ name: 'tubeD', id: 'tubeD', class: Tube1, data: this.assets.obstacles.tubeD},
{ name: 'tubeU', id: 'tubeU', class: Tube, data: this.assets.obstacles.tubeU},
{ name: 'greeceEnd', id: 'background', class: BackgroundTransitions, data: this.assets.transitions.greeceEnd },
];
// Space Game Level added to the GameEnv ...
Expand Down Expand Up @@ -881,6 +893,7 @@ const GameSetup = {
const winterObjects = [
// GameObject(s), the order is important to z-index...
{ name: 'winter', id: 'background', class: BackgroundWinter, data: this.assets.backgrounds.winter },
{ name: 'narwhal', id: 'background', class: BackgroundNarwhal, data: this.assets.backgrounds.narwhal },
{ name: 'snow', id: 'background', class: BackgroundSnow, data: this.assets.backgrounds.snow },
{ name: 'snowyfloor', id: 'platform', class: Platform, data: this.assets.platforms.snowyfloor },
{ name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.snowywood, xPercentage: 0.2, yPercentage: 0.82 },
Expand Down
2 changes: 1 addition & 1 deletion assets/js/platformer3x/JumpPlatform.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export class JumpPlatform extends GameObject {
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();
GameControl.startRandomEvent("game");
//console.log("randomEventtriggered", GameControl.randomEventId);
};
this.relativeX = -1 * this.canvas.width;
Expand Down
28 changes: 27 additions & 1 deletion assets/js/platformer3x/PlayerGreece.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export class PlayerGreece extends PlayerBase {
handleCollisionStart() {
super.handleCollisionStart(); // calls the super class method
// adds additional collision events
this.handleCollisionEvent("tubeU");
this.handleCollisionEvent("flag");
this.handleCollisionEvent("cerberus");
}
Expand All @@ -63,6 +64,29 @@ export class PlayerGreece extends PlayerBase {
super.handlePlayerReaction(); // calls the super class method
// handles additional player reactions
switch (this.state.collision) {
case "tubeU":
// 1. Caught in tube
if (this.collisionData.touchPoints.this.top && this.collisionData.touchPoints.other.bottom) {
// Position player in the center of the tube
this.x = this.collisionData.newX;
// Using natural gravity wait for player to reach floor
if (Math.abs(this.y - this.bottom) <= GameEnv.gravity) {
// Force end of level condition
// this.x = GameEnv.innerWidth + 1;
GameControl.transitionToLevel(GameEnv.levels[4])
return
}
// 2. Collision between player right and tube
} else if (this.collisionData.touchPoints.this.right) {
this.state.movement.right = false;
this.state.movement.left = true;
// 3. Collision between player left and tube
} else if (this.collisionData.touchPoints.this.left) {
this.state.movement.left = false;
this.state.movement.right = true;
}
break;

case "flag":
// 1. Caught in tube
if (this.collisionData.touchPoints.this.top && this.collisionData.touchPoints.other.bottom) {
Expand All @@ -71,7 +95,9 @@ export class PlayerGreece extends PlayerBase {
// Using natural gravity wait for player to reach floor
if (Math.abs(this.y - this.bottom) <= GameEnv.gravity) {
// Force end of level condition
this.x = GameEnv.innerWidth + 1;
//this.x = GameEnv.innerWidth + 1;
GameControl.transitionToLevel(GameEnv.levels[5])
return
}
// 2. Collision between player right and tube
} else if (this.collisionData.touchPoints.this.right) {
Expand Down
8 changes: 5 additions & 3 deletions assets/js/platformer3x/PlayerMini.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export class PlayerMini extends PlayerBase {
handleCollisionStart() {
super.handleCollisionStart(); // calls the super class method
// adds additional collision events
this.handleCollisionEvent("tube");
this.handleCollisionEvent("tubeU");
this.handleCollisionEvent("goomba");
this.handleCollisionEvent("mushroom");

Expand All @@ -75,7 +75,7 @@ export class PlayerMini extends PlayerBase {
super.handlePlayerReaction(); // calls the super class method
// handles additional player reactions
switch (this.state.collision) {
case "tube":
case "tubeU":
// 1. Caught in tube

if (this.collisionData.touchPoints.this.top && this.collisionData.touchPoints.other.bottom) {
Expand All @@ -84,7 +84,9 @@ export class PlayerMini extends PlayerBase {
// Using natural gravity wait for player to reach floor
if (Math.abs(this.y - this.bottom) <= GameEnv.gravity) {
// Force end of level condition
this.x = GameEnv.innerWidth + 1;
//this.x = GameEnv.innerWidth + 1;
GameControl.transitionToLevel(GameEnv.levels[3])
return
}

// 2. Collision between player right and tube
Expand Down
49 changes: 49 additions & 0 deletions assets/js/platformer3x/TubeGreece.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import GameEnv from './GameEnv.js';
import GameObject from './GameObject.js';

export class TubeGreece extends GameObject {
constructor(canvas, image, data, xPercentage, yPercentage) {
super(canvas, image, data);
this.tubeX = xPercentage * GameEnv.innerWidth;
this.tubeY = yPercentage;
}

// Required, but no update action
update() {
}

// Draw position is always 0,0
draw() {
this.ctx.drawImage(this.image, 0, 0);
}

// Set Tube position
size() {
// Formula for Height should be on constant ratio, using a proportion of 832
const scaledHeight = GameEnv.innerWidth * (64 / 832);
// Formula for Width is scaled: scaledWidth/scaledHeight == this.width/this.height
const scaledWidth = scaledHeight/1.5;
// const tubeX = 0.4 * GameEnv.innerWidth;
const tubeX = this.tubeX;
//const tubeY = (GameEnv.bottom - 0.1 * scaledHeight);
const tubeY = (GameEnv.bottom - scaledHeight) * this.tubeY;


// set variables used in Display and Collision algorithms
this.bottom = tubeY;
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 = `${tubeX}px`;
this.canvas.style.top = `${tubeY}px`;


}
}

export default TubeGreece;
Binary file added images/.DS_Store
Binary file not shown.
Binary file added images/platformer/.DS_Store
Binary file not shown.
Binary file added images/platformer/backgrounds/narwhal.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9335fac

Please sign in to comment.