Game loop vs. user input

[beartown]

Hi guys,

I've been a web developer for many years now and I want to try something new. I thought of making a JS game and so I'm here! There are a few topics of game development that I'm curious about, so without further ado, I'm about to shoot the first one.

I need to shift my thinking patterns towards the game loop, which is different than my everyday's JavaScript. The code will be organised a bit differently. I'm trying to understand how to handle user input in a game. Do you guys use events to handle the input, or maybe some kind of abstraction to check for keyboard state in your game loop? I created a simple class to check if a key (or many keys at the same time) is pressed at the current point of time. I did it by keeping key codes in a Set. Adding them with keydown and removing with keyup. Is this a common practice in JS Game Dev?

Here's my class:

export default class {
    constructor() {
        this.keysPressed = new Set();
        this.registerEventListeners();
    }

    registerEventListeners() {
        window.addEventListener('keydown', this.keyDown.bind(this));
        window.addEventListener('keyup', this.keyUp.bind(this));
        window.addEventListener('blur', this.clearKeys.bind(this));
    }

    keyDown(event) {
        if (event.repeat) return;
        this.keysPressed.add(event.code);
    }

    keyUp(event) {
        this.keysPressed.delete(event.code);
    }

    clearKeys() {
        this.keysPressed.clear();
    }

    isPressed(key) {
        return this.keysPressed.has(key);
    }

    isAnyPressed(keys) {
        for (const key of keys) {
            if (this.isPressed(key)) return true;
        }

        return false;
    }

    areAllPressed(keys) {
        for (const key of keys) {
            if (!this.isPressed(key)) return false;
        }

        return true;
    }
}

 

[8Observer8]

You can read about a game loop here:
2D breakout game using pure JavaScript
https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

Edited January 30, 2020 by 8Observer8

[8Observer8]

If you want to know about professional way you can read this book:
Build your own 2D Game Engine and Create Great Web Games Using HTML5, JavaScript, and WebGL
https://www.apress.com/gp/book/9781484209530

[ganduking]

It depends on what the end platform is on how I handle events.

If it's the Web then I would set an interval timer that checks the keyboard input in cycles.  Whereas if the HTML5 game is converted into an App.  Likely I would have a button on the user screen which activates the movement of a character.  So in that can I would just have the keypress event as that which activates user movement.  But still would likely have an interval timer that governs the movement of other characters on the screen (ie. NPCs or Enemies).

[mattstyles]

Polling for keyboard events in the browser is unless as everything is event driven, so there is no need to poll, you can use event listeners to react to things like user input rather than continuing asking _if_ something happened.

Regarding the OPs question, there are multiple ways that would be good:

* Embrace the event and react immediately

* Keep track of the _last_ key (or all keys) pressed since the last update, then within that update react to that key press (or sequence of keys)

As you're a web dev you probably are used to the first method, and that totally works for games too.

You don't even need a game loop! Shock! Horror! You could make a very nice turn-based game that only ever advances the game on user input (or other input). You _might_ well run into an issue with renderer later (i.e. if you want animations or some such), but you can delay handling that until you do if you like.

[grelf]

mattstyles' comment above is spot on. Javascript is very much event driven. When something happens (user key, mouse click, touch on screen, window resizing, ... a long list) it starts a stream of processing that will end with some output: usually a switch of display buffers so that what you have been building during the stream becomes visible. Then it stops until there is another event. To create game loops that next event could be caused by the system itself if you call setTimeout() or requestAnimationFrame() somewhere in your processing.

[Adrian V.]

Hi,

You can check the source code of several small games on codeguppy.com 

They are built using p5.js and p5.play engines... and shows also how to handle user input.