diff --git a/Rings.webp b/Rings.webp new file mode 100644 index 00000000..493b5b15 Binary files /dev/null and b/Rings.webp differ diff --git a/assets/js/platformer3x/BackgroundClouds.js b/assets/js/platformer3x/BackgroundClouds.js index 34ecfe70..69ebe562 100644 --- a/assets/js/platformer3x/BackgroundClouds.js +++ b/assets/js/platformer3x/BackgroundClouds.js @@ -1,11 +1,11 @@ import GameEnv from './GameEnv.js'; import Background from './Background.js'; -export class BackgroundClouds extends Background { +export class BackgroundClouds extends Background { constructor(canvas, image, data) { super(canvas, image, data); - this.parallaxSpeed = 2; + this.parallaxSpeed = 1; } // speed is used to background parallax behavior diff --git a/assets/js/platformer3x/BackgroundPlayers.js b/assets/js/platformer3x/BackgroundPlayers.js new file mode 100644 index 00000000..c046c3c7 --- /dev/null +++ b/assets/js/platformer3x/BackgroundPlayers.js @@ -0,0 +1,24 @@ +import GameEnv from './GameEnv.js'; +import Background from './Background.js'; + +export class BackgroundPlayers extends Background { + constructor(canvas, image, data) { + super(canvas, image, data); + + this.parallaxSpeed = -3; + } + + // 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 BackgroundPlayers; \ No newline at end of file diff --git a/assets/js/platformer3x/GameEnv.js b/assets/js/platformer3x/GameEnv.js index e6c45ebe..d952c214 100644 --- a/assets/js/platformer3x/GameEnv.js +++ b/assets/js/platformer3x/GameEnv.js @@ -41,6 +41,7 @@ export class GameEnv { * @property {boolean} transitionHide - used to hide the transition screen * @property {number} gravity - localstorage key, used by platformer objects * @property {boolean} destroyedMushroom - to see when mushroom is destroyed + * @property {boolean} destroyedMagicBeam - to see when magic beam is destroyed * @property {boolean} playMessage * @property {Object} difficulty - localstorage key, used by GameControl * @property {number} innerWidth - used by platformer objects @@ -63,6 +64,7 @@ export class GameEnv { static transitionHide = false; static gravity = 3; static destroyedMushroom = false; + static destroyedMagicBeam = false; static playMessage = false; static difficulty = "normal"; static innerWidth; diff --git a/assets/js/platformer3x/GameSetup.js b/assets/js/platformer3x/GameSetup.js index 52f5ecb9..97d948fe 100644 --- a/assets/js/platformer3x/GameSetup.js +++ b/assets/js/platformer3x/GameSetup.js @@ -25,7 +25,10 @@ import Cabin from './Cabin.js'; import Goomba from './Goomba.js'; import FlyingGoomba from './FlyingGoomba.js'; import BlockPlatform from './BlockPlatform.js'; +import SpawnPlatform from './SpawnPlatform.js'; +import MovingPlatform from './MovingPlatform.js' import Mushroom from './Mushroom.js'; +import MagicBeam from './MagicBeam.js' import Coin from './Coin.js'; import Snowflake from './Snowflake.js'; import GameControl from './GameControl.js'; @@ -46,6 +49,7 @@ import PlayerZombie from './PlayerZombie.js'; import BossItem from './BossItem.js'; import PlayerBoss from './PlayerBoss.js'; + //test comment /* Coding Style Notes @@ -269,6 +273,7 @@ const GameSetup = { yellowpattern: { src: "/images/platformer/platforms/yellowtowerpattern.jpg" }, yellowredpattern: { src: "/images/platformer/platforms/yellowredpattern.jpg" }, lionpattern: { src: "/images/platformer/platforms/lionpattern.jpg" }, + stone: { src: "/images/platformer/platforms/stone.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 @@ -295,6 +300,7 @@ const GameSetup = { fish: { src: "/images/platformer/backgrounds/school-fish.png" }, reef: { src: "/images/platformer/backgrounds/reef.png" }, quidditch: { src: "/images/platformer/backgrounds/quidditch2.jpg" }, + miniHogwarts: { src: "/images/platformer/backgrounds/miniHogwarts.png"}, space: { src: "/images/platformer/backgrounds/planet.jpg" }, castles: { src: "/images/platformer/backgrounds/castles.png" }, winter: { src: "/images/platformer/backgrounds/winter.png" }, @@ -402,8 +408,8 @@ const GameSetup = { scaleSize: 60, speedRatio: 0.7, idle: { - left: { row: 1, frames: 1 }, - right: { row: 2, frames: 1 }, + left: { row: 1, frames: 0 }, + right: { row: 2, frames: 0 }, }, walk: { left: { row: 1, frames: 5 }, @@ -414,8 +420,8 @@ const GameSetup = { right: { row: 2, frames: 5 }, }, jump: { - left: { row: 1, frames: 1 }, - right: { row: 2, frames: 1 }, + left: { row: 1, frames: 0 }, + right: { row: 2, frames: 0 }, }, hitbox: { widthPercentage: 0.3, heightPercentage: 0.8 } }, @@ -492,6 +498,12 @@ const GameSetup = { height: 180, hitbox: { widthPercentage: 0.0, heightPercentage: 0.2 } }, + magicBeam: { + src: "/images/platformer/platforms/magic_beam.png", + width: 450, + height: 400, + hitbox: { widthPercentage: 0.5, heightPercentage: 0.5 } + }, alien: { src: "/images/platformer/sprites/alien.png", width: 444, @@ -642,10 +654,10 @@ const GameSetup = { { name: 'clouds', id: 'background', class: BackgroundClouds, data: this.assets.backgrounds.clouds }, { name: 'hills', id: 'background', class: BackgroundHills, data: this.assets.backgrounds.hills }, { name: 'grass', id: 'floor', class: Platform, data: this.assets.platforms.grass }, - { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 }, - { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 }, - { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 }, - { name: 'blocks', id: 'wall', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 }, + { name: 'blocks', id: 'jumpPlatform', class: MovingPlatform, data: this.assets.platforms.block, xPercentage: 0.2, yPercentage: 0.85 }, + { name: 'blocks', id: 'jumpPlatform', class: MovingPlatform, data: this.assets.platforms.block, xPercentage: 0.2368, yPercentage: 0.85 }, + { name: 'blocks', id: 'jumpPlatform', class: MovingPlatform, data: this.assets.platforms.block, xPercentage: 0.2736, yPercentage: 0.85 }, + { name: 'blocks', id: 'wall', class: SpawnPlatform, data: this.assets.platforms.block, xPercentage: 0.6, yPercentage: 1 }, { name: 'itemBlock', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 }, //item block is a platform { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.5, yPercentage: 1, minPosition: 0.05 }, { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.4, yPercentage: 1, minPosition: 0.05, difficulties: ["normal", "hard", "impossible"] }, @@ -875,9 +887,9 @@ const GameSetup = { { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.cobblestone, xPercentage: 0.38, yPercentage: 0.27 }, { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.cobblestone, xPercentage: 0.38, yPercentage: 0.17 }, - { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.cobblestone, xPercentage: 0.536, yPercentage: 0.72 }, - { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.cobblestone, xPercentage: 0.616, yPercentage: 0.81 }, - { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.cobblestone, xPercentage: 0.696, yPercentage: 0.90 }, + { name: 'blocks', id: 'jumpPlatform', class: MovingPlatform, data: this.assets.platforms.cobblestone, xPercentage: 0.626, yPercentage: 0.92 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.cobblestone, xPercentage: 0.663, yPercentage: 0.586 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.cobblestone, xPercentage: 0.700, yPercentage: 0.586 }, { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.yellowpattern, xPercentage: 0.456, yPercentage: 1.08 }, { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.yellowredpattern, xPercentage: 0.456, yPercentage: 0.985 }, @@ -901,9 +913,11 @@ const GameSetup = { { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.409, yPercentage: 0.7 }, { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.295, yPercentage: 0.46 }, - { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.687, yPercentage: 0.79, }, - { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.611, yPercentage: 0.7 }, - { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.529, yPercentage: 0.61 }, + { name: 'magicBeam', id: 'magicBeam', class: MagicBeam, data: this.assets.enemies.magicBeam, xPercentage: 0.623, yPercentage: 0.72 }, + + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.656, yPercentage: 0.46 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.611, yPercentage: 0.46 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.700, yPercentage: 0.46 }, { name: 'harry', id: 'player', class: PlayerQuidditch, data: this.assets.players.harry }, { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube }, @@ -913,6 +927,66 @@ const GameSetup = { // Quidditch Game Level added to the GameEnv ... new GameLevel({ tag: "quidditch", callback: this.playerOffScreenCallBack, objects: quidditchGameObjects }); + const miniHogwartsObjects = [ + // GameObject(s), the order is important to z-index... + { name: 'miniHogwarts', id: 'background', class: Background, data: this.assets.backgrounds.miniHogwarts }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.009, yPercentage: 0.47 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.058, yPercentage: 0.66 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.1, yPercentage: 0.81 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.14, yPercentage: 0.47 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.18, yPercentage: 0.47 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.22, yPercentage: 0.47 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.26, yPercentage: 0.47 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.30, yPercentage: 0.47 }, + + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.14, yPercentage: 0.81 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.18, yPercentage: 0.81 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.22, yPercentage: 0.81 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.26, yPercentage: 0.81 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.30, yPercentage: 0.81 }, + + { name: 'blocks', id: 'jumpPlatform', class: MovingPlatform, data: this.assets.platforms.stone, xPercentage: 0.44, yPercentage: 0.92 }, + { name: 'magicBeam', id: 'magicBeam', class: MagicBeam, data: this.assets.enemies.magicBeam, xPercentage: 0.37, yPercentage: 0.61 }, + + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.48, yPercentage: 0.64 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.48, yPercentage: 0.54 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.48, yPercentage: 0.44 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.48, yPercentage: 0.34 }, + + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.6, yPercentage: 0.66 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.56, yPercentage: 0.5 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.64, yPercentage: 0.81 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.68, yPercentage: 0.47 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.72, yPercentage: 0.47 }, + { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.stone, xPercentage: 0.76, yPercentage: 0.47 }, + + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.55, yPercentage: 0.38 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.636, yPercentage: 0.699 }, + + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.672, yPercentage: 0.368 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.71, yPercentage: 0.368 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.75, yPercentage: 0.368 }, + + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.056, yPercentage: 0.56 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.15, yPercentage: 0.24 }, + + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.14, yPercentage: 0.7 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.18, yPercentage: 0.7 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.22, yPercentage: 0.7 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.26, yPercentage: 0.7 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.43, yPercentage: 0.82 }, + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.47, yPercentage: 0.24 }, + + { name: 'coin', id: 'coin', class: Coin, data: this.assets.obstacles.snitch, xPercentage: 0.799, yPercentage: 0.81 }, + + + { name: 'harry', id: 'player', class: PlayerMini, data: this.assets.players.harry }, + { name: 'tubeD', id: 'tubeD', class: Tube1, data: this.assets.obstacles.tubeD}, + { name: 'tubeU', id: 'tubeU', class: Tube, data: this.assets.obstacles.tubeU}, + ]; + + // miniHogwarts Game Level added to the GameEnv ... + new GameLevel({ tag: "mini hogwarts", callback: this.playerOffScreenCallBack, objects: miniHogwartsObjects }); const winterObjects = [ // GameObject(s), the order is important to z-index... diff --git a/assets/js/platformer3x/JumpPlatform.js b/assets/js/platformer3x/JumpPlatform.js index dd06e881..f4396d1a 100644 --- a/assets/js/platformer3x/JumpPlatform.js +++ b/assets/js/platformer3x/JumpPlatform.js @@ -1,3 +1,4 @@ + import GameControl from './GameControl.js'; import GameEnv from './GameEnv.js'; import GameObject from './GameObject.js'; @@ -8,17 +9,34 @@ export class JumpPlatform extends GameObject { this.platformX = xPercentage * GameEnv.innerWidth; this.platformY = yPercentage; this.data = data; - //integration notes: - //currently there are two variables each for the x and y position of the platform - //this is because two people fixed the same issue independently - //this may need to be returned to RIGHT NOW this.name = name; - this.relativeX = ""; //used for the item block's spritesheet. + this.relativeX = 0; //used for the item block's spritesheet. + this.direction = 1; + this.speed = 1; + this.minBottom = 150; // Minimum bottom position for the platform + this.maxBottom = 300; // Maximum bottom position for the platform + + } // Required, but no update action update() { this.collisionChecks(); + this.movePlatform(); + } + + movePlatform() { + let currentPosition = parseInt(this.canvas.style.bottom) || 0; + + if (currentPosition >= this.maxBottom) { + this.direction = -1; + } else if (currentPosition <= this.minBottom) { + this.direction = 1; + } + + this.canvas.style.bottom = currentPosition + this.direction * this.speed + 'px'; + this.relativeX += this.direction * this.speed; + this.draw(); } collisionAction() { @@ -26,7 +44,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("game"); + GameControl.startRandomEvent(); //console.log("randomEventtriggered", GameControl.randomEventId); }; this.relativeX = -1 * this.canvas.width; @@ -35,7 +53,7 @@ export class JumpPlatform extends GameObject { } } } - + // Set platform position size() { // Formula for Height should be on constant ratio, using a proportion of 832 @@ -57,14 +75,15 @@ export class JumpPlatform extends GameObject { this.canvas.style.height = `${scaledHeight}px`; this.canvas.style.position = 'absolute'; this.canvas.style.left = `${platformX}px`; - this.canvas.style.top = `${platformY}px`; - + this.canvas.style.bottom = `${platformY}px`; } // Draw position is always 0,0 draw() { - this.ctx.drawImage(this.image, this.relativeX, 0, this.canvas.width / this.data.widthRatio, this.canvas.height / this.data.heightRatio); + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.ctx.drawImage(this.image, 0, 0, this.canvas.width / this.data.widthRatio, this.canvas.height / this.data.heightRatio); } + } export default JumpPlatform; diff --git a/assets/js/platformer3x/MagicBeam.js b/assets/js/platformer3x/MagicBeam.js new file mode 100644 index 00000000..f4ae67a4 --- /dev/null +++ b/assets/js/platformer3x/MagicBeam.js @@ -0,0 +1,67 @@ +import Character from './Character.js'; +import GameEnv from './GameEnv.js'; + +export class MagicBeam extends Character { + // Constructor sets up Character object + constructor(canvas, image, data, xPercentage, yPercentage, name, minPosition) { + super(canvas, image, data); + + // Unused but must be defined + this.name = name; + + // Initial Position + this.x = xPercentage * GameEnv.innerWidth; + this.yPercentage = yPercentage; + + // Calculate initial Y position + this.y = GameEnv.bottom * this.yPercentage; + this.canvas.style.top = `${this.y}px`; + + this.minPosition = minPosition * GameEnv.innerWidth; + this.maxPosition = this.x + xPercentage * GameEnv.innerWidth; + + this.immune = 0; + GameEnv.destroyedMagicBeam = false; + + } + + update() { + super.update(); + + // Check for boundaries + if (this.x <= this.minPosition || (this.x + this.canvasWidth >= this.maxPosition)) { + this.speed = -this.speed; + } + this.playerBottomCollision = false; + + this.y = GameEnv.bottom * this.yPercentage; + this.canvas.style.top = `${this.y}px`; + } + + // Player action on collisions + collisionAction() { + if (this.collisionData.touchPoints.other.id === "player") { + if (this.collisionData.touchPoints.other.bottom && this.immune === 0) { + GameEnv.invincible = true; + GameEnv.goombaBounce1 = true; + this.canvas.style.transition = "transform 1.5s, opacity 1s"; + this.canvas.style.transformOrigin = "bottom"; + this.canvas.style.transform = "scaleY(0)"; + this.speed = 0; + + setTimeout(() => { + GameEnv.invincible = false; + this.destroy(); + GameEnv.destroyedMagicBeam = true; + }, 1500); + } + } + if (this.collisionData.touchPoints.other.id === "jumpPlatform") { + if (this.collisionData.touchPoints.other.left || this.collisionData.touchPoints.other.right) { + this.speed = -this.speed; + } + } + } +} + +export default MagicBeam; diff --git a/assets/js/platformer3x/MovingPlatform.js b/assets/js/platformer3x/MovingPlatform.js new file mode 100644 index 00000000..253d85b5 --- /dev/null +++ b/assets/js/platformer3x/MovingPlatform.js @@ -0,0 +1,64 @@ +import GameEnv from './GameEnv.js'; +import GameObject from './GameObject.js'; + +export class MovingPlatform extends GameObject { + constructor(canvas, image, data, xPercentage, yPercentage) { + super(canvas, image, data); + this.platformX = xPercentage * GameEnv.innerWidth; + this.platformY = yPercentage; + this.direction = -1; // Move up + this.speed = 0.5; // Reduced speed + this.maxTop = 300; + + // Add glow effect + this.canvas.style.boxShadow = "0 0 10px 5px rgba(0, 255, 255, 0.7)"; + } + + // Required, but no update action + update() { + if (GameEnv.destroyedMagicBeam === true) { + this.movePlatform(); + } + } + + movePlatform() { + let currentPosition = parseInt(this.canvas.style.top) || 0; + + // Only move up + if (currentPosition <= this.maxTop) { // Changed condition to check if it's below maxTop + this.direction = 1; // Change direction to move down + } else if (currentPosition >= (GameEnv.bottom - this.canvas.height)) { // Ensure it stays within the bottom of the game environment + this.direction = -1; + } + + this.canvas.style.top = currentPosition + this.direction * this.speed + 'px'; + this.draw(); + } + + // Draw position is always 0,0 + draw() { + this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height); + } + + // Set platform position + size() { + // Formula for Height should be on constant ratio, using a proportion of 832 + const scaledHeight = GameEnv.innerWidth * (1/27); + const scaledWidth = scaledHeight; // width of jump platform is 1/10 of height + 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 MovingPlatform; \ No newline at end of file diff --git a/assets/js/platformer3x/SpawnPlatform.js b/assets/js/platformer3x/SpawnPlatform.js new file mode 100644 index 00000000..ec84a5a0 --- /dev/null +++ b/assets/js/platformer3x/SpawnPlatform.js @@ -0,0 +1,53 @@ +import GameEnv from './GameEnv.js'; +import GameObject from './GameObject.js'; + +export class SpawnPlatform extends GameObject { + constructor(canvas, image, data, xPercentage, yPercentage) { + super(canvas, image, data); + this.platformX = xPercentage * GameEnv.innerWidth; + this.platformY = yPercentage; + this.direction = 1; + this.speed = 1; + this.minBottom = 150; // Minimum bottom position for the platform + this.maxBottom = 300; // Maximum bottom position for the platform + + // Add glow effect + this.canvas.style.boxShadow = "0 0 10px 5px rgba(0, 255, 255, 0.7)"; + } + + // Required, but no update action + update() { + // .log(this.platformY); + this.canvas.style.visibility = 'hidden'; + if (GameEnv.destroyedMushroom === true) { + this.canvas.style.visibility = 'visible'; + } + } + + // Draw position is always 0,0 + draw() { + this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height); + } + + // Set platform position + size() { + // Formula for Height should be on constant ratio, using a proportion of 832 + const scaledHeight = GameEnv.innerWidth * (1/27); + const scaledWidth = scaledHeight; // width of jump platform is 1/10 of height + 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 SpawnPlatform; \ No newline at end of file diff --git a/images/platformer/backgrounds/bat.png b/images/platformer/backgrounds/bat.png new file mode 100644 index 00000000..056d653b Binary files /dev/null and b/images/platformer/backgrounds/bat.png differ diff --git a/images/platformer/backgrounds/bats.png b/images/platformer/backgrounds/bats.png new file mode 100644 index 00000000..1bb6151c Binary files /dev/null and b/images/platformer/backgrounds/bats.png differ diff --git a/images/platformer/backgrounds/flyingplayers.png b/images/platformer/backgrounds/flyingplayers.png new file mode 100644 index 00000000..fa2941c0 Binary files /dev/null and b/images/platformer/backgrounds/flyingplayers.png differ diff --git a/images/platformer/backgrounds/miniHogwarts.png b/images/platformer/backgrounds/miniHogwarts.png new file mode 100644 index 00000000..343d6afe Binary files /dev/null and b/images/platformer/backgrounds/miniHogwarts.png differ diff --git a/images/platformer/platforms/magic_beam.png b/images/platformer/platforms/magic_beam.png new file mode 100644 index 00000000..85d2abd0 Binary files /dev/null and b/images/platformer/platforms/magic_beam.png differ diff --git a/images/platformer/platforms/stone.jpg b/images/platformer/platforms/stone.jpg new file mode 100644 index 00000000..a65738f8 Binary files /dev/null and b/images/platformer/platforms/stone.jpg differ diff --git a/pngtree-magic-golden-particle-beam-png-image_5044939.jpg b/pngtree-magic-golden-particle-beam-png-image_5044939.jpg new file mode 100644 index 00000000..b9444ab5 Binary files /dev/null and b/pngtree-magic-golden-particle-beam-png-image_5044939.jpg differ