Merge pull request #26 from jm1021/main

Hit box moved to GameSetup, Toggle for Fun Facts, Lesson Material

_posts/2024-03-29-Parallax_Lesson.md

@@ -0,0 +1,121 @@
+---
+toc: true
+comments: false
+layout: post
+title:  Parallax Lesson
+description: Describing parallax and other features
+---
+<style>
+    .post-content p, .post-content li {
+        color: #b1b1b1;
+    }
+</style>
+## What is motion parallax?
+
+Motion parallax describes a psychological phenomenon in which we perceive that farther away objects seem to move slower than close objects.
+
+![Alt text](https://www.researchgate.net/publication/299401615/figure/fig2/AS:349707269361671@1460388118826/Motion-parallax-When-an-observer-passes-through-a-scene-when-driving-a-car-it-moves.png)
+
+If you were in a car, looking out of the window, you might notice that nearby trees or buildings seem to move quickly, while mountains in the distance hardly move at all.
+
+## Motion parallax in games
+
+This effect is frequently replicated in games by layering transparent images over each other.
+
+For example, our Mario game layers images from ``/images/platformer/backgrounds``
+
+![combined](../../../images/lesson/combined.gif)
+
+Notice how as the player moves, the mountains in the background move slower than the hills closer to the player.
+
+This is accomplished by setting different speed logic to each of the backgrounds, then layering on top of each other.
+
+![hills](../../../images/lesson/hills.gif)
+
+> Fast moving hills in the front
+
+![mountains](../../../images/lesson/mountains.gif)
+
+> Slower moving mountains in the back
+
+In our game, this is because both the ``backgroundHills`` object and the ``backgroundMountains`` object have a speed attribute which is set differently based on player movement:
+
+```js
+if (this.isKeyActionLeft(key) && this.x > 2) {
+                GameEnv.backgroundHillsSpeed = -0.4;
+                GameEnv.backgroundMountainsSpeed = -0.1;
+            } else if (this.isKeyActionRight(key)) {
+                GameEnv.backgroundHillsSpeed = 0.4;
+                GameEnv.backgroundMountainsSpeed = 0.1;
+            } 
+```
+
+## Changing Backgrounds
+
+Add Under Water background to the avaenida
+```js
+backgrounds: {
+        start: { src: "/images/platformer/backgrounds/home.png" },
+        hills: { src: "/images/platformer/backgrounds/hills.png" },
+        avenida: { src: "/images/platformer/backgrounds/avenidawide3.jpg" },
+        mountains: { src: "/images/platformer/backgrounds/mountains.jpg" },
+        clouds : { src: "/images/platformer/backgrounds/clouds.png"},
+        space: { src: "/images/platformer/backgrounds/planet.jpg" },
+        castles: { src: "/images/platformer/backgrounds/castles.png" },
+        loading: { src: "/images/platformer/backgrounds/greenscreen.png" },
+        complete: { src: "/images/platformer/backgrounds/OneStar.png" },
+        complete2: { src: "/images/platformer/backgrounds/TwoStar.png" },
+        end: { src: "/images/platformer/backgrounds/Congratulations!!!.png" },
+        water: {src: "/images/platformer/backgrounds/water.jpg"},
+}
+```
+I did it by adding a water background to the game setup. js
+
+Here is what I also changed 
+```js
+const avenidaGameObjects = [
+        // GameObject(s), the order is important to z-index...
+        { name: 'water', id: 'background', class: Background, data: this.assets.backgrounds.water },
+        { name: 'sand', id: 'platform', class: Platform, data: this.assets.platforms.sand },
+        { 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.5, yPercentage: 0.85 },
+        { name: 'blocks', id: 'jumpPlatform', class: BlockPlatform, data: this.assets.platforms.block, xPercentage: 0.5368, yPercentage: 0.85 },
+        { name: 'itemBlock', id:'jumpPlatform', class: JumpPlatform, data: this.assets.platforms.itemBlock, xPercentage: 0.4, yPercentage: 0.65 },
+        { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage: 0.3, minPosition: 0.05},
+        { name: 'goomba', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.5, minPosition: 0.3 },
+        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.09},
+        { name: 'mushroom', id: 'mushroom', class: Mushroom, data: this.assets.enemies.mushroom, xPercentage: 0.49},
+        { name: 'goombaSpecial', id: 'goomba', class: Goomba, data: this.assets.enemies.goomba, xPercentage:  0.75, minPosition: 0.5 }, //this special name is used for random event 2 to make sure that only one of the Goombas ends the random event
+        { name: 'flyingGoomba', id: 'flyingGoomba', class: FlyingGoomba, data: this.assets.enemies.flyingGoomba, xPercentage:  0.5, minPosition:  0.05},
+        { name: 'flyingGoomba', id: 'flyingGoomba', class: FlyingGoomba, data: this.assets.enemies.flyingGoomba, xPercentage:  0.9, minPosition: 0.5},
+        { name: 'lopez', id: 'player', class: Player, data: this.assets.players.lopez },
+        { name: 'tube', id: 'tube', class: Tube, data: this.assets.obstacles.tube },
+        { name: 'complete', id: 'background', class: BackgroundTransitions,  data: this.assets.backgrounds.complete },
+]
+```
+
+I changed the anvenida background with water for the game.
+
+Now  i am going to talk about how i add the water and sand images to the repository. so i dragged the water image to the backgrounds in the image file.
+Also i added the sand image to the platform file in images in vs code.
+
+Here is how i added the sand image to the platforms in game set up. Js
+
+```js
+platforms: {
+        grass: { src: "/images/platformer/platforms/grass.png" }, 
+        sand: { src: "/images/platformer/platforms/sand.png" }, 
+        alien: { src: "/images/platformer/platforms/alien.png" },
+        bricks: { src: "/images/platformer/platforms/brick_wall.png" },
+        block: { src: "/images/platformer/platforms/brick_block.png" }, //MAY need 3 new variables: sizeRatio, widthRatio, and heightRatio
+}
+```
+I add a new new line to the platforms in the game set up. Js and then i added the sand image to the platforms 
+
+but i am still fixing the sand platform issue until it works in the game for the anvenida level.
+
+## Other
+
+- Changing speed of goombas
+- Adding more thematic elements to levels (like bananas to monkey level)

assets/js/platformer3x/BlockPlatform.js

@@ -2,7 +2,7 @@ import GameEnv from './GameEnv.js';
 import GameObject from './GameObject.js';
 export class BlockPlatform extends GameObject {
     constructor(canvas, image, data, xPercentage, yPercentage) {
-        super(canvas, image, data, 0.0, 0.0);
+        super(canvas, image, data);
         this.platformX = xPercentage * GameEnv.innerWidth;
         this.platformY = yPercentage;
     }

assets/js/platformer3x/Character.js

@@ -2,8 +2,8 @@ import GameEnv from './GameEnv.js';
 import GameObject from './GameObject.js';
 
 class Character extends GameObject {
-    constructor(canvas, image, data, widthPercentage = 0.0, heightPercentage = 0.0) {
-        super(canvas, image, data, widthPercentage, heightPercentage);
+    constructor(canvas, image, data) {
+        super(canvas, image, data);
 
         // sprite sizes
         this.spriteWidth = data.width;

assets/js/platformer3x/GameObject.js

@@ -3,7 +3,7 @@ import Socket from './Multiplayer.js';
 
 class GameObject {
     // container for all game objects in game
-    constructor(canvas, image, data, widthPercentage = 0.0, heightPercentage = 0.0) {
+    constructor(canvas, image, data) {
         this.x = 0;
         this.y = 0;
         this.frame = 0;
@@ -21,8 +21,7 @@ class GameObject {
         this.collisionData = {};
         this.jsonifiedElement = '';
         this.shouldBeSynced = false; //if the object should be synced with the server
-        this.widthPercentage = widthPercentage;
-        this.heightPercentage = heightPercentage;
+        this.hitbox = data?.hitbox || {};
         // Add this object to the game object array so collision can be detected
         // among other things
         GameEnv.gameObjects.push(this); 
@@ -164,20 +163,10 @@ class GameObject {
         const thisRectLeftNew = otherCenterX - thisRectWidth / 2;
 
         // Calculate hitbox constants
-        var widthPercentage = this.widthPercentage;
-        var heightPercentage = this.heightPercentage; 
-                /* if (this.canvas.id === "player" && other.canvas.id === "blockPlatform") {
-                    // heightPercentage = 0;
-                    // widthPercentage = 0;
-                } */
-        if(this.canvas.id === "jumpPlatform" && other.canvas.id === "player") { 
-            heightPercentage = -0.2;
-            //hitbox for activation is slightly larger than the block to ensure
-            //that there is enough room for mario to collide without getting stopped by the platform
-        }
-                /* if (this.canvas.id === "goomba" && other.canvas.id === "player") {
-                    heightPercentage = 0.2;
-                } */
+        var widthPercentage = this.hitbox?.widthPercentage || 0.0;
+        var heightPercentage = this.hitbox?.heightPercentage || 0.0;
+
+        // Calculate hitbox reductions from the width and height
         const widthReduction = thisRect.width * widthPercentage;
         const heightReduction = thisRect.height * heightPercentage;
 

assets/js/platformer3x/GameSetup.js

@@ -168,9 +168,13 @@ const GameSetup = {
 
     assets: {
       obstacles: {
-        tube: { src: "/images/platformer/obstacles/tube.png" },
+        tube: { src: "/images/platformer/obstacles/tube.png",
+                hitbox: { widthPercentage: 0.5, heightPercentage: 0.5}
+              },
         coin: { src: "/images/platformer/obstacles/coin.png"},
-        tree: { src: "/images/platformer/obstacles/tree.png"}
+        tree: { src: "/images/platformer/obstacles/tree.png",
+                hitbox: { widthPercentage: 0.5, heightPercentage: 0.5}
+              },
       },
       platforms: {
         grass: { src: "/images/platformer/platforms/grass.png" },
@@ -186,6 +190,7 @@ const GameSetup = {
           height: 204,
           scaleSize: 80,
           speedRatio: 0.7,
+          hitbox: { widthPercentage: 0.4, heightPercentage: -0.2}
         }
       },
       backgrounds: {
@@ -212,7 +217,8 @@ const GameSetup = {
           wd: { row: 10, frames: 15 },
           a: { row: 3, frames: 7, idleFrame: { column: 7, frames: 0 } },
           s: { row: 12, frames: 15 },
-          d: { row: 2, frames: 7, idleFrame: { column: 7, frames: 0 } }
+          d: { row: 2, frames: 7, idleFrame: { column: 7, frames: 0 } },
+          hitbox: { widthPercentage: 0.3, heightPercentage: 0.8}
         },
         monkey: {
           src: "/images/platformer/sprites/monkey.png",
@@ -250,6 +256,7 @@ const GameSetup = {
           scaleSize: 60,
           speedRatio: 0.7,
           xPercentage: 0.6,
+          hitbox: { widthPercentage: 0.0, heightPercentage: 0.2}
         },
         flyingGoomba: {
           src: "/images/platformer/sprites/flying-goomba.png",
@@ -262,6 +269,7 @@ const GameSetup = {
           src: "/images/platformer/platforms/mushroom.png",
           width: 200,
           height: 180,
+          hitbox: { widthPercentage: 0.0, heightPercentage: 0.2}
         },
       }
     },

assets/js/platformer3x/Goomba.js

@@ -5,7 +5,7 @@ import GameControl from './GameControl.js';
 export class Goomba extends Character {
     // constructors sets up Character object 
     constructor(canvas, image, data, xPercentage, yPercentage, name, minPosition){
-        super(canvas, image, data, 0.0, 0.2);
+        super(canvas, image, data);
 
         //Unused but must be Defined
         this.name = name;

assets/js/platformer3x/JumpPlatform.js

@@ -4,7 +4,7 @@ import GameObject from './GameObject.js';
 
 export class JumpPlatform extends GameObject {
     constructor(canvas, image, data, xPercentage, yPercentage, name) {
-        super(canvas, image, data, 0.4, -0.2);
+        super(canvas, image, data);
         this.platformX = xPercentage * GameEnv.innerWidth;
         this.platformY = yPercentage;
         this.data = data;

assets/js/platformer3x/Mushroom.js

@@ -5,7 +5,7 @@ import GameControl from './GameControl.js';
 export class Mushroom extends Character {
     // constructors sets up Character object 
     constructor(canvas, image, data, xPercentage, yPercentage, name, minPosition){
-        super(canvas, image, data, 0.0, 0.2);
+        super(canvas, image, data);
 
         //Unused but must be Defined
         this.name = name;

assets/js/platformer3x/Player.js

@@ -14,8 +14,8 @@ import GameControl from './GameControl.js';
  */
 export class Player extends Character {
     // instantiation: constructor sets up player object 
-    constructor(canvas, image, data, widthPercentage = 0.3, heightPercentage = 0.8) {
-        super(canvas, image, data, widthPercentage, heightPercentage);
+    constructor(canvas, image, data) {
+        super(canvas, image, data);
         // Player Data is required for Animations
         this.playerData = data;
         GameEnv.invincible = false; 

assets/js/platformer3x/SettingsControl.js

@@ -497,6 +497,27 @@ export class SettingsControl extends LocalStorage{
         var invertControl = settingsControl.isInvertedInput;
         document.getElementById("sidebar").append(invertControl); 
 
+        var hintsSection = document.createElement("div")
+        hintsSection.innerHTML = "Toggle fun facts: "
+
+        var hintsButton = document.createElement("input")
+        hintsButton.type = "checkbox"
+        hintsButton.checked = true
+
+        hintsButton.addEventListener("click", () => {
+            const hints = document.getElementsByClassName("fun_facts")[0]
+
+            if (!hintsButton.checked) {
+                hints.style.display = "none"
+            }
+            else {
+                hints.style.display = "unset"
+            }
+        })
+
+        hintsSection.append(hintsButton)
+        document.getElementById("sidebar").append(hintsSection)
+
         // Get/Construct HTML input and event update for game speed 
         var gameSpeed = settingsControl.gameSpeedInput;
         document.getElementById("sidebar").append(gameSpeed);

assets/js/platformer3x/Tree.js

@@ -2,8 +2,8 @@ import GameEnv from './GameEnv.js';
 import GameObject from './GameObject.js';
 
 export class Tree extends GameObject {
-    constructor(canvas, image) {
-        super(canvas, image, 0, 0.5, 0.5);
+    constructor(canvas, image, data) {
+        super(canvas, image, data);
     }
 
     // Required, but no update action

assets/js/platformer3x/Tube.js

@@ -2,8 +2,8 @@ import GameEnv from './GameEnv.js';
 import GameObject from './GameObject.js';
 
 export class Tube extends GameObject {
-    constructor(canvas, image) {
-        super(canvas, image, 0, 0.5, 0.5);
+    constructor(canvas, image, data) {
+        super(canvas, image, data);
     }
 
     // Required, but no update action