A Mario-like game that can be played on a smartphone with Mark Zuckerberg as the player and Elon Musk as the CPU.'s game

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

No:5301

2506

←

Prev Next

→

A Mario-like game that can be played on a smartpho..ALL
Developer User3819｜Date and time 23/6/29 22:33:52
Build time 39.155 sec｜Game capacity 3.601KB｜

Script

了解しました。マークザッカーバーグがプレイヤー、イーロンマスクがCPUとして戦うスマホで遊べるマリオ風のゲームを作ります。以下に実装例を示します。

このゲームでは、プレイヤーとCPUの位置を画面上で移動させます。プレイヤーは左側をタップすることで右に移動し、CPUは自動的に右に移動します。プレイヤーとCPUが同じ位置にある場合、ゲームオーバーとなります。ゲームオーバー後は位置がリセットされます。この例では絵文字を使用してキャラクターを表示していますが、実際の絵文字に置き換えてください。スマホに対応しており、タップイベントを使用して操作できるようになっています。これは部分的なゲーム化の例ですが、必要に応じてルールや機能を追加・変更することもできます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Mario Game</title>
  <style>
    .player {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background: 👤; /* プレイヤーの絵文字 */
    }
    .cpu {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background: 👽; /* CPUの絵文字 */
    }
    .block {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background: 🧱; /* ブロックの絵文字 */
    }
  </style>
</head>
<body>
  <div id="game"></div>

// プレイヤーの初期位置と絵文字を設定
    playerElement.className = 'player';
    playerElement.style.left = '0px';
    playerElement.style.top = '200px';

// CPUの初期位置と絵文字を設定
    cpuElement.className = 'cpu';
    cpuElement.style.left = '500px';
    cpuElement.style.top = '200px';

// ブロックを生成
    for (let i = 0; i < 10; i++) {
      const blockElement = document.createElement('div');
      blockElement.className = 'block';
      blockElement.style.top = '250px';
      blockElement.style.left = i * 50 + 'px';
      blockElements.push(blockElement);
    }

// プレイヤー、CPU、ブロックをゲームに追加
    gameElement.appendChild(playerElement);
    gameElement.appendChild(cpuElement);
    blockElements.forEach((blockElement) => {
      gameElement.appendChild(blockElement);
    });

// スマホのタップイベントを取得
    gameElement.addEventListener('touchstart', (event) => {
      const touchX = event.touches[0].clientX;
      const touchY = event.touches[0].clientY;

// プレイヤーの移動
      if (touchX < window.innerWidth / 2) {
        playerPosition += 50;
        playerElement.style.left = playerPosition + 'px';
      }
    });

// ゲームループ
    setInterval(() => {
      // CPUの移動
      cpuPosition += 50;
      cpuElement.style.left = cpuPosition + 'px';
    }, 1000);

// 当たり判定のチェック
    setInterval(() => {
      if (playerPosition === cpuPosition) {
        alert('Game Over');
        playerPosition = 0;
        cpuPosition = 0;
        playerElement.style.left = '0px';
        cpuElement.style.left = '500px';
      }
    }, 50);
  </script>
</body>
</html>
```

このゲームでは、プレイヤーとCPUの位置を画面上で移動させます。プレイヤーは左側をタップすることで右に移動し、CPUは自動的に右に移動します。プレイヤーとCPUが同じ位置にある場合、ゲームオーバーとなります。ゲームオーバー後は位置がリセットされます。

この例では絵文字を使用してキャラクターを表示していますが、実際の絵文字に置き換えてください。スマホに対応しており、タップイベントを使用して操作できるようになっています。

これは部分的なゲーム化の例ですが、必要に応じてルールや機能を追加・変更することもできます。