Skip to content
A tiny puzzle game framework
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.gitignore
LICENSE
README.md
package.json
px.js

README.md

Px

Px is a tiny 2D canvas framework for turn-based puzzle games.

scrot

Features

  • Collision checking
  • Keyboard/Mouse events
  • Level serialization
  • Tiny (~1.9kb gzipped and minified)

Getting Started

Include px.js in your html file.

<script src="px.js"></script>

Create some entity templates. These are the 'objects' you can spawn in the level grid.

A player:

px.create('player', function (x, y) {
  this.x = x;
  this.y = y;
  this.color = 'pink';

  this.keypress = function (e) {
    if (e.key === 'ArrowRight') {
      px.move(this, this.x + 1, this.y);
    }
    // TODO: Check for other keys...
  }

  this.collide = function (entity) {
    // The player can't go through walls!
    return entity !== 'wall';
  }
});

A wall:

px.create('wall', function (x, y) {
  this.x = x;
  this.y = y;
  this.color = '#CCC';
});

Initialize your game.

window.onload = function () {
  px.init(5, 5, 48);
  // You can also spawn entities using the level editor
  // by clicking to create entities.
  px.spawn('player', 1, 2);
  px.spawn('wall', 3, 2);
  px.draw();
};

A complete game example

You can’t perform that action at this time.