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

No:5644

542

chicken
Developer User3834｜Date and time 23/6/30 14:58:03
Build time 40.516 sec｜Game capacity 3.532KB｜

了解しました。以下に、スマホ操作を前提としたゲームの例を示します。

チキンレース

画面をタップして車を移動させて障害物を避けよう！

上記のコードは、スマホで操作可能なチキンレースのゲームです。画面をタップすると、赤い車が右に移動し、障害物を避けながら進んでいきます。車が障害物に衝突するとゲームオーバーです。障害物は時間経過とともに定期的に生成され、障害物と車は定期的に移動します。なお、絵文字を使用する場合は、CSSの`@font-face`を用いて絵文字のフォントファイルを読み込み、絵文字を表示できるようにする必要がありますが、その実装にはかなりの手間と知識が必要となります。上記のゲームの例では絵文字は使用していませんが、ゲーム内の要素に絵文字を追加する場合は、CSSやJavaScriptの部分を適宜変更して絵文字を利用してください。

→ 　

1　

0　

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

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

(C)2023 HisashiApp

了解しました。以下に、スマホ操作を前提としたゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>チキンレース</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
    #road {
      width: 100%;
      height: 300px;
      background-color: #d3d3d3;
      position: relative;
    }
    #car {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
  <h1>チキンレース</h1>
  <p>画面をタップして車を移動させて障害物を避けよう！</p>
  <div id="road">
    <div id="car"></div>
  </div>

<script>
    // 車の初期位置と速度
    let positionX = 50;
    let speed = 5;

// 画面をタップした時の処理
    document.addEventListener('click', function() {
      moveCar();
    });

// 車を移動させる関数
    function moveCar() {
      positionX += speed;
      document.getElementById('car').style.left = positionX + 'px';
    }

// 障害物を生成する関数
    function createObstacle() {
      const obstacle = document.createElement('div');
      obstacle.className = 'obstacle';
      obstacle.style.left = '100%';
      obstacle.style.bottom = Math.random() * 200 + 'px';
      document.getElementById('road').appendChild(obstacle);
    }

// 障害物を移動させる関数
    function moveObstacles() {
      const obstacles = document.getElementsByClassName('obstacle');
      for (let obstacle of obstacles) {
        obstacle.style.left = parseInt(obstacle.style.left) - speed + 'px';
        if (parseInt(obstacle.style.left) < -50) {
          obstacle.remove();
        }
        if (isCollision(obstacle)) {
          gameOver();
        }
      }
    }

// 障害物と車の衝突判定を行う関数
    function isCollision(obstacle) {
      const car = document.getElementById('car');
      const carRect = car.getBoundingClientRect();
      const obstacleRect = obstacle.getBoundingClientRect();
      return !(
        carRect.top > obstacleRect.bottom ||
        carRect.right < obstacleRect.left ||
        carRect.bottom < obstacleRect.top ||
        carRect.left > obstacleRect.right
      );
    }

// ゲームオーバー時の処理
    function gameOver() {
      alert('ゲームオーバー！');
      location.reload();
    }

// 障害物を定期的に生成する処理
    setInterval(createObstacle, 1500);

// 障害物と車を定期的に移動させる処理
    setInterval(moveObstacles, 20);
  </script>
</body>
</html>
```

上記のコードは、スマホで操作可能なチキンレースのゲームです。画面をタップすると、赤い車が右に移動し、障害物を避けながら進んでいきます。車が障害物に衝突するとゲームオーバーです。障害物は時間経過とともに定期的に生成され、障害物と車は定期的に移動します。

なお、絵文字を使用する場合は、CSSの`@font-face`を用いて絵文字のフォントファイルを読み込み、絵文字を表示できるようにする必要がありますが、その実装にはかなりの手間と知識が必要となります。上記のゲームの例では絵文字は使用していませんが、ゲーム内の要素に絵文字を追加する場合は、CSSやJavaScriptの部分を適宜変更して絵文字を利用してください。