games in HTML code example

Example: how to make a javascript game

//Javascript game template
//Move player with arrow keys

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

var player = {x: canvas.width / 2, y: canvas.height / 2, speed: 10};
var keys = [];

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.fillRect(player.x, player.y, 50, 50);
  
  if (keys[37])
    player.x -= player.speed;
  if (keys[38])
    player.y -= player.speed;
  if (keys[39])
    player.x += player.speed;
  if (keys[40])
    player.y += player.speed;
  
  requestAnimationFrame(update);
}
update();

document.onkeydown = function(e) {
  keys[e.keyCode] = true;
}
document.onkeyup = function(e) {
  keys[e.keyCode] = false;
}