A 2d HTML5 Canvas game engine
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
animation tweaker



A 2d HTML5 Canvas game engine

SplatJS is a 2d game engine made for creating multi-platform games entirely in JavaScript.


  • Rectangles!
  • Keyboard, mouse, and touch input
  • Sounds and music (Web Audio API and HTML5 Audio)
  • Sprite animation
  • Asset loading, and built-in loading screen
  • Games work well on phones, tablets, and desktop browsers.
  • A* Pathfinding
  • Particles

Supported Platforms

  • Chrome (desktop & mobile)
  • Firefox
  • Internet Explorer (desktop & mobile)
  • Safari (desktop & mobile)
  • iOS using Ejecta
  • Chrome Web Store

SplatJS works in PhoneGap/Cordova, but it seems like the apps it produces lack hardware acceleration, making games unplayable.

Download a standalone SplatJS:

Install through NPM

$ npm install --save splatjs

Create a file named game.js and start your game with this code:

"use strict";
var Splat = require("splat");

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

var manifest = {
	"images": {},
	"sounds": {},
	"fonts": {},
	"animations": {}

var game = new Splat.Game(canvas, manifest);

game.scenes.add("title", new Splat.Scene(canvas, function() {
	// Initiaization
},function(elapsedMillis) {
	// Simulation
}, function(context) {
	// Draw

game.scenes.switchTo("loading"); // Start loading scene which will switch to 'title' scene when all the assets in manifest are loaded.

Install browserify

$ npm install --save-dev browserify

Then use browserify to bundle your game as a single JavaScript file for the browser.

$ browserify game.js -o index.js

Include canvas element with id "canvas" and bundled JavaScript file (Splat + Game) on your html page:

<canvas id="canvas" width="1136" height="640"></canvas>
<script type="text/javascript" src="index.js"></script>

Games using SplatJS

Send a pull request to add your game to the list!