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

No:36628

←

Prev Next

→

Rush Game
Developer User16822｜Date and time 24/1/18 4:35:50
Build time 15.2 sec｜Game capacity 4.176KB｜

Script

Rush Game

Game Over

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Rush Game</title>
    <style>
        body {
            background-color: #F7F7F7;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        h1 {
            color: #333333;
            margin: 50px 0;
        }
        
        #game-container {
            width: 300px;
            height: 400px;
            margin: 0 auto;
            border: 2px solid #333333;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .car {
            width: 50px;
            height: 100px;
            position: absolute;
            bottom: 0;
            transition: all 0.3s ease-in-out;
        }
        
        #player-car {
            background-image: url('path-to-your-player-car-pictogram.png');
        }
        
        .obstacle-car {
            background-image: url('path-to-your-obstacle-car-pictogram.png');
        }
        
        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            color: red;
            display: none;
        }
        
        .score {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 18px;
            color: #333333;
        }
    </style>
</head>
<body>
    <h1>Rush Game</h1>
    <div id="game-container">
        <div id="player-car" class="car"></div>
        <div class="obstacle-car"></div>
        <div class="obstacle-car"></div>
        <div class="obstacle-car"></div>
        <div class="obstacle-car"></div>
    </div>
    <div class="game-over">Game Over</div>
    <div class="score">Score: 0</div>

let score = 0;
            let isGameOver = false;
            let gameSpeed = 2;
            let playerCarPosition = 2;

function updateScore() {
                score += 1;
                scoreElement.textContent = "Score: " + score;
            }

function movePlayerCar(event) {
                if (event.key === "ArrowLeft" && playerCarPosition > 1) {
                    playerCarPosition -= 1;
                } else if (event.key === "ArrowRight" && playerCarPosition < 3) {
                    playerCarPosition += 1;
                }

playerCar.style.left = `${playerCarPosition * 70 - 50}px`;
            }

function updateObstacleCars() {
                obstacleCars.forEach((obstacleCar) => {
                    const obstacleCarPosition = parseInt(obstacleCar.style.bottom);

if (obstacleCarPosition <= -80) {
                        obstacleCar.style.left = `${(Math.floor(Math.random() * 3) + 1) * 70 - 50}px`;
                        obstacleCar.style.bottom = "400px";
                        updateScore();
                    }

obstacleCar.style.bottom = `${obstacleCarPosition - gameSpeed}px`;

if (
                        obstacleCarPosition <= 70 &&
                        obstacleCarPosition >= 10 &&
                        playerCarPosition === parseInt(obstacleCar.style.left) / 70
                    ) {
                        gameOver.style.display = "block";
                        isGameOver = true;
                    }
                });

if (!isGameOver) {
                    requestAnimationFrame(updateObstacleCars);
                } else {
                    document.removeEventListener("keydown", movePlayerCar);
                }
            }

document.addEventListener("keydown", movePlayerCar);
            requestAnimationFrame(updateObstacleCars);
        });
    </script>
</body>
</html>