AI game creator

Click here for free DL of the app version that can save data.

No:49398

←

Prev Next

→

Make a platformer
Developer User21041｜Date and time 24/3/5 1:17:31
Build time 8.974 sec｜Game capacity 1.667KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<html>
  <head>
    <title>Platformer Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

let player = {
        x: 50,
        y: 50,
        size: 20,
        speed: 5
      };

function drawPlayer() {
        ctx.fillStyle = "red";
        ctx.fillRect(player.x, player.y, player.size, player.size);
      }

function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

function movePlayer(direction) {
        switch (direction) {
          case "up":
            player.y -= player.speed;
            break;
          case "down":
            player.y += player.speed;
            break;
          case "left":
            player.x -= player.speed;
            break;
          case "right":
            player.x += player.speed;
            break;
        }
      }

function gameLoop() {
        clearCanvas();
        drawPlayer();
        requestAnimationFrame(gameLoop);
      }

document.addEventListener("keydown", function(event) {
        switch (event.key) {
          case "ArrowUp":
            movePlayer("up");
            break;
          case "ArrowDown":
            movePlayer("down");
            break;
          case "ArrowLeft":
            movePlayer("left");
            break;
          case "ArrowRight":
            movePlayer("right");
            break;
        }
      });

gameLoop();
    </script>
  </body>
</html>