final2

README.md

@@ -1,10 +1,352 @@
-# 🚀 p5.js-templates
 
-p5.js templates for ID311 Software Prototyping.
+# 1. Author info
+- name : Joowon Kim
+- ID : 20200150
+- Email : taeng31@kaist.ac.kr
 
-This is pangame of nintendo chracters.
+# 2. URL of the git repository
+-  https://github.com/joowonkime/Mario-fan-game
 
-all sprites came from https://www.spriters-resource.com/nintendo_switch/K.html
 
-and I cut the sprite in https://www.piskelapp.com/p/create/sprite
+# 3. Youtube Video Links
+https://www.youtube.com/watch?v=rjB9X49TGNM
 
+# 4. Explanation of Game
+
+This game is a 2-player game where you push your opponent out of the map with various attacks and the last player alive wins.
+Player 1 is Mario and can move with the arrow keys, throw a fireball with the [ key, and throw a bomb with the ] key.
+Player 2 is Luigi and can move with the wasd key, throw a fireball with the t key, and throw a bomb with the y key.
+A player's death count can only be reduced by being pushed out of the map. Each player can use various attacks to push the opponent out of the map.
+- A player can shoot a fireball and push the opponent out if it hits the opponent in a straight line.
+- A player can throw a bomb to send the opponent flying farther and destroy some blocks. The longer you charge the bomb, the farther it flies. The player starts with 5 bombs.
+- A player can shoot a missile by charging the bomb key for more than 1 second. The huge missile slowly moves forward and pushes the player it touches all the way. This missile can also be climbed on top. However, this missile is filled by one every time you eat three items.
+
+![huge missile!](./Report_image/missile.png)
+
+Also, for the variety of the game, items are dropped at random locations at regular intervals. Each item has the following types.
+
+![mush](./Report_image/mush.png)
+- **mush**: The player who gets this will have their fireball abilities strengthened for a certain period of time, knocking back opponents twice as far.
+
+![poison](./Report_image/poison.png)
+- **poison**: The player who gets this will be poisoned and stuck in place. While stuck, they will not be knocked back at all and cannot move. However, they can be pushed back by missiles.
+
+![giant](./Report_image/giant.png)
+- **giant**: The player who gets this will double in size. The larger player's fireball size will be doubled, and they will only be pushed back by half of the opponent's knockback attacks.
+
+![bombadd](./Report_image/bombadd.png)
+- **bombadd**: 5 bombs are added.
+
+The player starts with a total of 5 death counts, and the game is to survive by pushing away the opponents using the above methods.
+
+# 5. Code Explanation
+![commit](./Report_image/commit_record.png)
+
+This game is based on p5.js.
+
+The entire code can be broken down into the following major components:
+
+Downloading image and music assets
+
+Creating the background and map
+
+Implementing the Player class
+
+Attack object system
+
+Item interactions
+
+## 🎨 1. Image Sprites
+All sprite assets came from:
+👉 https://www.spriters-resource.com/nintendo_switch/K.html
+
+The downloaded Mario sprite sheets are handled in imageAsset.js via the following steps:
+
+preloadAssets: Loads the sprite sheet using loadImage.
+
+sliceAssets: Extracts specific regions (using pixel coordinates and sizes) using createImage. Includes sprites for player states, items, and objects.
+
+applyChromakey: Removes the shared background color from the sprites to make them transparent using a chroma key approach.
+
+## 🎵 1-1. Music Assets
+All music assets came from:
+👉 https://downloads.khinsider.com/game-soundtracks/album/super-mario-bros
+
+All sound effects and background music are handled through soundAsset.js.
+
+## 🌄 2. Map and Background
+The map and background are generated in sketch.js during setup() using assets from ImageAsset.js.
+
+Background Class
+Repeats a background image across the screen.
+
+Pressing the spacebar changes the background theme (aesthetic only).
+
+Map Structure
+Generated from a predefined mapLayout.
+
+Uses two block types: groundBlock and breakableBlock.
+
+Managed by the Tile class.
+
+Tile Class
+Represents a 32×32 tile placed using constructor(x, y, type).
+
+collides() detects collision with the player.
+
+Tile.type is checked in bomb.explode() to decide if a block can break.
+
+If a block breaks, BreakEffect triggers a short animation.
+
+## 📦 2-1. Global Object Arrays
+Repeatedly created objects are managed via global arrays:
+
+
+let tiles = [], decoTiles = [];
+
+let projectiles = [], specialProjectiles = [], bombs = [];
+
+let breakEffects = [];
+
+let items = [];
+
+And each global variable has a function that manages it.
+#### handleProjectiles()
+#### handleBombs()
+#### handleSpecialProjectiles()
+-> These three functions commonly track the interaction between each object and player through update([player1, player2]), and check destroy() to remove the object when it needs to be removed through splice(i, 1).
+#### breakManager()
+-> When a block explodes due to a bomb, the breakeffect is stored in the breakeffects array, and after this animation is over, it removes the breakeffect from the breakEffects array.
+#### randomSpawnItem()
+-> Randomly spawns and drops a random type of item at a random x-coordinate every 10~14 seconds.
+
+## 🧍 3. Player Class
+The Player class manages all player behavior and interactions. Below is a breakdown of its core structure and methods.
+
+### Constructor
+constructor(x, y, imgSet, controls)
+Initializes player with the following:
+
+x, y: **Position**
+
+vx, vy: **Movement velocities**
+
+knockbackVX: **Knockback velocity**
+
+width, height: **Size**
+
+onGround: **Boolean to check ground contact**
+
+jumpCount: **Counts number of jumps**
+
+imgSet: **Assigned sprite set**
+
+controls, keys: Input key mapping & tracking
+
+bombHoldStartTime, chargeTime, maxCharge: Charge system for bombs
+
+facing, state, frame: **For sprite control and animation**
+
+_animTimer, _animInterval: **Timing helper for walking animation**
+
+attackTimer: **Prevents rapid re-attacks**
+
+dropping, dropRowY, currentTileY  : **Drop-through tile logic**
+
+itemCount, bombCount, bigMissileCount: **Player resources**
+
+fireTimer, poisonTimer, giantTimer: **Status effect durations**
+
+deathCount: **Lives remaining**
+
+### update()
+Called every frame to update player state:
+
+Updates status effect timers (fireTimer, poisonTimer, giantTimer).
+
+Decreases attackTimer. When it reaches 0, switches animation state to 'idle' or 'jump'.
+
+If the bomb key is held, updates chargeTime up to maxCharge.
+
+Responds to left/right movement inputs and adjusts facing direction.
+
+Applies gravity and updates vertical position.
+
+Checks collision with tiles to determine whether the player is on the ground.
+
+Uses landed flag to distinguish whether the player just landed this frame (vs onGround which tracks ongoing contact).
+
+Implements drop-through logic: pressing down allows the player to fall through tiles. Uses dropRowY and currentTileY to prevent re-dropping the same tile.
+
+Applies friction to knockbackVX.
+
+If the player falls below deathZoneY, calls respawn().
+
+### applyItem()
+Called when the player picks up an item.
+
+Increments itemCount and applies the corresponding status effect by resetting its timer.
+
+### respawn()
+Plays a death sound.
+
+deathcount--
+
+If the player has lives remaining, respawns them at the top of the screen.
+
+If no lives remain, ends the game(gameOver flag = true) and declares the other player as the winner.
+
+### jump()
+Increments jumpCount and applies upward velocity.
+
+### shoot()
+Fires a fireball when the fire key is pressed:
+
+Adds a new Projectile to projectiles
+
+Triggers attack animation
+
+Applies slight knockback to the player
+
+### dropBomb()
+Launches a bomb when triggered:
+
+Adds a new Bomb to bombs
+
+Plays attack animation
+
+Bomb’s velocity is based on chargeTime
+
+### fireBigMissile()
+Fires a large missile:
+
+Adds a BigMissile to specialProjectiles
+
+Plays attack animation
+
+Applies stronger knockback to the player
+
+### handleKeyPressed() and handleKeyReleased()
+Handles jump and fire inside handleKeyPressed().
+
+Bomb behavior is split:
+
+handleKeyPressed() sets bombHoldStartTime
+
+handleKeyReleased() checks chargeTime and determines whether to throw a bomb or fire a missile.
+
+### draw()
+Draws the charge gauge above the player’s head.
+
+Flips sprite based on facing.
+
+Adds visual poison effect when poisonTimer is active.
+
+Changes sprite frame based on state and frame to animate character behavior.
+
+# 💥 4. Attack Object
+This game features three types of attack-related classes: Projectile, Bomb, and BigMissile.
+
+🚀 Projectile Class
+#### constructor()
+Determines the size based on two flags:
+
+enchanted: whether the firing player had consumed a "mushroom" item.
+
+isGiant: whether the player had consumed a "giant" item.
+
+Spawns the projectile at a given (x, y) position.
+
+Sets spawnTime and a lifeTime of 10 seconds.
+
+#### update()
+The projectile moves forward in a straight line.
+
+If it hits a player, the shouldDestroy flag is set to true to allow removal.
+
+#### draw()
+Renders the fire sprite on screen.
+
+#### destroy()
+Returns the shouldDestroy flag to signal if the projectile should be removed.
+
+#### hits()
+Returns true if the projectile intersects with a player.
+
+💣 Bomb Class
+#### constructor(x, y, vx, vy)
+Initializes the bomb with position and velocity:
+
+this.x = x; this.y = y;
+
+this.vx = vx; this.vy = vy;
+
+this.width = 32; this.height = 32;
+
+this.timer = 120;
+
+this.explodeTimer = 15;
+
+this.exploded = false; : **Flag to check if bomb has exploded**
+
+this.warning = false; : **Flag to show warning before explosion**
+
+this.shouldRemove = false;
+
+this.radius = 100;
+
+this.stuck = false; : **Flag to check if bomb is stuck on a tile**
+
+this.stuckY = null;
+
+
+#### update()
+Updates the bomb's position while it bounces (with gravity and dampening: this.vy *= -0.5; this.vx *= 0.7).
+
+After 1 second: warning = true
+
+After 2 seconds: exploded = true, and explode() is triggered.
+
+#### explode()
+Applies knockback to all players within the blast radius, scaled based on their distance and item status.
+
+Breakable blocks within the radius are destroyed with a break animation via breakEffects.push().
+
+#### draw()
+Displays the bomb with different sprites depending on state: normal, warning, or exploding.
+
+#### destroy()
+Returns the shouldDestroy flag to indicate if the bomb should be removed.
+
+🛰️ BigMissile Class
+#### constructor()
+Creates a missile object at a given location with a lifeTime of 20 seconds.
+
+#### update()
+If a player collides horizontally(X) with the missile, they are pushed along the missile's direction.
+
+If a player collides vertically(Y), they can stand on top of the missile like a platform.
+
+Collision detection is handled by hits().
+
+#### hits()
+Returns true if the missile intersects with a player.
+
+#### destroy()
+Returns the shouldDestroy flag to indicate if the missile should be removed.
+
+# 🎁 5. Items and Miscellaneous
+### Item Class:
+Functions similarly to other object classes. Items are spawned mid-air via randomSpawnItem() and fall due to gravity until they land on a tile.
+Collision with the player is checked using the hits() method.
+When picked up, the item's toRemove flag is set to true.
+#### update() 
+In update, we continuously check whether the tile in the position it is placed in is broken or not, and if it is broken, we change it to stuck = false and make it fall back down due to gravity.
+### drawUI():
+Renders a UI panel on the bottom-left and bottom-right corners of the screen, showing each player's current status and resources.
+
+### drawVictoryScreen():
+When gameOver is true, a victory screen is displayed in the center of the canvas showing the winner’s sprite along with the text "YOU WIN!".
+
+### window.addEventListener("keydown", )
+By using e.preventDefault(), I prevented the screen from scrolling when the player uses the arrow keys, eliminating the inconvenience of the game screen moving.

