made block work finally it switches sprites and everything

assets/js/platformer2/GameLevel.js

@@ -42,7 +42,7 @@ class GameLevel {
                     canvas.id = obj.id;
                     document.querySelector("#canvasContainer").appendChild(canvas);
                     // Create a new instance of the game object.
-                    new obj.class(canvas, obj.image, obj.data, obj.xPosition, obj.yPosition);
+                    new obj.class(canvas, obj.image, obj.data, obj.xPosition, obj.yPosition, obj.name);
                 }
             }
         } catch (error) {

assets/js/platformer2/GameObject.js

@@ -137,10 +137,13 @@ class GameObject {
 
         // Calculate hitbox constants
         var widthPercentage = 0.5;
-        var heightPercentage = 0.5; 
-        if (this.canvas.id === "player" && other.canvas.id === "jumpPlatform") {
+        var heightPercentage = 0.5;
+        if (this.canvas.id === "player" && other.canvas.id === "jumpPlatform" ) {
             heightPercentage = 0.0;
         }
+        if (this.canvas.id === "jumpPlatform" && other.canvas.id === "player" ) {
+            heightPercentage = -0.2;
+        }
         if (this.canvas.id === "goomba" && other.canvas.id === "player") {
             heightPercentage = 0.2;
         }
@@ -152,7 +155,7 @@ class GameObject {
         const thisTop = thisRect.top + heightReduction;
         const thisRight = thisRect.right - widthReduction;
         const thisBottom = thisRect.bottom - heightReduction;
-    
+
         // Determine hit and touch points of hit
         this.collisionData = {
             hit: (

assets/js/platformer2/GameSetup.js

@@ -165,8 +165,17 @@ const GameSetup = {
       platforms: {
         grass: { src: "/images/platformer/platforms/grass.png" },
         alien: { src: "/images/platformer/platforms/alien.png" },
-        bricks: { src: "/images/platformer/platforms/brick_wall.png", sizeRatio: 30 },
-        block: { src: "/images/platformer/platforms/mario_block.jpg", sizeRatio: 83.2 },
+        bricks: { src: "/images/platformer/platforms/brick_wall.png", sizeRatio: 30, widthRatio: 0.5, heightRatio: 1.0 },
+        block: {
+          src: "/images/platformer/platforms/mario_block_spritesheet_v2.png",
+          sizeRatio: 83.2,
+          widthRatio: 0.5,
+          heightRatio: 1.0,
+          width: 204,
+          height: 204,
+          scaleSize: 80,
+          speedRatio: 0.7,
+        },
       },
       backgrounds: {
         start: { src: "/images/platformer/backgrounds/home.png" },
@@ -278,7 +287,7 @@ const GameSetup = {
         { name: 'hills', id: 'background', class: BackgroundHills, data: this.assets.backgrounds.hills },
         { name: 'grass', id: 'platform', class: Platform, data: this.assets.platforms.grass },
         { name: 'bricks', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.bricks, xPosition: 0.1, yPosition: 0.8 },
-        { name: 'bricks', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.block, xPosition: 0.7, yPosition: 0.8 }, //second platform
+        { name: 'block', id: 'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.block, xPosition: 0.3, yPosition: 0.6 }, //second platform
         { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba },
         { name: 'mario', id: 'player', class: Player, data: this.assets.players.mario },
         { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },

assets/js/platformer2/JumpPlatform.js

@@ -2,29 +2,45 @@ import GameEnv from './GameEnv.js';
 import GameObject from './GameObject.js';
 
 export class JumpPlatform extends GameObject {
-    constructor(canvas, image, data, xPosition, yPosition) {
+    constructor(canvas, image, data, xPosition, yPosition, name) {
         super(canvas, image, data);
         this.data = data;
         this.xPosition = xPosition;
         this.yPosition = yPosition;
+        this.name = name
+        this.relativeX = "";
+    }
+
+    size() {
     }
 
     // Required, but no update action
     update() {
+        this.collisionChecks();
+        this.draw();
     }
 
-    // Draw position is always 0,0
-    draw() {
-        this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
+    collisionAction() {
+        //collision only detects mario and it only applies to the item block
+        if (this.collisionData.touchPoints.other.id === "player" && this.name === "block") {
+            if (this.relativeX === 0 || this.relativeX === -300) {
+                this.relativeX = -300;
+            } else {
+                this.relativeX = 0;
+                console.log(this.relativeX)
+            }
+        }
     }
 
-    // Set platform position
-    size() {
+    // Draw position is always 0,0
+    draw() {
         // Formula for Height should be on constant ratio, using a proportion of 832
         const scaledHeight = GameEnv.innerHeight * (this.data.sizeRatio / 832);
         const scaledWidth = GameEnv.innerHeight * 1/10;  // width of jump platform is 1/10 of height
         const platformX = GameEnv.innerWidth * this.xPosition;
         const platformY = (GameEnv.bottom - scaledHeight)  * this.yPosition;
+        this.x = platformX
+        this.y = platformY
 
         // set variables used in Display and Collision algorithms
         this.bottom = platformY;
@@ -37,9 +53,12 @@ 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.top = `${platformY}px`;  
 
+        this.ctx.drawImage(this.image, this.relativeX, 0, this.canvas.width / this.data.widthRatio, this.canvas.height / this.data.heightRatio);
+        //this.ctx.drawImage(this.image, 0, 0);
     }
+
 }
 
 export default JumpPlatform;

assets/js/platformer2/Player.js

@@ -153,6 +153,7 @@ export class Player extends Character{
      * @override
      */
     collisionAction() {
+        //console.log(this.collisionData.touchPoints.other.id)
         if (this.collisionData.touchPoints.other.id === "tube") {
             // Collision with the left side of the Tube
             if (this.collisionData.touchPoints.other.left) {