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

No:37331

←

Prev Next

→

Superhero
Developer User17061｜Date and time 24/1/21 1:45:08
Build time 11.385 sec｜Game capacity 3.22KB｜

Script

Sure, here's an example of a simple superhero game implemented as a single HTML file:

Superhero Game

In this game, you control the movement of a superhero using the device's tilt or orientation. The superhero is represented by an image, and there is also an obstacle present in the game. The goal is to avoid the obstacle and navigate the superhero within the game board. To play the game, open the HTML file on a smartphone and tilt the device to move the superhero. If the superhero collides with the obstacle, a "Game Over" message will appear, and the superhero's position will be reset. Please note that you would need to provide your own image files for the superhero and obstacle, and update the image source paths accordingly (replace `"emozi_all/superhero.png"` and `"emozi_apple.png"` with the actual paths to your image files).

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple superhero game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Superhero Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

h1 {
      margin-top: 0;
    }

.game-board {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      border: 2px solid black;
      margin: 20px auto;
      position: relative;
    }

.superhero {
      width: 50px;
      position: absolute;
    }

.obstacle {
      width: 25px;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>Superhero Game</h1>
  <div class="game-board">
    <img class="superhero" src="superhero.png" alt="Superhero">
    <img class="obstacle" src="obstacle.png" alt="Obstacle">
  </div>

function handleOrientation(event) {
      var x = event.gamma; // Get the device's gamma value (left-right tilt)
      var y = event.beta;  // Get the device's beta value (front-back tilt)

moveSuperhero(x, y);
    }

function moveSuperhero(x, y) {
      var superhero = document.querySelector('.superhero');
      var gameBoard = document.querySelector('.game-board');

// Limit the superhero movement within the game board
      var xPos = Math.min(Math.max(superhero.offsetLeft + x, 0), gameBoard.offsetWidth - superhero.offsetWidth);
      var yPos = Math.min(Math.max(superhero.offsetTop + y, 0), gameBoard.offsetHeight - superhero.offsetHeight);

superhero.style.left = xPos + 'px';
      superhero.style.top = yPos + 'px';

if (checkCollision(superhero, document.querySelector('.obstacle'))) {
        endGame();
      }
    }

function checkCollision(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();

return !(
        rect1.top > rect2.bottom ||
        rect1.right < rect2.left ||
        rect1.bottom < rect2.top ||
        rect1.left > rect2.right
      );
    }

function endGame() {
      alert('Game Over! You hit an obstacle.');
      resetSuperheroPosition();
    }

function resetSuperheroPosition() {
      var superhero = document.querySelector('.superhero');

superhero.style.left = '';
      superhero.style.top = '';
    }
  </script>
</body>
</html>
```

To play the game, open the HTML file on a smartphone and tilt the device to move the superhero. If the superhero collides with the obstacle, a "Game Over" message will appear, and the superhero's position will be reset.

Please note that you would need to provide your own image files for the superhero and obstacle, and update the image source paths accordingly (replace `"superhero.png"` and `"obstacle.png"` with the actual paths to your image files).