assets/SMB1 Sounds/CharaMario_Arwing_move.txt

@@ -0,0 +1,2 @@
+loop start: 43778 samples (0:01.368 seconds)
+loop end: 66338 samples (0:02.073 seconds)

assets/SMB1 Sounds/CharaMario_MarioKart_engine.txt

@@ -0,0 +1,2 @@
+loop start: 0 samples (0:00.000 seconds)
+loop end: 2000 samples (0:00.063 seconds)

assets/SMB1 Sounds/Charamario_DonkeyKongJr_walk1.txt

@@ -0,0 +1,2 @@
+loop start: 0 samples (0:00.000 seconds)
+loop end: 34616 samples (0:01.082 seconds)

assets/SMB1 Sounds/Charamario_DonkeyKongJr_walk2.txt

@@ -0,0 +1,2 @@
+loop start: 0 samples (0:00.000 seconds)
+loop end: 34616 samples (0:01.082 seconds)

assets/SMB1 Sounds/Charamario_MarioOriginal_walk1.txt

@@ -0,0 +1,2 @@
+loop start: 9226 samples (0:00.288 seconds)
+loop end: 35018 samples (0:01.094 seconds)

assets/SMB1 Sounds/Charamario_MarioOriginal_walk2.txt

@@ -0,0 +1,2 @@
+loop start: 0 samples (0:00.000 seconds)
+loop end: 26050 samples (0:00.814 seconds)

