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

No:5719

114

←

Prev Next

→

Mario Grand Prix
Developer User3838｜Date and time 23/6/30 17:31:14
Build time 20.411 sec｜Game capacity 1.752KB｜

Script

了解しました。以下にマリオグランプリの簡易版を実装したHTMLファイルの例を示します。

マリオグランプリ

🚗

このプログラムでは、画面上にマリオの車を表す絵文字🚗を表示し、スマホの矢印ボタンに対応して車を操作することができます。矢印キーを押すと、車が上下左右に移動します。ただし、この実装例は単純なゲームの一部になるため、マリオグランプリとして完全なゲーム体験を提供するものではありません。詳細なゲームを作りたい場合は、さらに要素や機能を追加する必要があります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解しました。以下にマリオグランプリの簡易版を実装したHTMLファイルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>マリオグランプリ</title>
  <style>
    #player {
      position: relative;
      left: 0;
      top: 0;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>マリオグランプリ</h1>
  <div id="player">🚗</div>
  
  <script>
    document.addEventListener("keydown", function(event) {
      var player = document.getElementById("player");
      var playerPosition = player.getBoundingClientRect();
      var key = event.key;
      
      if (key === "ArrowUp") {
        player.style.top = Math.max(0, playerPosition.top - 10) + "px";
      } else if (key === "ArrowDown") {
        player.style.top = Math.min(window.innerHeight - playerPosition.height, playerPosition.top + 10) + "px";
      } else if (key === "ArrowLeft") {
        player.style.left = Math.max(0, playerPosition.left - 10) + "px";
      } else if (key === "ArrowRight") {
        player.style.left = Math.min(window.innerWidth - playerPosition.width, playerPosition.left + 10) + "px";
      }
    });
  </script>
</body>
</html>
```

このプログラムでは、画面上にマリオの車を表す絵文字🚗を表示し、スマホの矢印ボタンに対応して車を操作することができます。矢印キーを押すと、車が上下左右に移動します。

ただし、この実装例は単純なゲームの一部になるため、マリオグランプリとして完全なゲーム体験を提供するものではありません。詳細なゲームを作りたい場合は、さらに要素や機能を追加する必要があります。