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

No:10465

Red Pikmin are fireproof but afraid of fire. Blue ..ALL
Developer User4559｜Date and time 23/7/31 14:54:16
Build time 27.703 sec｜Game capacity 3.103KB｜

Script

のリスクがあるでんでんむしは弾を跳ね返すこんな能力を持ったキャラクターたちが、敵との戦いを繰り広げるアクションゲームを作りましょう。以下がゲームの実装例です。

Pikmin Game

🌺

🐞

このプログラムでは、赤い花の絵文字がプレイヤー、青い虫の絵文字が敵を表しています。プレイヤーは右に移動し、敵はプレイヤーに追従します。衝突するとゲームオーバーになります。上記のコードを実行すると、画面上に「Start Game」と書かれたボタンが表示されます。ボタンをクリックするとゲームが開始され、プレイヤーと敵が動き始めます。

←

Prev　Next

→ 　

Back　

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

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

のリスクがある でんでんむしは弾を跳ね返す こんな能力を持ったキャラクターたちが、敵との戦いを繰り広げるアクションゲームを作りましょう。

以下がゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pikmin Game</title>
  <style>
    #player {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: red;
      font-size: 20px;
      text-align: center;
      line-height: 30px;
    }
    #enemy {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: blue;
      font-size: 20px;
      text-align: center;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <h1>Pikmin Game</h1>
  <div id="player">🌺</div>
  <div id="enemy">🐞</div>

function startGame() {
      // プレイヤーと敵の初期位置を設定
      player.style.left = '10px';
      player.style.top = '100px';
      enemy.style.left = '400px';
      enemy.style.top = '100px';

timerId = setInterval(gameloop, 50);
    }

function gameloop() {
      // プレイヤーの位置を更新
      let playerX = parseInt(player.style.left, 10);
      player.style.left = (playerX + 5) + 'px';

// 敵がプレイヤーに追従
      let enemyX = parseInt(enemy.style.left, 10);
      let enemyY = parseInt(enemy.style.top, 10);
      if (enemyX > playerX) {
        enemy.style.left = (enemyX - 2) + 'px';
      } else {
        enemy.style.left = (enemyX + 2) + 'px';
      }
      if (enemyY > 150) {
        enemy.style.top = (enemyY - 2) + 'px';
      } else {
        enemy.style.top = (enemyY + 2) + 'px';
      }

// 衝突判定
      if (checkCollision()) {
        clearInterval(timerId);
        alert('Game Over');
      }
    }

function checkCollision() {
      let playerRect = player.getBoundingClientRect();
      let enemyRect = enemy.getBoundingClientRect();
      return !(
        playerRect.right < enemyRect.left ||
        playerRect.left > enemyRect.right ||
        playerRect.bottom < enemyRect.top ||
        playerRect.top > enemyRect.bottom
      );
    }

// ゲームを開始するボタンを作成
    let startButton = document.createElement('button');
    startButton.textContent = 'Start Game';
    startButton.addEventListener('click', startGame);
    document.body.appendChild(startButton);
  </script>
</body>
</html>
```

このプログラムでは、赤い花の絵文字がプレイヤー、青い虫の絵文字が敵を表しています。プレイヤーは右に移動し、敵はプレイヤーに追従します。衝突するとゲームオーバーになります。

上記のコードを実行すると、画面上に「Start Game」と書かれたボタンが表示されます。ボタンをクリックするとゲームが開始され、プレイヤーと敵が動き始めます。