assets/SMB1 Sounds/NewMario2_GoldEffect.txt

@@ -0,0 +1,2 @@
+loop start: 0 samples (0:00.000 seconds)
+loop end: 80563 samples (0:02.518 seconds)

imageAsset.js

@@ -0,0 +1,121 @@
+let spriteSheets = {};
+let P1imgs = {}, P2imgs = {}, itemimgs = {}, tileimgs = {}, decoimgs = {};
+let backgroundManager;
+
+function preloadAssets() {
+  spriteSheets.backgrounds   = loadImage("assets/Mario-Background.png");
+  spriteSheets.characters    = loadImage("assets/Mario-Character+Item.png");
+  spriteSheets.specialweapon = loadImage("assets/Mario-Enemy.png");
+  spriteSheets.tileset       = loadImage("assets/Mario-Tileset.png");
+
+  soundFormats('mp3', 'wav');
+
+}
+
+function sliceAssets() {
+  const bgsrc = spriteSheets.backgrounds;
+  const w = 512, h = 512;
+  const bgDay   = createImage(w, h);
+  const bgNight = createImage(w, h);
+  bgDay.copy(bgsrc,   514, 1565, w, h, 0, 0, w, h);
+  bgNight.copy(bgsrc, 514, 5721, w, h, 0, 0, w, h);
+  backgroundManager = new Background(bgDay, bgNight);
+
+  function applyChromaKey(img, keyColor = {r:147, g:187, b:236}) {
+    img.loadPixels();
+    for (let i = 0; i < img.pixels.length; i += 4) {
+      if (img.pixels[i] === keyColor.r && img.pixels[i+1] === keyColor.g && img.pixels[i+2] === keyColor.b) {
+        img.pixels[i+3] = 0;
+      }
+    }
+    img.updatePixels();
+  }
+
+  const src = spriteSheets.characters;
+  const cw = 32, ch = 32;
+  const mi = createImage(cw,ch); mi.copy(src, 1, 98, cw, ch, 0,0, cw,ch);
+  const mw1= createImage(cw,ch); mw1.copy(src,75, 98, cw,ch,0,0, cw,ch);
+  const mw2= createImage(cw,ch); mw2.copy(src,108,98, cw,ch,0,0, cw,ch);
+  const mw3= createImage(cw,ch); mw3.copy(src,141,98, cw,ch,0,0, cw,ch);
+  const mj = createImage(cw,ch); mj.copy(src,215,98, cw,ch,0,0, cw,ch);
+  const ma = createImage(cw,ch); ma.copy(src,627,98, cw,ch,0,0, cw,ch);
+  [mi,mw1,mw2,mw3,mj,ma].forEach(img=>applyChromaKey(img));
+  
+  P1imgs = { idle:[mi], walk:[mw1,mw2,mw3], jump:[mj], shoot:[ma] };
+
+  const li = createImage(cw,ch); li.copy(src,1,629,cw,ch,0,0,cw,ch);
+  const lw1= createImage(cw,ch); lw1.copy(src,75,629,cw,ch,0,0,cw,ch);
+  const lw2= createImage(cw,ch); lw2.copy(src,108,629,cw,ch,0,0,cw,ch);
+  const lw3= createImage(cw,ch); lw3.copy(src,141,629,cw,ch,0,0,cw,ch);
+  const lj = createImage(cw,ch); lj.copy(src,215,629,cw,ch,0,0,cw,ch);
+  const la = createImage(cw,ch); la.copy(src,627,629,cw,ch,0,0,cw,ch);
+  [li,lw1,lw2,lw3,lj,la].forEach(img=>applyChromaKey(img));
+
+  P2imgs = { idle:[li], walk:[lw1,lw2,lw3], jump:[lj], shoot:[la] };
+
+  const spsrc = spriteSheets.specialweapon;
+  const ow=16, oh=16;
+  const mush = createImage(ow,oh); mush.copy(src,1,2126,ow,oh,0,0,ow,oh);
+  const bombadd = createImage(ow,oh); bombadd.copy(spsrc, 39, 117, ow, oh, 0, 0, ow, oh);
+  const poison= createImage(ow,oh); poison.copy(src,1,2143,ow,oh,0,0,ow,oh);
+  const giant = createImage(ow,oh); giant.copy(src,52,2126,ow,oh,0,0,ow,oh);
+  const fire  = createImage(ow/2,oh/2); fire.copy(src,101,2177,ow/2,oh/2,0,0,ow/2,oh/2);
+  const fireench = createImage(ow, oh); fireench.copy(spsrc, 601, 751, ow, oh, 0, 0, ow, oh);
+  const bomb  = createImage(ow,oh); bomb.copy(src,194,2143,ow,oh,0,0,ow,oh);
+  const bm    = createImage(4*ow,4*oh); bm.copy(spsrc,127,356,4*ow,4*oh,0,0,4*ow,4*oh);
+  const beffect = createImage(1.5*ow, 1.5*oh); beffect.copy(spsrc, 604, 413, 1.5*ow, 1.5*oh, 0, 0, 1.5*ow, 1.5*oh);
+  [mush,bombadd,poison,giant,fire,fireench,bomb,bm, beffect].forEach(img=>applyChromaKey(img));
+  function applyColorFilter(img, delta) {
+    img.loadPixels();
+    for (let i = 0; i < img.pixels.length; i += 4) {
+      const alpha = img.pixels[i+3];
+      if (alpha > 0) {
+        let r = img.pixels[i];
+        let g = img.pixels[i+1];
+        let b = img.pixels[i+2];
+        r = constrain(r + delta.r, 0, 255);
+        g = constrain(g - delta.g, 0, 255);
+        b = constrain(b - delta.b, 0, 255)
+        img.pixels[i]   = r;
+        img.pixels[i+1] = g;
+        img.pixels[i+2] = b;
+      }
+    }
+    img.updatePixels();
+  }
+  const bombWarn = bomb.get();
+  applyColorFilter(bombWarn, {r: 150, g: 100, b:200} );
+
+  itemimgs = {
+    mush:[mush], poison:[poison], giant:[giant], bombadd:[bombadd], fire_enchant:[fireench],
+    fire:[fire], bomb:[bomb], bigmissile:[bm], bomb_warning:[bombWarn], explosion:[beffect]
+  };
+
+  const tilesrc = spriteSheets.tileset;
+  const bb = createImage(ow, oh); bb.copy(tilesrc, 18, 23, ow, oh, 0, 0, ow, oh);
+  const qb = createImage(ow, oh); qb.copy(tilesrc, 35, 23, ow, oh, 0, 0, ow, oh);
+  const gb = createImage(ow, oh); gb.copy(tilesrc, 154, 142, ow, oh, 0, 0, ow, oh);
+  const gb1 = createImage(ow, oh); gb1.copy(tilesrc, 171, 74, ow, oh, 0, 0, ow, oh);
+  [bb, qb, gb, gb1].forEach(img => applyChromaKey(img));
+  tileimgs = {
+    breakableblock:  [bb],
+    questionblock:  [qb],
+    groundblock:  [gb],
+    groundblock1: [gb1]
+  };
+  const gb2 = createImage(ow, oh); gb2.copy(tilesrc, 171, 91, ow, oh, 0, 0, ow, oh);
+  const breffect1 = createImage(2*ow, 2*oh); breffect1.copy(spsrc, 640, 1, 2*ow, 2*oh, 0, 0, 2*ow, 2*oh);
+  const breffect2 = createImage(2*ow, 2*oh); breffect2.copy(spsrc, 673, 1, 2*ow, 2*oh, 0, 0, 2*ow, 2*oh);
+  const breffect3 = createImage(2*ow, 2*oh); breffect3.copy(spsrc, 706, 1, 2*ow, 2*oh, 0, 0, 2*ow, 2*oh);
+  [gb2, breffect1, breffect2, breffect3].forEach(img => applyChromaKey(img));
+  decoimgs = {
+    groundblock2: [gb2],
+    breakeffect1: [breffect1],
+    breakeffect2: [breffect2],
+    breakeffect3: [breffect3]
+  };
+
+
+
+
+}

