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

No:908

133

←

Prev Next

→

Racing Games
Developer User3184｜Date and time 23/6/17 22:13:25
Build time 43.802 sec｜Game capacity 3.583KB｜

Script

Race Game

スマホで左右に傾けて車を操作し、障害物を避けて走ります。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Race Game</title>
    <style>
        body {
            text-align: center;
        }

#game-container {
            display: inline-block;
            position: relative;
        }

#car {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 80px;
            background-color: red;
        }

.obstacle {
            position: absolute;
            bottom: 100%;
            width: 50px;
            height: 50px;
            background-color: black;
            animation: obstacle-fall 2s linear infinite;
        }

@keyframes obstacle-fall {
            from { bottom: 100%; }
            to { bottom: -50px; }
        }
    </style>
</head>
<body>
    <h1>Race Game</h1>
    <div id="game-container">
        <div id="car"></div>
        <div class="obstacle" style="left: 20%;"></div>
        <div class="obstacle" style="left: 60%;"></div>
    </div>
    <p>スマホで左右に傾けて車を操作し、障害物を避けて走ります。</p>
    <script>
        var car = document.getElementById("car");
        var gameContainer = document.getElementById("game-container");
        var obstacles = document.getElementsByClassName("obstacle");
        var score = 0;

function updateScore() {
            gameContainer.innerHTML += "🏆" + score + "点 ";
        }

updateScore();

function moveCar(x) {
            car.style.left = x + "px";
        }

function checkCollision(obstacle) {
            var carBox = car.getBoundingClientRect();
            var obstacleBox = obstacle.getBoundingClientRect();
            return !(carBox.right < obstacleBox.left || carBox.left > obstacleBox.right || carBox.bottom < obstacleBox.top || carBox.top > obstacleBox.bottom);
        }

function gameOver() {
            alert("ゲームオーバー！あなたのスコアは" + score + "点でした。もう一度やりますか？");
            window.location.reload();
        }

if (window.DeviceOrientationEvent) {
            window.addEventListener("deviceorientation", function(event) {
                var x = (event.beta / 45) * (gameContainer.offsetWidth / 4) + (gameContainer.offsetWidth / 2) - (car.offsetWidth / 2);
                if (x < 0) {
                    x = 0;
                }
                if (x > gameContainer.offsetWidth - car.offsetWidth) {
                    x = gameContainer.offsetWidth - car.offsetWidth;
                }
                moveCar(x);
            });
            setInterval(moveObstacles, 10);
        } else {
            alert("スマホでプレイしてください。");
        }
    </script>
</body>
</html>