Skip to content
A tiny puzzle game framework
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.gitignore Initial commit May 24, 2019
LICENSE Initial commit May 24, 2019
README.md Update example screenshot May 25, 2019
package.json Initial commit May 24, 2019
px.js Add sprites May 25, 2019

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.