LittleJS is a lightweight open source HTML5 game engine designed for modern web development. It's small footprint is packed with a comprehensive feature set, including hybrid rendering, physics, particles, sound effects, music, input handling, and debug tools. The code is very clean and well documented with some fun examples to get you started. Choo-Choo! 🚂
LittleJS is a small but powerful game engine with many features and no dependencies.
To use LittleJS download the latest package from GitHub or call npm install littlejsengine
.
The Breakout Tutorial demonstrates how to make a simple game from scratch. The tutorial is also available on YouTube.
This GitNation talk explains how LittleJS works with some tips on how to use it.
To easily include LittleJS in your game, you can use one of the pre-built js files.
To rebuild the engine you must first run npm install
to setup the necessary npm dependencies. Then call npm run build
to build the engine.
The starter example project includes a node js file build.js that compresses everything into a tiny zip file using Google Closure, UglifyJS, and ECT Zip.
To start LittleJS, you need to create these 5 functions and pass them to engineInit.
function gameInit()
{
// called once after the engine starts up
// setup the game
}
function gameUpdate()
{
// called every frame at 60 frames per second
// handle input and update the game state
}
function gameUpdatePost()
{
// called after physics and objects are updated
// setup camera and prepare for render
}
function gameRender()
{
// called before objects are rendered
// draw any background effects that appear behind objects
}
function gameRenderPost()
{
// called after objects are rendered
// draw effects or hud that appear above all objects
}
// Startup LittleJS Engine
engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
LittleJS can be used as an object oriented system by extending the base class EngineObject with your own. This lightweight class provides many useful features including physics, collision, parent/child system, and sorted rendering. These objects are added to the global list of objects where they will automatically be updated and rendered until destroyed.
Here is a template you can use to make objects that behave however you want. See the examples for a complete demonstration.
class MyObject extends EngineObject
{
constructor(pos, size, tileInfo, angle)
{
super(pos, size, tileInfo, angle);
// setup object
}
update()
{
// update object physics and position
super.update();
}
render()
{
// draw object as a sprite
super.render();
}
}
Debug builds of LittleJS have a special menu that can be opened by pressing the Esc key.
Here are a few of the amazing games people are making with LittleJS...
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。