My Game

by GlitchStar21

49 lines1.3 KB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Game</title>
<style>
  html, body { margin: 0; height: 100%; background: #10131a; overflow: hidden; }
  canvas { display: block; }
</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
  const canvas = document.getElementById("game");
  const ctx = canvas.getContext("2d");
  function resize() { canvas.width = innerWidth; canvas.height = innerHeight; }
  addEventListener("resize", resize);
  resize();

  const keys = {};
  addEventListener("keydown", (e) => { keys[e.key] = true; });
  addEventListener("keyup", (e) => { keys[e.key] = false; });

  const player = { x: 100, y: 100, size: 30, speed: 4 };

  function update() {
    if (keys["ArrowLeft"])  player.x -= player.speed;
    if (keys["ArrowRight"]) player.x += player.speed;
    if (keys["ArrowUp"])    player.y -= player.speed;
    if (keys["ArrowDown"])  player.y += player.speed;
  }

  function draw() {
    ctx.fillStyle = "#10131a";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#5ad6a0";
    ctx.fillRect(player.x, player.y, player.size, player.size);
  }

  function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
  }
  loop();
</script>
</body>
</html>

Game Source: My Game

Creator: GlitchStar21

Libraries: none

Complexity: simple (49 lines, 1.3 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: my-game-glitchstar21" to link back to the original. Then publish at arcadelab.ai/publish.