index.html

@@ -5,6 +5,7 @@
   <script src="js/p5.js"></script>
   <script src="js/p5.dom.min.js"></script>
   <script src="js/p5.sound.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/p5.play@latest/lib/p5.play.js"></script>
 
   <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
   <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
@@ -13,6 +14,8 @@
   <meta charset="utf-8" />
 </head>
 
+<script src="imageAsset.js"></script>
+<script src="soundAsset.js"></script>
 <script defer src="sketch.js"></script>
 
 <body></body>

soundAsset.js

@@ -0,0 +1,17 @@
+let effectSound = {};
+let bgm = {};
+
+function preloadSounds() {
+    soundFormats('mp3','wav');
+    bgm.bgmGround         = loadSound('assets/M1_BGM_Ground_Play.mp3');
+
+    effectSound.jump    = loadSound('assets/SMB1 Sounds/M1_SmallMarioJump.wav');
+    effectSound.fire    = loadSound('assets/SMB1 Sounds/M1_FireBall.wav');
+    effectSound.dead    = loadSound('assets/SMB1 Sounds/M1_HitFloor.wav');
+    effectSound.getItem = loadSound('assets/SMB1 Sounds/M1_PowerUp.wav');
+    effectSound.breakBlock = loadSound('assets/SMB1 Sounds/M1_BreakBlock.wav');
+    effectSound.bomb    = loadSound('assets/SMB1 Sounds/SE_chargeshot.wav');
+    effectSound.bombthrow = loadSound('assets/SMB1 Sounds/M1_Cannon_fast.wav');
+    effectSound.bigmissile = loadSound('assets/SMB1 Sounds/M1_FireLong.wav');
+    effectSound.victory = loadSound('assets/SMB1 Sounds/M1_CourseClearFanfare.wav');
+}