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

No:7576

1287

←

Prev Next

→

GeGeGes Mario
Developer User4062｜Date and time 23/7/8 22:31:53
Build time 15.171 sec｜Game capacity 3.358KB｜

Script

了解です。以下に、シンプルな操作で遊べるゲーム「ゲゲゲのマリオ」の実装例を示します。

ゲゲゲのマリオ

この実装例では、画面上部にタイトルが表示され、ゲームの背景となる領域が用意されています。プレイヤーキャラクター（赤いブロック）はクリックするとジャンプします。青い障害物が左から右へ移動してきますので、プレイヤーキャラクターと障害物が接触するとゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です。以下に、シンプルな操作で遊べるゲーム「ゲゲゲのマリオ」の実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ゲゲゲのマリオ</title>
  <style>
    #game {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      position: relative;
    }
    #player {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .obstacle {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>ゲゲゲのマリオ</h1>
  <div id="game">
    <div id="player"></div>
    <div class="obstacle" style="bottom: 100px; left: 150px;"></div>
    <div class="obstacle" style="bottom: 200px; left: 250px;"></div>
  </div>

var checkCollision = function() {
        var playerLeft = player.offsetLeft;
        var playerBottom = player.offsetTop;
        var playerRight = player.offsetLeft + player.offsetWidth;
        var playerTop = player.offsetTop + player.offsetHeight;

obstacles.forEach(function(obstacle) {
          var obstacleLeft = obstacle.offsetLeft;
          var obstacleBottom = obstacle.offsetTop;
          var obstacleRight = obstacle.offsetLeft + obstacle.offsetWidth;
          var obstacleTop = obstacle.offsetTop + obstacle.offsetHeight;

if (
            playerLeft < obstacleRight &&
            playerRight > obstacleLeft &&
            playerBottom < obstacleTop &&
            playerTop > obstacleBottom
          ) {
            game.removeEventListener('click', jump);
            alert("ゲームオーバー");
          }
        });
      };

var gameLoop = function() {
        checkCollision();
        moveObstacles();
        window.requestAnimationFrame(gameLoop);
      };

game.addEventListener('click', jump);
      gameLoop();
    });
  </script>
</body>
</html>
```