litecanvas v0.78.1

Litecanvas

Litecanvas is a lightweight HTML5 canvas engine suitable for small web games, prototypes, game jams, animations, creative coding, learning game programming and game design, etc.

:warning: This project is still under development. All feedback is appreciated! :warning:

Features

• Tiny: Only ~4KB (minified + gzipped).
• Simple API: Just few functions to draw shapes and some utilities.
• Predefined colors: Just use a number (from 0 to 11) to choose a color in our 12-color palette.
• ZzFX: Play or create sound effects with ZzFX.
• Extensible: Use or create plugins to add functionalities or change the engine.
• Playground: Access or install the playground webapp to code and share games (even offline).

Learn more in the cheatsheet...

Getting Started

You can try our online playground or just installing the basic template:

# requires Node.js
npx tiged litecanvas/template my-game
cd my-game
npm install
npm run dev

If you prefer, you can manually install via NPM:

npm install litecanvas

// import the package or put the CDN script in your HTML
// CDN: https://unpkg.com/litecanvas/dist/dist.dev.js
import litecanvas from 'litecanvas'

// Start and setup the engine
// learn more: https://litecanvas.js.org/about.html#settings
litecanvas({
    loop: { init, update, draw, tapped },
})

function init() {
    // this function run once
    // before the game starts
    bg = 0
    color = 3
    radius = 32
    posx = CENTERX
    posy = CENTERY
}

// this function detect taps/clicks
// and changes the circle position
function tapped(x, y) {
    posx = x
    posy = y
}

// this function controls the game logic
function update(dt) {
    // make the circle falls 100 pixels per second
    posy += 100 * dt
}

// this function render the game scene
function draw() {
    cls(bg) // clear the screen
    circfill(posx, posy, radius, color) // draw a circle
}

Docs

Check out our Cheatsheet.

Basic Demos

Try some demos in our playground:

• Pong
• Bouncing Ball
• Scroller
• 3D projection
• Rendering Benchmark

See other demos in samples folder

Inspirations

• floppy: a micro game engine for beginners.
• PICO-8: fantasy console for making, sharing and playing tiny games.
• js13kGames: a JavaScript coding competition with size limit set to 13 kilobytes.
• raylib: a simple and easy-to-use gamedev library.
• p5.js/Processing: a library for creative coding.
• Pygame Zero: A zero-boilerplate games programming framework for Python 3.