AI game creator

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

No:41483

←

Prev Next

→

車を走らせて
Developer User18489｜Date and time 24/2/7 19:59:23
Build time 6.896 sec｜Game capacity 1.603KB｜

Script

レースゲームを作成します。

このプログラムでは、スマートフォンの傾きに応じて車が左右に移動します。また、指定された画像 `emozi_all/car.png` を使用して車を表示します。スマートフォンを傾けると、車が道路上を左右に移動するようになります。

←

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レースゲーム</title>
    <style>
        #road {
            position: relative;
            width: 300px;
            height: 500px;
            border: 1px solid black;
            overflow: hidden;
        }

#car {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div id="road">
        <img id="car" src="car.png">
    </div>

function handleOrientation(event) {
            var x = event.beta; // スマホの傾きの値を取得
            var roadWidth = 300;
            var carWidth = 50;

var road = document.getElementById('road');
            var car = document.getElementById('car');

// スマホの傾きに基づいて車を移動させる
            var newPosition = (x / 180) * (roadWidth - carWidth);
            car.style.left = newPosition + 'px';
        }
    </script>
</body>
</html>
```

このプログラムでは、スマートフォンの傾きに応じて車が左右に移動します。また、指定された画像 `car.png` を使用して車を表示します。

スマートフォンを傾けると、車が道路上を左右に移動するようになります。