Merge pull request #76 from kaylale124/main

Moving Platform, Spawning Platform, and Mini Game

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

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;

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;

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...

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,25 +9,42 @@ 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() {
         //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("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;