Lightweight framework for HTML5 2D Game Development written with ECMAScript 7
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
demos Drawstring demo now uses removeFontStyle. Jul 5, 2016
LICENSE LICENSE update. Dec 2, 2015


Pentagine is a lightweight JavaScript library for HTML5 2D Game Development that renders to <canvas>. For now, it consists of a State Machine, a Sprite class to load and draw images, some keyboard and mouse input functions, a SpriteList, a Camera and an Audio class. It is written using ECMAScript 7 and is designed to be used with ECMAScript 6 code as well (but works as well with regular ECMAScript 5).


As mentioned before, Pentagine is written using ECMAScript 7 and as so, its source must go through Babel before it can be used in a browser. All you have to do is compile it using webpack:

git clone
cd pentagine/
npm install

The only dependency of Pentagine is lodash, but it has some development dependencies such as Babel.


Clone pentagine with git clone and then open examples/index.html for a list of examples. Because some of the examples are written using ECMAScript 7, you need to compile the demos first (using webpack).

Here's a small example of all the JavaScript code (ECMAScript 6) necessary to draw a ball and make it movable with the keyboard:

class PlayState {
  setup() {
    this.ball = new Pentagine.Sprite(penta, 'ball.png', 100, 50);
    this.ball.speed = 400;

  update() {
    if (penta.isDown('up')) {
      this.ball.y -= this.ball.speed * this.dt;

    if (penta.isDown('down')) {
      this.ball.y += this.ball.speed * this.dt;

    if (penta.isDown('left')) {
      this.ball.x -= this.ball.speed * this.dt;

    if (penta.isDown('right')) {
      this.ball.x += this.ball.speed * this.dt;

  draw() {


var penta = new Pentagine.Game();

   If penta.desiredFPS is not declared, the game will run as fast as
   possible, and on any State, you can use 'this.dt' to get the
   delta time between two ticks and use it to make movement
   smooth. However, if desiredFPS is declared, the game will try to run
   with the given amount of FPS and this.dt also works.

penta.setup({ desiredFPS: 60,
              preventedKeys: ['down', 'right', 'left', 'up', 'space'],
              firstState: new PlayState(),
              width: 400,
              height: 400 });

A "real-life" example of a game that uses Pentagine is Multitaskor, a game I created for Ludum Dare 27.


Pentagine is licensed under the MIT License.