AI game creator

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

No:40906

←

Prev Next

→

マリオカート
Developer User18209｜Date and time 24/2/4 15:40:05
Build time 7.228 sec｜Game capacity 1.595KB｜

Script

マリオカート風のゲームを作成しましょう。以下がHTMLとJavaScriptのコードです。

🚗

このコードでは、スマホの傾きイベントを監視して、車（🚗）が傾きに応じて移動するようなゲームを作成しています。車の初期位置は画面の中央に設定されており、スマホを傾けることで車が移動します。実際にスマホでこのHTMLファイルを開き、傾けることで車を移動させることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

マリオカート風のゲームを作成しましょう。以下がHTMLとJavaScriptのコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>マリオカート</title>
    <style>
        #car {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div id="car">🚗</div>

const carElement = document.getElementById("car");

function moveCar(event) {
            // スマホの傾きに応じて車を移動
            carX += event.gamma;
            carY += event.beta;

// 車の位置を更新
            carElement.style.left = carX + "px";
            carElement.style.top = carY + "px";
        }

// スマホの傾きイベントを監視して車を移動させる
        window.addEventListener("deviceorientation", moveCar);

// ゲーム開始時に車を表示する
        carElement.style.display = "block";
    </script>
</body>
</html>
```

このコードでは、スマホの傾きイベントを監視して、車（🚗）が傾きに応じて移動するようなゲームを作成しています。車の初期位置は画面の中央に設定されており、スマホを傾けることで車が移動します。

実際にスマホでこのHTMLファイルを開き、傾けることで車を移動させることができます。