AI game creator

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

No:10493

←

Prev Next

→

drag race
Developer User4563｜Date and time 23/7/31 17:59:20
Build time 23.762 sec｜Game capacity 2.088KB｜

Script

了解です。以下にドラッグレースのゲームを実装したサンプルコードを示します。

🚗

🚙

このコードでは、2つの車（🚗と🚙）が画面内をドラッグすることでレースが行われます。スマートフォンで表示し、画面をタップすることでレースが始まり、指を動かすことで車が移動します。各車の初期位置は左側と右側に設定されており、`mousemove` イベントによって指の移動方向に応じて車が移動します。レース終了後は画面を離すと車の移動が停止します。なお、車のアニメーションはCSSアニメーション（`carMove`）を使用しています。詳細なアニメーションの設定は省略しており、必要に応じてカスタマイズしてください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

了解です。以下にドラッグレースのゲームを実装したサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ドラッグレース</title>
  <style>
    #car1, #car2 {
      position: absolute;
      top: 50%;
      margin-top: -50px;
      width: 100px;
      height: 50px;
      font-size: 3em;
      text-align: center;
      line-height: 50px;
    }

#car1 {
      left: 0;
    }

#car2 {
      right: 0;
    }
  </style>
</head>
<body>
  <div id="car1">🚗</div>
  <div id="car2">🚙</div>

document.addEventListener('touchstart', () => {
      car1.style.animationName = 'carMove';
      car2.style.animationName = 'carMove';
    });

document.addEventListener('touchend', () => {
      car1.style.animationName = '';
      car2.style.animationName = '';
    });

document.addEventListener('touchmove', (event) => {
      event.preventDefault();
      const touchX = event.changedTouches[0].clientX;
      const car1Position = touchX / roadWidth * 100;
      car1.style.left = car1Position + '%';
      car2.style.right = (100 - car1Position) + '%';
    });
  </script>
</body>
</html>
```

このコードでは、2つの車（🚗と🚙）が画面内をドラッグすることでレースが行われます。スマートフォンで表示し、画面をタップすることでレースが始まり、指を動かすことで車が移動します。

各車の初期位置は左側と右側に設定されており、`touchmove` イベントによって指の移動方向に応じて車が移動します。レース終了後は画面を離すと車の移動が停止します。

なお、車のアニメーションはCSSアニメーション（`carMove`）を使用しています。詳細なアニメーションの設定は省略しており、必要に応じてカスタマイズしてください。