Start to play Game!

Game Repository

Overview and Usage

• This game is improved based on the MP3 - Mario Game. I added more functions inside like Mario could move right, left and jump. There are 2 monsters: Gooma and Bald Cleft. Mario could kill Gooma by jumping on Gooma and dying by contacting monsters face to face.
• Players will have the score start with 3 at the beginning. Score will += 1 when Mario kills Gooma by jumping on Gooma. Mario could shoot bullets to kill Gooma(Bald Cleft couldn’t be killed). Each bullet will deduct 1 point from the score. If scores lower than 0, the game will be over.




Game Gif

Development Process

1. Clone MP3 file
   - Set up the new repository in Github
   - Clone MP3 file into the new repository


2. Develop the Javascript Page
   - Transfering Gif into the Png file and LoadAnimation inside of the JS file.
   - Improving the Gameover interface.
   - Set more conditional to make Mario moving right, left and able to jump only one time.
   - Fixing the “collusion” issue with overlap. - Changing the camera position and velocity. - Create a shooting function and 2 new monsters. - Thinking about the way to allow Mario to kill Gooma by jumping on its head.




Javascript



Javascript

3. Improving with Rollup
   - Inserting all of images into "copy" part




rollup.config.js file



4. Deploying to Github Pages
   - Deleting the node_modules from dist and Run the deploy script with “npm run deploy” again to deploy my game

Issue Deep-Dive

1. The problem I encountered:
   - Animation set up: I couldn't add gif into my Game directly
   - Animation speed up: the animation will run faster and faster
   - Spinning issue: The mario will start spin after he contact with Gooma
   - how to kills Gooma: No idea how to make Mario kills Gooma by jumping on Gooma
   - Bullet issue: After Mario shoot bullets, the mario will start to spin again
   - Moving issue: After I press "A" or "D", Mario could only move left or right less than 1 second. I want Mario able to continue moving until player release the keys.
   


2. How I resolved these issues:
   - Animation set up
   Save the Gif and convert to png files. Then, using "loadAnimation" to insert each single png file.
   
   - Animation speed up
   In the setup function, creating the new Group() and use ".addAni" to add ("random name", the variable that I store the loadAnimation);
   In the draw function, write the code like:

             
               if (random() > 0.995) {
                 let new_Gooma = new GoomaMonster.Sprite(width, height-100, 100, 100);
                 new_Gooma.scale = 0.3;
               }
             
           

   
   
   - Spining issue
   Instead of using the collision, I use the overlap.
   
   - How to kills Gooma
   Considering to create another condition when mario overlap with Gooma, like:

             
               if (mario.overlap(GoomaMonster[i])) {
                 // if (mario.overlap(GoomaMonster[i], {preventOverlap: true})) {
                   // check if the player is jumping
                   if (mario.position.y < height-90) {
                     // the player is jumping, remove the monster
                     GoomaMonster[i].remove();
                     score = score + 1;
                   } else {
                     // the player is not jumping, end the game
                     endGame();
                   }
                 } else {
                   GoomaMonster[i].position.x -= 0.5;
                 }
               }
             
           

   
   
   - Bullet issue
   I find out the Push() will cause this problem. So I set up the bullet.velocity.x; bullet.velocity.y; bullet.position.y before push the bullets
   
   - Moving issue
   I addEventListener with ‘keydown':

             
               document.addEventListener('keydown', function(event) {
                 if (event.key === 'a') {
                   mario.velocity.x = -10;
                 }
                 if (event.key === 'd') {
                   mario.velocity.x = 1;
                 }
               });
             
         

Ideas and Future Work

1. Want to create the game levels with different terrains.
2. Want to stop Mario’s animation if Mario is not moving.
3. Want to let monsters have intelligence that can track Mario.

Kudos

• Professor hannah help me a lot!
  


• Reference:
  MP3
  https://workshops.hackclub.com/platformer/