CH. 04 Controls [JS Game Dev Tutorial]

Controls

Accepted Controls

The browser accepts input from keyboard, mouse, touch, click, textfields, and joysticks.

Using the Keyboard

The keyboard is the easiest to implement, and way more responsive than touch. Sometimes the touchscreen can be dirty or damaged which causes false positives.

To listen for keyboard events, we listen for that event. These are called event listeners.

I put the following at the very bottom of the document

// keydown accepts arrow keys
// vs keypress
document.addEventListener('keydown', function (e) {
    // Callback function once a key press has been detected
    
    e.preventDefault(); // Prevents the key's default action
    
    // Output the keyCode
    // This is important; we will be using these values
    console.log("Pressed: " + e.keyCode);
});

// Key has been released
document.addEventListener('keyup', function (e) {
    // Callback function once a key release has been detected
    
    e.preventDefault(); // Prevents the key's default action
    
    // Output the keyCode
    console.log("Released: " + e.keyCode);
});

In game, I would do something as follows

// Global
var keys = []; // Hold the keys

// Key codes
const LEFT = 37,
      RIGHT = 39;
...

// player.update
if (keys[LEFT])
    // Move left
    
...

// keydown accepts arrow keys
// vs keypress
document.addEventListener('keydown', function (e) {
    // Callback function once a key press has been detected
    
    e.preventDefault(); // Prevents the key's default action
    
    // Set that index to true
    // if left, index 37 is true
    keys[e.keyCode] = true;
});

// Key has been released
document.addEventListener('keyup', function (e) {
    // Callback function once a key release has been detected
    
    e.preventDefault(); // Prevents the key's default action
    
    // Get rid of the key if not used anymore
    delete keys[e.keyCode]
});

Using touch

Touch controls are something I dislike; whether it is creating or using, something about them is very unsatisfying.

So this section may be inaccurate as I dont have confidence with touch!

Types of touch controls include: virtual buttons, path finding, and joystick mocks.

I will show a quick use of virtual buttons as that is the easiest for me

Whether this tutorial goes the PC path or mobile path, I will go more in depth with this once we get a player on screen plus basic collisions have been covered.

// I treat a button as a square object
var button = {
    x: 0,
    y: 0,
    width: 16,
    height: 16,
    
    // RGBA
    color: [0, 0, 0, 0.3],
    
    pressed: false, // is pressed?
    id: "left",     // Button type
    
    update: function(){
        // Basic AABB collision
        // I will teach AABB more in detail in the future
        if (
            touch.x + touch.width > this.x &&
            touch.x < this.x + this.width &&
            touch.y < this.y + this.height &&
            touch.y + touch.height > this.y
        )
            this.pressed = true;
        
        else this.pressed = false;
    },
    
    draw: function(){
        // Just a transparent square
        ctx.fillStyle = "rgba(" + this.color + ")";
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

Here are snippets from some of my recent games

// Spooky Game line 618
var lastT = '';
window.addEventListener("touchstart", function(e){
    var t = e.changedTouches;
    
    for (var i = 0; i < t.length; i++){
        // Store the touch as a square
        var acT = { 
            x: t[i].pageX,
            y: t[i].pageY,
            w: 2,
            h: 2
        }
        // Collision test
        if (isColliding(acT, controls.lt)){
            lastT = "left";
        }
        else if (isColliding(acT, controls.rt)){
            lastT = "right";
        }
        else {
            lastT = "";
        }
    }
});

window.addEventListener("touchend", function(e){
    lastT = ""; 
});

//////////////////////////////

// Alien Game Thing
const activeT = [];
window.addEventListener("touchstart", function(e){
    //e.preventDefault();
    
    var t = e.changedTouches;
    
    for (var i = 0; i < t.length; i++){
        activeT.push({
            id: t.identifier,
            x: t.pageX,
            y: t.pageY,
        });
    
        var x = t[i].pageX;
        var y = t[i].pageY;
        
        if (controls.isColliding(controls.lt, x, y)){
            keys.lt = true;
            //lastTouch.add("left");
        }
        else if (controls.isColliding(controls.rt, x, y)){
            keys.rt = true;
            //lastTouch.add("right");
        }
        if (controls.isColliding(controls.up, x, y)){
            keys.up = true;
            //lastTouch.add("up");
        }
        else if (controls.isColliding(controls.dn, x, y)){
            keys.dn = true;
            //lastTouch.add("down");
        }
        
        if (controls.isColliding(controls.a, x, y)){
            keys.a = true;
            //lastTouch.add("a");
        }
        if (controls.isColliding(controls.b, x, y)){
            keys.b = true;
            //lastTouch.add("b");
        }
    }
    
}, false);
window.addEventListener("touchend", function(e){
    //e.preventDefault();
    
    for (var i = 0; i < activeT.length; i++){
        var a = activeT[i];
        
        if (!controls.isColliding(controls.lt, a.x, a.y)){
            keys.lt = false;
            //lastTouch.add("left");
        }
        else if (!controls.isColliding(controls.rt, a.x, a.y)){
            keys.rt = false;
            //lastTouch.add("right");
        }
        if (!controls.isColliding(controls.up, a.x, a.y)){
            keys.up = false;
            //lastTouch.add("up");
        }
        else if (!controls.isColliding(controls.dn, a.x, a.y)){
            keys.dn = false;
            //lastTouch.add("down");
        }
        
        if (!controls.isColliding(controls.a, a.x, a.y)){
            keys.a = false;
            //lastTouch.add("a");
        }
        if (!controls.isColliding(controls.b, a.x, a.y)){
            keys.b = false;
            //lastTouch.add("b");
        }
    }
    keys.up = false;
    keys.dn = false;
    keys.lt = false;
    keys.rt = false;
    
    keys.a = false;
    keys.b = false;
});

Horrible!

And note: e.preventDefault() throws an error for touch devices now.

For pathfinding, I recommend the A-STAR algorithm. One implementation in JS here

HTML buttons

HTML buttons are pretty straightforward, but I dislike them because you can't hold on to it without using a mouse down event.

// After getting the DOM
btn_left.onclick = function(){
    player.pressedLeft = true;
}

HTML Images

I happily borrowed this idea from our friend saantonandre, a great JS game dev BTW, which is similar to the above, but is way more responsive!

The reason I don't use this method is because I can't properly do the CSS gridding!

Working example here Lines 53 - 80 have the code example

I'm going to skip textfields as they aren't RPG control relevant. Just add an oninput event listener.
Gamepad API

I have tested, but never coded with, the Gamepad API, so I have no right to teach something I myself don't know much about.

It is cool, works and is responsive. I personally prefer gamepads over keyboard + mouse. More on Gamepad API here if interested.
This was more of an intro than actual implementation; we will add one of these to our game in the future! The chapters were messed up and I found out too late, sorry.

Vote: should we do controls for mobile or PC?

CH. 04 Controls

Controls

Accepted Controls

Using the Keyboard

Using touch

HTML buttons

HTML Images

Gamepad API

CH 04 Controls [JS Game Dev Tutorial]