Falling from Space🛰 to Earth🌏.'s game

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

No:6515

221

←

Prev Next

→

Falling from Space🛰 to Earth🌏.
Developer User3891｜Date and time 23/7/2 16:13:16
Build time 26.48 sec｜Game capacity 2.954KB｜

Script

以下は、宇宙から地球に落下する宇宙船を操作して地球に着陸させるゲームの例です。プレイヤーはスマホの傾きを利用して宇宙船を操作し、着陸地点に安全に着陸させることを目指します。

このゲームでは、宇宙船は3秒かけて落下し、プレイヤーはスマホを傾けることで宇宙船を操作します。着陸地点に着陸した時には宇宙船が緑色になります。スマホの傾きに応じて宇宙船が動くため、実際にスマホで開いてプレイしてみてください。

←

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>
        #spaceShip {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: blue;
            border-radius: 50%;
            left: 50%;
            transform: translateX(-50%);
            animation: drop 3s linear infinite;
        }

@keyframes drop {
            0% {
                top: 0;
            }
            100% {
                top: 100%;
            }
        }

#landingSite {
            width: 100px;
            height: 20px;
            position: absolute;
            background-color: green;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div id="spaceShip"></div>
    <div id="landingSite"></div>

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

// 宇宙船を傾ける
            document.getElementById("spaceShip").style.transform = "rotate(" + x + "deg)";

// 宇宙船と着陸地点の重なりをチェック
            checkCollision();
        }

function checkCollision() {
            var spaceShip = document.getElementById("spaceShip");
            var landingSite = document.getElementById("landingSite");

var spaceShipRect = spaceShip.getBoundingClientRect();
            var landingSiteRect = landingSite.getBoundingClientRect();

// 着陸地点と宇宙船の座標とサイズが重なっているかチェック
            if (spaceShipRect.bottom >= landingSiteRect.top && spaceShipRect.top <= landingSiteRect.bottom &&
                spaceShipRect.right >= landingSiteRect.left && spaceShipRect.left <= landingSiteRect.right) {
                spaceShip.style.backgroundColor = "green";
                spaceShip.style.animation = "none";
                document.removeEventListener("deviceorientation", handleOrientation, true);
            } else {
                spaceShip.style.backgroundColor = "blue";
                spaceShip.style.animation = "drop 3s linear infinite";
            }
        }
    </script>
</body>
</html>
```

このゲームでは、宇宙船は3秒かけて落下し、プレイヤーはスマホを傾けることで宇宙船を操作します。着陸地点に着陸した時には宇宙船が緑色になります。

スマホの傾きに応じて宇宙船が動くため、実際にスマホで開いてプレイしてみてください。