AI game creator

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

No:16723

←

Prev Next

→

Spider man game 2d
Developer User7444｜Date and time 23/9/20 10:45:46
Build time 27.268 sec｜Game capacity 2.65KB｜

Script

Sure! Here is a simple 2D Spider-Man game implemented as a single HTML file using JavaScript encased in script tags:

Note: In this example, you would need to provide your own `emozi_rabbit.png` and `emozi_apple.png` images to properly visualize Spider-Man and the web respectively. You can replace those image filenames with your own and save the respective image files in the same directory as the HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here is a simple 2D Spider-Man game implemented as a single HTML file using JavaScript encased in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Spider-Man 2D Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      
      spidermanImage = new Image();
      spidermanImage.src = "spiderman.png";
      
      webImage = new Image();
      webImage.src = "web.png";

spidermanSpeed = 5;
      spidermanX = canvas.width / 2;
      spidermanY = canvas.height / 2;

webX = 0;
      webY = 0;
      
      gameOver = false;

document.addEventListener("keydown", moveSpiderman);

draw();
    }

// Draw objects on the canvas
    function draw() {
      if (!gameOver) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(spidermanImage, spidermanX, spidermanY, 50, 50);
        ctx.drawImage(webImage, webX, webY, 20, 20);

requestAnimationFrame(draw);
      } else {
        ctx.fillText("Game Over!", canvas.width/2 - 40, canvas.height/2);
      }
    }

// Move Spider-Man based on keyboard input
    function moveSpiderman(e) {
      switch (e.keyCode) {
        case 37: // Left Arrow
          spidermanX -= spidermanSpeed;
          break;
        case 38: // Up Arrow
          spidermanY -= spidermanSpeed;
          break;
        case 39: // Right Arrow
          spidermanX += spidermanSpeed;
          break;
        case 40: // Down Arrow
          spidermanY += spidermanSpeed;
          break;
      }
      
      checkCollision();
    }

// Check for collision between Spider-Man and the web
    function checkCollision() {
      if (spidermanX < webX + 20 &&
          spidermanX + 50 > webX &&
          spidermanY < webY + 20 &&
          spidermanY + 50 > webY) {
        gameOver = true;
      }
    }

// Start the game
    init();
  </script>
</body>
</html>
```

Note: In this example, you would need to provide your own `spiderman.png` and `web.png` images to properly visualize Spider-Man and the web respectively. You can replace those image filenames with your own and save the respective image files in the same directory as the HTML file.