// https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

// graphics output
  <canvas id="canvas" width="480" height="320"></canvas>
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var sprite_sheet = new Image; sprite_sheet.src = "http/link/to/image.png";
  context.drawImage(sprite_sheet, src_x, src_y, src_w, src_h, dest_x, dest_y, dest_w, dest_h);

// game loop timing
  setInterval(game_loop, 10); // fixed interval
  requestAnimationFrame(game_loop); // variable interval
  function game_loop() { move_stuff(); draw_stuff(); }

// keyboard input
  document.addEventListener("keydown", key_down, false);
  document.addEventListener("keyup", key_up, false);
  function key_down(e) { if(e.key == "Right" || e.key == "ArrowRight") key_r = true; }
  function key_up(e) { if(e.key == "Right" || e.key == "ArrowRight") key_r = false; }

// mouse input
  document.addEventListener("mousemove", mouse_move);
  function mouse_move(e) { player_x = e.clientX - canvas.offsetLeft; }
  // mousedown, mouseup, click, dblclick, wheel
  // TODO: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

// sound output
  // TODO: https://www.w3schools.com/graphics/game_sound.asp