Cube dash but every 0.3 seconds a cube appears and falls normally's game

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

No:42634

←

Prev Next

→

Cube dash but every 0.3 seconds a cube appears and..ALL
Developer User18853｜Date and time 24/2/12 11:28:56
Build time 10.2 sec｜Game capacity 3.809KB｜

Script

Score: 0

←

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">
    <title>Cube Dash</title>
    <style>
        #game-area {
            width: 400px;
            height: 600px;
            border: 1px solid black;
            position: relative;
        }
        #player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #cube {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
    <script>
        // Game Variables
        var gameArea;
        var player;
        var cube;
        var score;
        var isGameOver;

// Initialize the game
        function init() {
            gameArea = document.getElementById("game-area");
            player = document.getElementById("player");
            cube = document.getElementById("cube");
            score = 0;
            isGameOver = false;

// Start the cube falling interval
            setInterval(createCube, 300); // A new cube will appear every 0.3 seconds

// Start listening for player input
            window.addEventListener("keydown", movePlayer);
        }

// Create a new cube and start its falling animation
        function createCube() {
            if (!isGameOver) {
                var newCube = cube.cloneNode();
                newCube.style.display = "block";
                gameArea.appendChild(newCube);

// Check for collision between the player and a cube
        function checkCollision() {
            var playerLeft = parseInt(player.style.left, 10);
            var playerRight = playerLeft + player.offsetWidth;
            var cubeBottom = parseInt(cube.style.bottom, 10);
            var cubeTop = cubeBottom + cube.offsetHeight;

if (cubeBottom <= 0 && playerLeft < 50 && playerRight > 0) {
                gameOver();
            } else {
                score++;
                document.getElementById("score").innerHTML = "Score: " + score;
            }
        }

// Move the player left or right based on key press
        function movePlayer(event) {
            if (!isGameOver) {
                var playerLeft = parseInt(player.style.left, 10);
                if (event.keyCode === 37) { // Left Arrow Key
                    if (playerLeft > 0) {
                        player.style.left = (playerLeft - 50) + "px";
                    }
                } else if (event.keyCode === 39) { // Right Arrow Key
                    if (playerLeft < gameArea.clientWidth - 50) {
                        player.style.left = (playerLeft + 50) + "px";
                    }
                }
            }
        }

// Game over function
        function gameOver() {
            isGameOver = true;
            clearInterval(cubeInterval);
            window.removeEventListener("keydown", movePlayer);
            alert("Game Over! Your Score: " + score);
        }

// Start the game
        init();
    </script>
    <div id="game-area">
        <div id="player"></div>
        <div id="cube"></div>
    </div>
    <div id="score">Score: 0</div>
</body>
</html>