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

No:7341

3807

centipede
Developer User4009｜Date and time 23/7/6 22:52:23
Build time 23.757 sec｜Game capacity 2.771KB｜

了解です。以下は、単純なゲームの例として「ムカデ砲」というゲームを作成したコードです。このゲームでは、ユーザーが砲台を操作してムカデを倒すことが目的です。スマートフォンで操作できるようにし、絵文字を使用して表現しています。

ムカデ砲

🐛

🔫

このコードでは、`mousemove` イベントを使ってスマホの傾きを検知し、その値を使ってキャタピラの位置を変更します。また、`mousemove` イベントを使ってスマホのタッチ操作を検知し、砲台の位置を変更します。ゲームオーバー判定では、キャタピラと砲台が重なった場合にゲームオーバーとなります。このように実装すれば、スマートフォンで遊べるシンプルなゲーム「ムカデ砲」が完成します。もちろん、絵文字やゲームのルールを変更するなど、自分なりのアレンジを加えることも可能です。

→ 　

1　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

了解です。以下は、単純なゲームの例として「ムカデ砲」というゲームを作成したコードです。このゲームでは、ユーザーが砲台を操作してムカデを倒すことが目的です。スマートフォンで操作できるようにし、絵文字を使用して表現しています。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ムカデ砲</title>
  <style>
    body { text-align: center; }
    #gameArea { margin-top: 20px; }
    #caterpillar { font-size: 48px; }
    #cannon { font-size: 48px; }
  </style>
</head>
<body>
  <h1>ムカデ砲</h1>
  <div id="gameArea">
    <div id="caterpillar">🐛</div>
    <div id="cannon">🔫</div>
  </div>

<script>
    // ゲームの状態
    let gameOver = false;
    let caterpillarPosition = 0;
    let cannonPosition = 0;

// キャンバスの幅と高さ
    const canvasWidth = window.innerWidth;
    const canvasHeight = window.innerHeight;

// キャンバス要素の取得
    const caterpillarElem = document.getElementById("caterpillar");
    const cannonElem = document.getElementById("cannon");

// キャタピラの移動
    window.addEventListener("deviceorientation", moveCaterpillar);

function moveCaterpillar(event) {
      if (!gameOver) {
        caterpillarPosition += event.beta / 10;
        caterpillarElem.style.transform = `translateX(${caterpillarPosition}px)`;
      }
    }

// 砲台の移動
    window.addEventListener("touchmove", moveCannon);

function moveCannon(event) {
      if (!gameOver) {
        cannonPosition = event.touches[0].clientX - canvasWidth / 2;
        cannonElem.style.transform = `translateX(${cannonPosition}px)`;
      }
    }

// ゲームオーバー判定
    setInterval(checkGameOver, 10);

function checkGameOver() {
      if (caterpillarPosition + caterpillarElem.offsetWidth >= cannonPosition &&
          caterpillarPosition <= cannonPosition + cannonElem.offsetWidth) {
        gameOver = true;
        alert("ゲームオーバー！");
      }
    }
  </script>
</body>
</html>
```

このコードでは、`deviceorientation` イベントを使ってスマホの傾きを検知し、その値を使ってキャタピラの位置を変更します。また、`touchmove` イベントを使ってスマホのタッチ操作を検知し、砲台の位置を変更します。ゲームオーバー判定では、キャタピラと砲台が重なった場合にゲームオーバーとなります。

このように実装すれば、スマートフォンで遊べるシンプルなゲーム「ムカデ砲」が完成します。もちろん、絵文字やゲームのルールを変更するなど、自分なりのアレンジを加えることも可能です。