Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.

Keyboard Events

There are three keyboard events:

onkeydown

The event occurs when as soon as any key has been pressed.

onkeypress

The event occurs when any key is being pressed.

onkeyup

The event occurs when a key is being released.

 

As with the mouse event, we need to insert two pieces of code in order to use a keyboard event: a function containing the action and an event listener. Unlike the mouse event, the canvas cannot detect keyboard events. Therefore, we tie the keyboard event to the html document.

document.addEventListener("keydown", function(e){});

When using keyboard events, we need to be able to detect which key has been pressed. The code below will test if the left arrow has been pressed.

document.addEventListener("keydown", function (e)
{
    if (e.keyCode === 37)  // left arrow key has been pressed
    {
        // do something
    }
}

In the example above, the variable, 'e' is provided by the system. It provides access to the keyCode of the key that has been pressed. The complete set of keyCodes can be found at this link.

The example below allows the user to move an image around the canvas using the four arrow keys.

Example of a keyboard event (Run example)

key_down.js

/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland.             */
/* There should always be a javaScript file with the same name as the html file. */
/* This file always holds the playGame function().                               */
/* It also holds game specific code, which will be different for each game       */





/******************** Declare game specific global data and functions *****************/
/* images must be declared as global, so that they will load before the game starts  */
let beachImage = new Image();
beachImage.src = "images/beach.png";
/******************* END OF Declare game specific data and functions *****************/





/************** Declare data and functions that are needed for all games ************/

/* Always create a canvas and a ctx */
canvas = document.getElementById("gameCanvas");
ctx = canvas.getContext("2d");
canvasWidth = canvas.clientWidth;
canvasHeight = canvas.clientHeight;

/* Always create an array that holds the default game gameObjects */
let gameObjects = [];

/*********** END OF Declare data and functions that are needed for all games *********/



/* Always have a playGame() function                                     */
/* However, the content of this function will be different for each game */
function playGame()
{
    /* We need to initialise the game objects outside of the Game class */
    /* This function does this initialisation.                          */
    /* This function will:                                              */
    /* 1. create the various game game gameObjects                   */
    /* 2. store the game gameObjects in an array                     */
    /* 3. create a new Game to display the game gameObjects          */
    /* 4. start the Game                                                */


    /* Create the various gameObjects for this game. */
    /* This is game specific code. It will be different for each game, as each game will have it own gameObjects */

    gameObjects[0] = new KeyDown(beachImage);

    /* END OF game specific code. */

    /* Always create a game that uses the gameObject array */
    let game = new CanvasGame();

    /* Always play the game */
    game.start();

    /* add event listners for input changes */
    document.addEventListener("keydown", function (e)
    {
        let stepSize = 10;

        if (e.keyCode === 37)  // left
        {
            gameObjects[0].changeX(-stepSize);
        }
        else if (e.keyCode === 38) // up
        {
            gameObjects[0].changeY(-stepSize);
        }
        else if (e.keyCode === 39) // right
        {
            gameObjects[0].changeX(stepSize);
        }
        else if (e.keyCode === 40) // down
        {
            gameObjects[0].changeY(stepSize);
        }
    });
}

    document.addEventListener("keydown", function (e)
    {
        let stepSize = 10;

        if (e.keyCode === 37)  // left
        {
            gameObjects[0].changeX(-stepSize);
        }
        else if (e.keyCode === 38) // up
        {
            gameObjects[0].changeY(-stepSize);
        }
        else if (e.keyCode === 39) // right
        {
            gameObjects[0].changeX(stepSize);
        }
        else if (e.keyCode === 40) // down
        {
            gameObjects[0].changeY(stepSize);
        }
    });

KeyDown.js

/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. */

class KeyDown extends GameObject
{
    /* Each gameObject MUST have a constructor() and a render() method.        */
    /* If the object animates, then it must also have an updateState() method. */

    constructor(image)
    {
        super(null); /* as this class extends from GameObject, you must always call super() */

        /* These variables depend on the object */
        this.image = image;
        this.width = 100;
        this.height = 100;
        this.x = 100;
        this.y = 100;
    }

    render()
    {
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
        ctx.strokeStyle = 'black';
        ctx.strokeRect(this.x - 1, this.y - 1, this.width + 2, this.height + 2);
    }

    changeX(changeSize)
    {
        this.x += changeSize;
    }

    changeY(changeSize)
    {
        this.y += changeSize;
    }   
}

    changeX(changeSize)
    {
        this.x += changeSize;
    }

    changeY(changeSize)
    {
        this.y += changeSize;
    }   

Write code to animate a sprite skeleton character walking, as shown here. The sprite image is below:

Amend the above code to stop the image moving off the canvas.

Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.