JIT
Platformer Game with 3D Change
Create a platformer game with a bunch of cool effects and animations. Add a button that changes the game to a 3d, top-down game. Use your imagination!

Okay, let's create a game that starts as a 2D platformer and includes a button to switch to a simulated top-down view. We'll use the Kaboom.js library to make this easier.

This sets up a basic Kaboom.js project:

  1. index.html: Contains the canvas container, a button to switch views, and includes the Kaboom library and our game.js script.
  2. game.js:
    • Initializes Kaboom.
    • Loads sprites for the player, blocks, coins, etc.
    • Defines a platformer scene with gravity, level layout, player controls (left/right/jump), coin collection, basic hazards, and simple particle effects.
    • Defines a topdown scene with zero gravity, a different map layout (using grass and walls), 4-directional player movement, and collision with walls.
    • The score is passed from the platformer to the top-down view.
    • An HTML button (#switchViewBtn) is used to trigger the go() function to switch between the platformer and topdown scenes. The button's text and onclick handler are updated depending on the current scene.
    • The game starts in the platformer scene.

You can run this now. Use the arrow keys to control the character in both modes and click the button to switch between the 2D platformer and the simulated top-down view.*

Updated files
v1