Spiderman remastered's game

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

No:13061

159

←

Prev Next

→

Spiderman remastered
Developer User5765｜Date and time 23/8/26 18:08:40
Build time 16.949 sec｜Game capacity 2.436KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

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

// Spiderman Pictogram
    const spidermanImage = new Image();
    spidermanImage.src = "spiderman.png";

// Spiderman position
    let spidermanX = canvas.width / 2;
    let spidermanY = canvas.height / 2;

// Spiderman movement
    let moveUp = false;
    let moveDown = false;
    let moveLeft = false;
    let moveRight = false;

// Update Spiderman position
    function updateSpidermanPosition() {
      if (moveUp && spidermanY >= 0) {
        spidermanY -= 5;
      }
      if (moveDown && spidermanY <= canvas.height - 32) {
        spidermanY += 5;
      }
      if (moveLeft && spidermanX >= 0) {
        spidermanX -= 5;
      }
      if (moveRight && spidermanX <= canvas.width - 32) {
        spidermanX += 5;
      }
    }

// Draw Spiderman
    function drawSpiderman() {
      context.drawImage(spidermanImage, spidermanX, spidermanY, 32, 32);
    }

// Game loop
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);

updateSpidermanPosition();
      drawSpiderman();

requestAnimationFrame(gameLoop);
    }

// Keyboard event listeners
    document.addEventListener("keydown", function (event) {
      event.preventDefault();

switch (event.key) {
        case "ArrowUp":
          moveUp = true;
          break;
        case "ArrowDown":
          moveDown = true;
          break;
        case "ArrowLeft":
          moveLeft = true;
          break;
        case "ArrowRight":
          moveRight = true;
          break;
      }
    });

document.addEventListener("keyup", function (event) {
      event.preventDefault();

switch (event.key) {
        case "ArrowUp":
          moveUp = false;
          break;
        case "ArrowDown":
          moveDown = false;
          break;
        case "ArrowLeft":
          moveLeft = false;
          break;
        case "ArrowRight":
          moveRight = false;
          break;
      }
    });

// Start the game loop
    gameLoop();
  </script>
</body>
</html>