beartown

Game loop vs. user input

Recommended Posts

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;
    }
}

 

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.