AI game creator

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

No:8350

1176

←

Prev Next

→

pylon slalom
Developer User3788｜Date and time 23/7/15 12:38:51
Build time 22.135 sec｜Game capacity 2.299KB｜

Script

了解しました。では、スマホで操作し、絵文字を使ったパイロンスラロームゲームを作成します。以下が実装例です。

🚗

🎯

このプログラムでは、スマホの傾き（デバイスのジャイロセンサー情報）を利用して、車（🚗）を操作しパイロン（🎯）と衝突したらスコアが加算されます。スコアは画面上部の車の表示の隣に表示されます。パイロンとの衝突後は、新しい位置にパイロンが移動します。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。では、スマホで操作し、絵文字を使ったパイロンスラロームゲームを作成します。以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>パイロンスラローム</title>
  <style>
    .game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vh;
    }
    .game-text {
      font-size: 24px;
    }
    .car {
      font-size: 48px;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <div class="game-text">
      <div class="car">🚗</div>
      <div id="pylon">🎯</div>
    </div>
  </div>

function getRandomPosition() {
      var x = Math.floor(Math.random() * (window.innerWidth - 100));
      var y = Math.floor(Math.random() * (window.innerHeight - 100));
      return [x, y];
    }

function updatePylonPosition() {
      var position = getRandomPosition();
      pylon.style.left = position[0] + 'px';
      pylon.style.top = position[1] + 'px';
    }

function updateScore() {
      score++;
      car.innerHTML = '🚗' + ' Score: ' + score;
    }

function checkCollision() {
      var carRect = car.getBoundingClientRect();
      var pylonRect = pylon.getBoundingClientRect();

if (
        carRect.left < pylonRect.right &&
        carRect.right > pylonRect.left &&
        carRect.top < pylonRect.bottom &&
        carRect.bottom > pylonRect.top
      ) {
        updateScore();
        updatePylonPosition();
      }
    }

window.addEventListener('deviceorientation', function(event) {
      car.style.transform = `rotate(${event.gamma}deg)`;
      checkCollision();
    });

updatePylonPosition();
  </script>
</body>
</html>
```