Lucid is a 2D Javascript game-engine, primarily for the platforming genre. Heavily based on the game-engine Dissimulate posted on both GitHub and CodePen name Clarity. It's quite evolved from that engine, as things are much more broken apart now, and easier to extend on. The benefit of a lightweight engine like Lucid is to get a playable version as fast as possible that you can build upon.

There are a handful of code examples (I've done my best to comment as much as possible) and examples you can play.

You can install the engine with npm install lucid-game-engine. Then you can use the package like the below.

import { Lucid, Map, Block } from 'lucid-game-engine';

var canvas = document.getElementById('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var game = new Lucid({
  alertErrors: true,
  canvas,
  logInfo: true,
});

var Loop = function () {
  game.setViewport(canvas.width, canvas.height);
  game.update();
  game.draw();
  window.requestAnimFrame(Loop);
};

class MyCustomMap extends Map {
  constructor() {
    super({
      backgroundColor: "#4e4e4e",
      tileSize: 29,
      playerStart: {
        x: 1,
        y: 2
      },
      movementSpeed: {
        jump: 8,
        horizontal: 1
      }
    });

    // Load the blocks so the engine knows which one to render
    // based on the map data.
    this.blocks = [Block];

    // mapData signifies to the engine what blocks to render where.
    // An empty space will render an EmptyBlock.
    this.mapData = [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, , , , , , , , , , , , , , , , , , 0],
      [0, , , , , , , , , , , , , , , , , , 0],
      [0, , , , , , , , , , , , , , , , , , 0],
      [0, , , , , , , , , , , , , , , , , , 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];
  }
}

game.loadMap(new MyCustomMap());

Loop();

I personally suggest using Parcel to get things up and running, it's very straight forward. Check out the example directory for how it works, and run them using npm run example when you clone the repo (it uses Parcel to run).

• Rename Map to something else, realized a little late that Map is a reserved keyword in JS
• Particle engine
• Entities (Think NPCs and enemies that the player can interact with).
• Allow adding a custom player class to the game, will be easy to do, but forgot to integrate it.
• Allow setting a custom EmptyBlock per map, that way you can do any custom rendering on the block you want.
• Add more information to the readme.

If you want to tackle any of the above TODO items, please open a pull request, I'd gladly review it :D