Loopsie

Loopsie allows you to quickly build and prototype simple games, by providing both a game loop and a simple state management system.

It does not have any opinion in regards to the visual output. Instead, clients can subscribe to state changes and handle them however they see fit.

Loopsie can be used in both node and the browser. It also is fully TypeScript typed.

Getting started

Installation

To install Loopsie, simply add it using your package manager of choice:

npm install loopsie

or

yarn add loopsie

Your first game loop

import { GameLoop, perSecond } from "loopsie";

const initialState = {
    score: 0,
    height: 100
}

const gameLoop = new GameLoop(intialState, {
    msPerUdate: 10 // How often new state should be calculated
    maxFPS: 30     // How often subscribers are notifified of latest state
})

// Reduces height by 10 and increases the score by 1, spread over 1 second.
// Called continously until loop is stopped.
// `delta` indicates how many ms have passed since last call
gameLoop.addCallback((delta, state) => {
    return {
        height: state.height - perSecond(10, delta),
        score: state.score + perSecond(1, delta)
    }
})

gameLoop.addCallback((delta, state) => {
    if(state.height >= 0) {
        gameLoop.stop();
    }
})

// On every click, we want to increase the height by 3.
// `addRunOnce` is executed during the next loop
window.addEventListener("click", () => {
    gameLoop.addRunOnce((delta, state) => {
        return {
            ...state,
            height: state.height + 3
        }
    })
})

// Start the loop
gameLoop.start();