スーパーマリオオデッセイ's game | AI game creator

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

No:33721

86

スーパーマリオオデッセイ
Developer User14903｜Date and time 24/1/6 14:39:57
Build time 24.084 sec｜Game capacity 1.945KB｜

はい、了解しました。スーパーマリオオデッセイのゲームを作成します。以下はHTMLファイルの実装例です。

mario

この例では、スマートフォンの傾きを取得し、それに応じてマリオの位置を変更するゲームを作成しています。具体的な移動処理は省略していますが、`handleOrientation`関数内で実装することで、スマートフォンの傾きに応じてプレイヤーの位置が変わるようになります。なお、この例ではマリオの絵文字を使用する代わりに、`emozi_all/mario.png`という画像ファイルを使用しています。プロジェクトには適切なマリオの絵文字フォントまたは画像が必要です。また、画像のパスには実際のファイルの場所を指定してください。このHTMLファイルをブラウザで開くと、スマートフォンの傾きに合わせてマリオが動く様子を確認することができます。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

はい、了解しました。スーパーマリオオデッセイのゲームを作成します。以下はHTMLファイルの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ddd;
      font-size: 48px;
    }

#player {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
    }

#player img {
      width: 64px;
      height: 64px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player">
      <img src="mario.png" alt="mario">
    </div>
  </div>

<script>
    window.addEventListener('deviceorientation', handleOrientation);

function handleOrientation(event) {
      var x = event.beta;
      var y = event.gamma;
      var player = document.getElementById('player');
      
      // 移動処理の実装（省略）
      
      player.style.left = x + 'px';
      player.style.bottom = y + 'px';
    }
  </script>
</body>
</html>
```

この例では、スマートフォンの傾きを取得し、それに応じてマリオの位置を変更するゲームを作成しています。具体的な移動処理は省略していますが、`handleOrientation`関数内で実装することで、スマートフォンの傾きに応じてプレイヤーの位置が変わるようになります。

なお、この例ではマリオの絵文字を使用する代わりに、`mario.png`という画像ファイルを使用しています。プロジェクトには適切なマリオの絵文字フォントまたは画像が必要です。また、画像のパスには実際のファイルの場所を指定してください。

このHTMLファイルをブラウザで開くと、スマートフォンの傾きに合わせてマリオが動く様子を確認することができます。