How do I get the blue square to move with the arrow keys?

JAVASCRIPT CODE:

const WIDTH = 640;

const HEIGHT = 480;

const PLAYER_SIZE = 20;

const REPAINT_DELAY = 50;

const EASY_DELAY = 1750;

const MODERATE_DELAY = 1000;

const HARD_DELAY = 750;

const MAX_BLOCKS = 100;

// You might want to add more constants...

var playerX = WIDTH / 2 - PLAYER_SIZE / 2,

playerY = HEIGHT / 2 - PLAYER_SIZE / 2;

// You will definitely NEED to add more variables...

document.onkeydown = function(e)

{

if (e.keyCode == 37)

left();

else if (e.keyCode == 38)

up();

else if (e.keyCode == 39)

right();

else if (e.keyCode == 40)

down();

};

function up()

{

alert("up");

}

function left()

{

alert("left");

}

function right()

{

alert("right");

}

function down()

{

alert("down");

}

window.onload = repaint;

function repaint()

{

var canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d");

context.fillStyle = "#0000FF";

context.fillRect(playerX, playerY, PLAYER_SIZE, PLAYER_SIZE);

}

// You will probably need to add more functions...

HTML CODE:

Block Avoider

width="640"

height="480"

style=" background-color: #fff8dc;

vertical-align:

bottom; border:

solid 5px #000000;">

Easy

Moderate

Hard

Collisions = 0

Avoisions = 0

Steps elapsed = 0