Life.JS  ―  Documentation.

Life.JS

Life.JS is a web 2D Pure, Extensible and Animated JavaScript Game Engine written in Pure JavaScript in 2022.

~ Documentation ~

View Demo · Report Bug · Request Feature

Table of Contents

1. 🔨 Importing necessary tools
2. 🌍 Making your first World
3. 🧍 Making our first Shape
4. 🕹 Controls

---

• Importing necessary tools 🔨

For this tutorial, we will need to import some tools to be able to make our game.

• Required Objects/Classes   ―   World  •  Shape  •  GameLoop .

For sure, there is a lot of tools in LifeJS, we will be representing the basic and necessary ones. If you want to learn everything, do it yourself by reading our API.

• Importing requirements:

import {
    World, 
    Shape,
    GameLoop
} from 'cdn/path/to/life.js'

• Making your first World 🌍

In this first step, we will be making our first world that holds everything we create later (like Shapes, Objects).

To create a world, we need to use the World class from the LifeJS API like so.

const myWorld = new World( ...params );

• Remember: If there is no canvas provided in the World class constructor (params), LifeJS will automatically create a canvas and append it to the document's body.

Let's say that we want a world with color #32a852 as a background, and we want to add limits to the world so there will be no overflow (Objects won't be able to leave the screen), we will do the following:

const myWorld = new World({
    pattern: 'color',          //    Tell LifeJS: background = color (string).
    background: '#32a852',
    
    hasLimits: true,             //  Enable Limits as we said previously.
    border: {                   //   Style the borders 😎.
       width: 1,               //    Border width: <Number>
       pattern: 'color',      //     Pattern: <String>
       background: 'black'   //      Background: <Any|String|Object>
    }
});

Nice! We created our first world! But why does it not appear yet? Oh! We didn't make the Main function that will make our world active and moving. Let's do it.

• Remember: The main function is a piece of code that will be called over and over to keep out world running Continuously, generally, it'll be called 60 times per second, seems familiar right? it's the FPS (FramePerSecond) default number 🙂.

We will first declare a constant that has the number of FPS (FramesPerSecond), let's say we want 60FPS.

const FPS = 60;

Then, we create the main function that controls our Game.

...

function main() {
    myWorld.update(); // ℹ️ Required in Main Funtion to Update the game.
}

const FPS = 60;                       // ⬅️ Our FPS, setting condition: (a > 0)
var game = new GameLoop(main, FPS);  //  ⬅️ This will create our game instance
game.start();                       //   ⬅️ Start the loop, so 'main' will be called 
                                   //    over and over...

• Tada! Our game is showing the green color, it's our current world.

But until now, everything seems boring, let's add some objects, with the Shape class!

• Making our first Shape🧍

• We will make & add a person to our world. Let's give him the Blue color.

const player = new Shape({
   type: 'rectangle',  // Type of the shape, can be: Rectangle, Circle... 
   pattern: 'color',
   background: 'blue',
   
   width: 25,       //  DIMENTION X   (Width)
   height: 25,     //   DIMENTION Y  (Height)
   
   physics: true,  //   True, so we can make the square affected
                  //    by gravity, or simply, to make it drop.
});

• Here! We created our first shape, and it can drop too, nice. let's take ourselfs to the next Step.

• 🕹️ Controls

Hi again! Glad you made it until here.

We will learn how to make your object move using specific Keys, easy, just follow what I do.

• Remember the main function that we wrote last time? We will now use it to get the key states of the game, we will check if keys are pressed, if so, move the shape to the specific direction. We will do so by using the World.key.isPressed(keyString) function.

function main() {
    
    if (myWorld.key.isPressed('ArrowLeft'))
        player.move('left');
        
    else if (myWorld.key.isPressed('ArrowRight'))
        player.move('right');

    //  🔑 KeyboardEvent NamesList: https://shorturl.at/orTY6 (Mozilla Docs)
    
    myWorld.update();   // ℹ️ Preferably, updating our world must be at the
                       //      end of the main function. To prevent graphical
                      //       issues.
}

Test: Press the left ArrowKey  (⬅️), and then the right Arrow Key  (➡️), the shape will start moving!

• Remember: You can set a specific speed when initialising a new Shape instance, using the speed: property <Number>.
  
  And you can also set a gravity vector in the World instance using the G: property, Ex: G: { x: 0, y: 9.8 }

🙂 Happy Coding!

• Useful Links:

• API  ―  Check LifeJS API

Written by @rhpo with ❤️.