Moving square

<!DOCTYPE html>
<html>
  <head>
    <title>Making a game with Functional Programming</title>
  </head>

  <body>
    <canvas id="game" width="480" height="320">
      We can add some fallback code here!
    </canvas>
    <script src="game.js"></script>
  </body>
</html>

var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var state = {};
window.requestAnimationFrame(gameLoop);

function gameLoop() {
  state = update(state);
  render(state, ctx, canvas);
  window.requestAnimationFrame(gameLoop);
}

function update(state) {
  let x = state.x || 0;
  return Object.assign(state, { x: x + 1 });
}

function render(state, ctx, canvas) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'rgb(0, 0, 200)';
  ctx.fillRect(state.x, 0, 20, 20);
}

# Moving square