Click here play game!

Overview and Usage

Development Process

  1. Installing and using a library
    - Following the instruction to install p5 library and create index.html file
    - Go to branchwelder/example-game to copy and paste the content from index.html

    2. index.html

  2. Local Development with Web Dev Server
    Install web-dev-server by using npm install --save-dev @web/dev-server. Then, editing the package.json file with start, build, and deploy scripts and use “npm run start” in terminal

    3. package.json file

  3. Bundling with Rollup
    - Install Rollup with "npm install rollup --save-dev" and Create the rollup.config.js file

    4. rollup.config.js file

  4. Using .gitignore
    - Create a .gitignore not file that not include my node_modules or dist folders in github

    5. .gitignore file

  5. Editing the javascript page with p5, p5.play, planck.min librarys
    - Create Animation for mario and set up the canvas size
    - Create groundSprites and obstacleSprites
    - Control the mario action with "w" and "s"
    - Create the interface if "gameover"

    6. 1st part of js file

    2nd part of js file

    3rd part of js file

    4th part of js file

  6. Deploying to Github Pages
    - Install the gh-pages package and add a deploy script to package.json. Run the deploy script with “npm run deploy”


Issue Deep-Dive

  1. The problem I encountered:
    - Library finding: I can't find out the correct p5 library to put in the HTML file
    - Set up process: I don't know why the "npm run deploy" is not working
    - P5.editor: I copy the code from p5.editor to js file, but it's not working
    - js file: canvas is little small; mario's Animation is not working
    - js file: using "if (groundSprites.overlap(player))", but this code not working
    - js file: keyDown function not working
    - js file: obstacle occurs too often
    - js file: I want obstacleSprites and groundSprites move from right to left when camera position moving
    - js file: Mario jump with incorrect gravity
    - js file: mouseClicked Function is not working

  2. How I resolved these issues:
    - Library finding issue
    I just copy the code from https://github.com/branchwelder/example-game/blob/main/index.html

    - "npm run deploy" is not working
    I delete the whole js.file and start to clone the new repository. Following the step from instructor to figure the issue.

    - code from p5.editor to js file not working
    I using the 
              
            window.draw = () =>
    to replace the "function"

    - canvas is little small
    The code from https://workshops.hackclub.com/platformer/ is too small, so I use the windowWidth and windowHeight to create canvas.

    - mario's Animation is not working
    I upload 3 mario images to generate the animation and use:
              
            window.preload = () => {
              mario_running = loadAnimation("Capture1.png","Capture3.png","Capture4.png");
            }


    - "if (groundSprites.overlap(player))" not working
    I create another function called "over":
              
            function over(mario, groundSprites) {
              mario.velocity.y = 0;
              mario.position.y = height - 90;
            }
    and use "over" function in the overlap like:
              
            mario.overlap(groundSprites, over)


    - keyDown function not working
    Instead of keydown, I start to use if statement like: if (key == 'w') {
    - obstacle occurs too often
    Reading the https://workshops.hackclub.com/platformer/, use the if statement to set up: 
              
            if (random() > 0.98)

    - Want obstacleSprites and groundSprites move from right to left when camera position moving
    Using the for loop to change the position of obstacleSprites and groundSprites: 
              
            for (var i = 0; i < obstacleSprites.length; i++) {
              obstacleSprites[i].position.x -= 5;
            }
            for (var i = 0; i < groundSprites.length; i++) {
              groundSprites[i].position.x -= 5;
            }
    - Mario jump with incorrect gravity
    Changing the keypress('w') to kb.presses('w') because kb.presses will only work at the moment of pressing the button

    - mouseClicked Function is not working
    I search online and find out the function which called "mouseIsPressed" and use it in draw(). Then, I change remove(obstacleSprites) to remove() and command original mouseClicked Function.


Ideas and Future Work

  1. Want to allow users to control mario with left and right keys
  2. Want to add the monster from Mario's story
  3. Dream version: Recreating classic Super Mario game!

Kudos