A 2d RPG game with a girl as the main character's game

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

No:48582

←

Prev Next

→

A 2d RPG game with a girl as the main character
Developer User20807｜Date and time 24/3/2 14:43:31
Build time 4.905 sec｜Game capacity 1.492KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>2D RPG Game</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas width="800" height="600" id="gameCanvas"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

const player = {
        x: 50,
        y: 50,
        width: 50,
        height: 50,
        speed: 5,
      };

function drawPlayer() {
        ctx.fillStyle = "pink";
        ctx.fillRect(player.x, player.y, player.width, player.height);
      }

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

function update() {
        clearCanvas();
        drawPlayer();
      }

function movePlayer(event) {
        switch (event.key) {
          case "ArrowUp":
            player.y -= player.speed;
            break;
          case "ArrowDown":
            player.y += player.speed;
            break;
          case "ArrowLeft":
            player.x -= player.speed;
            break;
          case "ArrowRight":
            player.x += player.speed;
            break;
          default:
            break;
        }
      }

window.addEventListener("keydown", movePlayer);

function gameLoop() {
        update();
        requestAnimationFrame(gameLoop);
      }

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