Submit templates for repl.it/templates here.

← Back to all posts
JavaScript Platformer Template
h
MattDESTROYER

A simple JavaScript platformer template/engine.

Documentation/Features:

Global variables (which you are allowed to use and may help).
FPS: The number of frames per in a second the program is currently running at.
width: The width of the canvas being used for your platformer.
height: The height of the canvas being used for your platformer.
Input: Provides you with access to user input, usage:

Camera: The position of the Camera in the current level;

Time: Time based object.

Dealing with events:

Mouse and keyboard events call functions named similarly to the event:

  • keyDown
  • keyUp
  • keyPress
  • mouseDown
  • mouseUp
  • mouseClick
  • mouseMove
    You can change these functions to create your own actions when these events occur, e.g:

Sets up a canvas (based on ID).

ID: The ID of the HTML canvas you want to use for your platformer.
fullScreen: Whether or not your canvas should be scaled to fit the screen. (Defaults to true.)

Starts your platformer game.

A 2D point.

x: The x position of the 2D coordinate.
y: The y position of the 2D coordinate.

Creates a polygon out of an array of points. (Used in objects.)
points: An array of Vector2s or Points.

Creates a rectangle mesh out of input width and height (RectangleMesh is an extension of polygon and keeps all properties polygons have). (Used in objects.)
width: The width of the rectangle.
height: The height of the rectangle.

Create a platform object. (Should be stored in a level.)

x: The x position for the PObject.
y: The y position for the PObject.
width: The width of the PObject.
height: The height of the PObject.
colour: The colour of the PObject.
type: The type of PObject (defines how the object interacts with the player).
update: A special function called every frame.

Create a text object. (Should be stored in a level.)

message: The message to be displayed.
font: The font style to for the message.
size: The size of the message.
x: The x position for the PText.
y: The y position for the PText.
colour: The colour of the PText.
type: How the PText interacts with the player.
update: A special function called every frame.

Create a level based on an array of objects. (Note: no need to save to variable.)
objects: An array of PObjects, PText objects and CustomPObjects.

Create a player object. (Note: no need to save to variable)

x: The starting x position for the player. (Will respawn at this x coordinate.)
y: The starting y position for the player. (Will respawn at this y coordinate.)
width: The width of the player.
height: The height of the player.
colour: The colour of the player.
canWallJump: Whether or not the player can 'wall jump' (bounce up walls).
update: A special function called every frame.

Math shortcuts:

Built-in functions:

NOTE: Platformer engine has been moved to my GitHub 'CDN' repository for better access (hence the extra source in the HTML file and the removal of the Platformer.js file).

FINAL NOTE: The game may not work in iframe below, if the screen goes blank, click --> HERE <-- (https://platformer-template.mattdestroyer.repl.co/)

Voters
MikeW3
VulcanWM
AmoghTheCool
InvisibleOne
MattDESTROYER
Comments
hotnewtop
VulcanWM

Nice!

MattDESTROYER

@VulcanWM Thanks :)

VulcanWM
InvisibleOne

Cool

MattDESTROYER

@InvisibleOne Thanks :)