Mario/Player in page

[jm1021]

The first coding assignment is to have fun with a "player". See where you can go with this, add something fun to your page(s). This is just to have something unusual, with movement on your page. Perhaps fun or even annoying.

My Original: https://nighthawkcoders.github.io/teacher_portfolio/ Redo of Player: https://trystan-schmits.github.io/game_levels_mp/

[jm1021]

The code is written in JavaScript and uses the Liquid templating language to generate a sprite animation of Mario. The sprite animation is controlled by a Mario class, which has methods to start and stop different animations.

Raw Code

To add left movement, you'll need to modify the keydown event listener and the touchstart event listener. Currently, the keydown event listener only handles the "ArrowRight" and "ArrowLeft" keys, and the touchstart event listener only handles touches on the right and left halves of the screen.

Here's a brief plan on how to modify the code:

Define a new method in the Mario class to handle left movement. This method should be similar to the startWalking() and startRunning() methods, but it should move the sprite in the opposite direction.

Modify the keydown event listener to call the new method when the "ArrowLeft" key is pressed.

Modify the touchstart event listener to call the new method when the left half of the screen is touched.

Here's a sample implementation, but code may need adjustments.

class Mario {
  // ...
  startWalkingLeft() {
    this.stopAnimate();
    this.animate(this.obj["WalkL"], -3);  // Negative speed for left movement, check meta data for WalkL
  }

  startRunningLeft() {
    this.stopAnimate();
    this.animate(this.obj["Run1L"], -6);  // Negative speed for left movement, check meta data for Run1L
  }
  // ...
}

window.addEventListener("keydown", (event) => {
  // ...
  else if (event.key === "ArrowLeft") {
    event.preventDefault();
    if (event.repeat) {
      mario.stopAnimate();
    } else {
      if (mario.currentSpeed === 0) {
        mario.startWalkingLeft();
      } else if (mario.currentSpeed === -3) {
        mario.startRunningLeft();
      }
    }
  }
  // ...
});

window.addEventListener("touchstart", (event) => {
  // ...
  else {
    // move left
    if (currentSpeed === 0) { // if at rest, go to walking
      mario.startWalkingLeft();
    } else if (currentSpeed === -3) { // if walking, go to running
      mario.startRunningLeft();
    }
  }
  // ...
});

If you completed this task do the following...

• Make a plan of what you want to do, for instance adjust key events and movements to be more natural game movements.
• Look at other meta data is yml fille to see if movements you want to do can be animated.
• Look at student example through inspect to see how they changed to implementation.
• Start your custom implementation(s).