Submit templates for repl.it/templates here.

← Back to all posts
2D JS Game Template
h
MattDESTROYER

2D Game Engine

A simple 2D JS Game Engine which you can use to make creating 2D games easy!

Documentation/Features:

Global variables (which you are allowed to use and may help).
FPS: The number of frames per second the program is currently running at.
width: The width of the canvas being used for your game.
height: The height of the canvas being used for your game.

Input: Provides you with access to user input, usage:

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 game.
fullScreen: Whether or not your canvas should be scaled to fit the screen. (Defaults to true.)

Starts your game game. (Note: this should be the last line of code your personal scripts run, code after this line will likely not run)

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 camera object.

x: The x position for the Camera.
y: The y position for the Camera.
colour: The colour of the Camera.
start: A special function called when the scene first loads.
update: A special function called every frame.

Create a GameObject.

x: The x position for the GameObject.
y: The y position for the GameObject.
polymesh: The mesh used to render the GameObject, and if collides is set to true, for collisions.
colour: The colour the GameObject is rendered in.
start: A special function called when the scene first loads.
update: A special function called every frame.
collides: Whether or not the GameObject collides with other objects.
oncollision: A function called everytime the GameObject collides (if the GameObject collides).
onclick: A function called everytime the GameObject is clicked.

Create a Scene based on an array of GameObjects and a Camera. (Note: no need to save to variable.)
gameObjects: An array of GameObjectss.
camera: A camera used to determine which portion of the Scene is rendered.

Math shortcuts:

Built-in functions:

Voters
MattDESTROYER
Comments
hotnewtop
MrVoo

The repl attached has an error D:

MattDESTROYER

@MrVoo I think that's a problem your end because it's running perfectly without error for me... It does get external scripts so I would guess they aren't loading for you. That might mean you have a problem with your internet connection. If the external scripts have loaded you should see "Loaded 2DGameEngineJS by MattDESTROYER" in the console and you should be able enter width or height in the console and see a number output that correlates to the size of the canvas.