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

No:24875

I want to spider man game
Developer User11973｜Date and time 23/11/13 18:32:56
Build time 155.206 sec｜Game capacity 3.439KB｜

Script

Sure, here's an example of a simple Spider-Man game implemented as a single HTML file using JavaScript and pictograms:

Spider-Man Game

Instructions:

Tilt your smartphone to move Spider-Man and avoid the obstacles!

In this game, you can control Spider-Man's position by tilting your smartphone. The objective is to avoid colliding with the building (obstacle) represented by a pictogram. If Spider-Man collides with the building, a "Game Over" alert is shown. To use this code, save it as an HTML file (e.g., `spiderman.html`) and make sure to have two pictogram images (`emozi_all/pictogram.png` and `emozi_chicken.png`) in the same directory as the HTML file. You can replace the `emozi_rabbit.png` and `emozi_hamuster.png` file names with actual pictogram image files of your choice.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure, here's an example of a simple Spider-Man game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #game-container {
        margin: auto;
        width: 350px;
        height: 350px;
        border: 2px solid black;
        position: relative;
      }
      #spiderman {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 50px;
        background-image: url('spiderman.png');
        background-repeat: no-repeat;
        background-size: contain;
      }
      #obstacle {
        position: absolute;
        bottom: 0;
        left: 70%;
        width: 50px;
        height: 50px;
        background-image: url('building.png');
        background-repeat: no-repeat;
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <h1>Spider-Man Game</h1>
    <h2>Instructions:</h2>
    <p>Tilt your smartphone to move Spider-Man and avoid the obstacles!</p>
    <div id="game-container">
      <div id="spiderman"></div>
      <div id="obstacle"></div>
    </div>

// Set initial position of Spider-Man
        let spidermanX = 0;
        const spidermanY = gameContainer.clientHeight - spiderman.clientHeight;
        spiderman.style.transform = `translate(${spidermanX}px, ${spidermanY}px)`;

// Function to handle device motion events
        function handleMotion(event) {
          const xAcceleration = event.accelerationIncludingGravity.x;
          const maxX = gameContainer.clientWidth - spiderman.clientWidth;

// Update Spider-Man's position based on device tilt
          spidermanX += xAcceleration;
          if (spidermanX < 0) spidermanX = 0;
          if (spidermanX > maxX) spidermanX = maxX;
          spiderman.style.transform = `translate(${spidermanX}px, ${spidermanY}px)`;

// Check for collision with obstacle
          const spidermanRect = spiderman.getBoundingClientRect();
          const obstacleRect = obstacle.getBoundingClientRect();
          if (
            spidermanRect.left < obstacleRect.right &&
            spidermanRect.right > obstacleRect.left
          ) {
            gameOver();
          }
        }

// Function to end the game
        function gameOver() {
          alert('Game Over!');
          window.removeEventListener('devicemotion', handleMotion);
        }

// Start the game when the device is ready
        window.addEventListener('devicemotion', handleMotion);
      });
    </script>
  </body>
</html>
```

To use this code, save it as an HTML file (e.g., `spiderman.html`) and make sure to have two pictogram images (`spiderman.png` and `building.png`) in the same directory as the HTML file. You can replace the `spiderman.png` and `building.png` file names with actual pictogram image files of your choice.