Basic Movement

Player movement

To create the player movement we will use the event concept. An event listener will be created in the page document to check when someone clicks some keyboard key. The keys will be listen are W (up), S (down), A (left), D (right). You can use the arrow keys to do the same thing if you want.

The first thing we will do is add new attributes for our data. The first attributes are the identifier of the keys.

// Data
let data = {
    // ...
    key: {
        up: "KeyW",
        down: "KeyS",
        left: "KeyA",
        right: "KeyD"
    }
}

The second attributes are the speed of the player. There are two speed types: Move speed and rotation speed. Both are used for the movement logic.

let data = {
    // ...
    player: {
        // ...
        speed: {
            movement: 0.5,
            rotation: 5.0
        }
    }
}

So now, we have to create the movement logic. Check the table below to understand what each key will do.

Key	Action
W (up)	Get the sin and cos of the angle of the player to increment the player coordinates
S (down)	Get the sin and cos of the angle of the player to decrement the player coordinates
A (left)	Decrement the player angle
D (right)	Incrememt the player angle

Note: For up and down directions we need to get the sin and cos values from the player angle to discover what is the value we need to increment / decrement for the player coordinates. If we just increment the coordinates without check the angle, the player will not go for the view position in relation of the angle, going always in the same direction.

To create the key event, we will put the listener to the document of the page. The event we will use for this step is keydown. Check this link for more details with event listeners.

/**
 * Movement Event
 */
document.addEventListener('keydown', (event) => {
});

After the event initialization, we will get the key code that was pressed. The key code will be inside the event parameter. The code is representad as a string, the same string of our data.key attribute. The second thing is check what is the key, and do the logic in relation of the table above.

/**
 * Movement Event
 */
document.addEventListener('keydown', (event) => {
    let keyCode = event.code;

    if(keyCode === data.key.up) {

    } else if(keyCode === data.key.down) {

    } else if(keyCode === data.key.left) {

    } else if(keyCode === data.key.right) {

    }
});

For the up and down logic, we need to get the sin and cos of the player angle to discover the player direction and what we need to increment for the player coordinates to move the player. In this step, we will multiply the sin and cos values with the player movement speed.

Note: Dont forget that the Math.sin() and Math.cos() functions expect radian values so, the angle needs to be converted first.

// ...
if(keyCode === data.key.up) {
    let playerCos = Math.cos(degreeToRadians(data.player.angle)) * data.player.speed.movement;
    let playerSin = Math.sin(degreeToRadians(data.player.angle)) * data.player.speed.movement;
    data.player.x += playerCos;
    data.player.y += playerSin;
} else if(keyCode === data.key.down) {
    let playerCos = Math.cos(degreeToRadians(data.player.angle)) * data.player.speed.movement;
    let playerSin = Math.sin(degreeToRadians(data.player.angle)) * data.player.speed.movement;
    data.player.x -= playerCos;
    data.player.y -= playerSin;
} 
// ...

For the left and right movement, we simple increment or decrement the angle of the player with the player rotation speed.

// ...
} else if(keyCode === data.key.left) {
    data.player.angle -= data.player.speed.rotation;
} else if(keyCode === data.key.right) {
    data.player.angle += data.player.speed.rotation;
} 
// ...

Caution! We can test our RayCasting now, but the logic of the movement will not works fine, because there is no colision test. We can overtake the walls and cause an exception in our program. To create the colision logic, before to increment the player coordinates for the up and down logics, we need to check if the new position that the player will receives is an wall. If it is, we will not change the coordinates. If it is not, we will change.

// ...
if(keyCode === data.key.up) {
    let playerCos = Math.cos(degreeToRadians(data.player.angle)) * data.player.speed.movement;
    let playerSin = Math.sin(degreeToRadians(data.player.angle)) * data.player.speed.movement;
    let newX = data.player.x + playerCos;
    let newY = data.player.y + playerSin;

    // Collision test
    if(data.map[Math.floor(newY)][Math.floor(newX)] == 0) {
        data.player.x = newX;
        data.player.y = newY;
    }
} else if(keyCode === data.key.down) {
    let playerCos = Math.cos(degreeToRadians(data.player.angle)) * data.player.speed.movement;
    let playerSin = Math.sin(degreeToRadians(data.player.angle)) * data.player.speed.movement;
    let newX = data.player.x - playerCos;
    let newY = data.player.y - playerSin;

    // Collision test
    if(data.map[Math.floor(newY)][Math.floor(newX)] == 0) {
        data.player.x = newX;
        data.player.y = newY;
    }
} 
// ...

Code

The result code of this step is:

/**
 * Movement Event
 */
document.addEventListener('keydown', (event) => {
    let keyCode = event.code;

    if(keyCode === data.key.up) {
        let playerCos = Math.cos(degreeToRadians(data.player.angle)) * data.player.speed.movement;
        let playerSin = Math.sin(degreeToRadians(data.player.angle)) * data.player.speed.movement;
        let newX = data.player.x + playerCos;
        let newY = data.player.y + playerSin;

        // Collision test
        if(data.map[Math.floor(newY)][Math.floor(newX)] == 0) {
            data.player.x = newX;
            data.player.y = newY;
        }
    } else if(keyCode === data.key.down) {
        let playerCos = Math.cos(degreeToRadians(data.player.angle)) * data.player.speed.movement;
        let playerSin = Math.sin(degreeToRadians(data.player.angle)) * data.player.speed.movement;
        let newX = data.player.x - playerCos;
        let newY = data.player.y - playerSin;

        // Collision test
        if(data.map[Math.floor(newY)][Math.floor(newX)] == 0) {
            data.player.x = newX;
            data.player.y = newY;
        }
    } else if(keyCode === data.key.left) {
        data.player.angle -= data.player.speed.rotation;
    } else if(keyCode === data.key.right) {
        data.player.angle += data.player.speed.rotation;
    } 
});

Congratulations! Now we can move our player!

• Next: Fisheye Fix
• Previous: RayCasting