# Move Basic Shape

• Create the move() method to the Piece class
  • Calculate the new position
• Define the movement keys
• Create the keypress handler function
• Add event to listen for the key press
• Test it out

# Create the move() method to the Piece class

The piece class accepts an object that will define the current piece x and y position.

move(piece) {
    this.x = this.x + piece.x;
    this.y = this.y + piece.y;
    this.ctx.clearRect(0, 0, canvas.width, canvas.height)
    this.render();
}

# Calculate the new position

move left: piece.x + -1
move right: piece.x + 1
move up: piece.y + -1
move down: piece.y + 1

# Define the movement keys

const KEYS = {
    ArrowLeft: 37,
    ArrowRight: 39,
    ArrowUp: 38,
    ArrowDown: 40
};

# Create the keypress handler function

function handleKeyPress(event) {
    event.preventDefault();
    const key = event.key;

    if (KEYS.hasOwnProperty(key)) {
        const keyCode = KEYS[key];

        switch (keyCode) {
            case KEYS.ArrowLeft:
                board.piece.move({ x: -1, y: 0 });
                break;
            case KEYS.ArrowRight:
                board.piece.move({ x: 1, y: 0 });
                break;
            case KEYS.ArrowUp:
                board.piece.move({ x: 0, y: -1 });
                break;
            case KEYS.ArrowDown:
                board.piece.move({ x: 0, y: 1 });
                break;
        }
    }
}

# Add event to listen for the key press

document.addEventListener('keydown', handleKeyPress);

# Test it out

Use the arrow keys on your keyboard to move the square. You'll notice that the square can exit the board, as collision detection hasn't been implemented to limit its motion.