How to make your game on the PointJS game engine

Important! If you are using PointJS, it is not advisable to connect other engines (jQuery, Angular, etc.) to it. PointJS intercepts many system events and affects the entire page. To prevent engines from interfering with each other, use an iframe.

Initializing the game engine

const pjs = new PointJS(WIDTH, HEIGHT, STYLES); 

//WIDTH - width of the game area
//HEIGHT - height of the game area
//STYLES - styles, background, margins

Example:

const pjs = new PointJS(640, 480, {
    backgroundColor: '#ffffff'
});

You can expand the game to full screen, then the WIDTH and HEIGHT values will be ignored

//Expand the game to full screen
pjs.system.initFullPage();

The following methods are now available:

//Creating game objects and game loops
    pjs.game
    
//Working with the game level map level.js
    pjs.levels;
    
//Camera Control
    pjs.camera;
    
//Keyboard Event Handler
    pjs.keyControl;
    
//Mouse Event Handler
    pjs.mouseControl;
    
//The handler of touch taps
    pjs.touchControl;
    
//Settings and system methods
    pjs.system;
    
//Vector mathematics and space
    pjs.vector;
    
//Numerical methods and random values
    pjs.math;
    
//Color generators, encoders
    pjs.colors;
    
//Methods of drawing on stage
    pjs.brush;
    
//HTML Audio надстройка
    pjs.audio;
    
//Managing external resources
    pjs.resources;
    
//Loading and processing sprite animations
    pjs.tiles;
    
//OOP methods. Counters, timers, cycles
    pjs.OOP;

If the method is called frequently, then it is customary to make a reduction. Let's create, for example, a key variable, in which we will remove all keyboard methods, and immediately activate it with the initControl command. We will make the same reduction for the main game method

const key=pjs.keyControl.initControl();
const game = pjs.game;

This form of recording is acceptable, but takes up more space :)

const key = pjs.keyControl;
key.initControl();

Now in the game cycle, you can quickly access the keyboard methods.

if (key.isPress("D")) {
    //game code
} 

if (key.isInputMode()) {
    //game code
}

The game loop, where all events are processed, is created by the newLoop command, which is located in the game methods. Let me remind you that game is an abbreviation (like what we created for the keyboard).

game.newLoop('myGame', function () {
  
    // game code

});

//myGame - game loop name

And these two commands allow you to select (set active) one of the game cycles and start the game

    game.setLoop('myGame');
    game.start();

In the end, we did it:

const pjs = new PointJS(1280, 720, {
    backgroundColor: '#ffffff'
});
       
pjs.system.initFullPage();
const game = pjs.game;
const key=pjs.keyControl.initControl();
      

game.newLoop('myGame', function () {
        
    if (key.isPress("L")) {
        console.log('Hello Wold');
    }
        
});
       
game.setLoop('myGame');
game.start();

Syntax