Cube jumps over spikes, collect the trophy to win.'s game

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

No:26531

←

Prev Next

→

Cube jumps over spikes, collect the trophy to win.
Developer User13175｜Date and time 23/12/1 12:08:52
Build time 64.843 sec｜Game capacity 4.878KB｜

Script

To play the game, simply open the HTML file in a web browser (on a smartphone or computer) and tap/click anywhere on the screen to make the cube jump. The cube must avoid colliding with the spikes and collect the trophy to win. If the cube touches a spike, the game is over and a prompt will appear to try again. Once the cube successfully jumps twice (over the spikes), a prompt will appear congratulating the player for winning, and the game will reset.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cube Jump Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #canvas {
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #cube {
            width: 50px;
            height: 50px;
            background-color: #0099ff;
            position: absolute;
            bottom: 0;
        }
        #trophy {
            width: 30px;
            height: 30px;
            background-color: #ffcc00;
            position: absolute;
        }
        .spike {
            width: 30px;
            height: 50px;
            background-color: #333333;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="canvas">
        <div id="cube"></div>
        <div id="trophy"></div>
        <div class="spike"></div>
        <div class="spike"></div>
        <div class="spike"></div>
        <div class="spike"></div>
        <div class="spike"></div>
    </div>

function jump() {
                cube.style.transform = "translateY(-100px)";
                jumpCount++;
                
                if (jumpCount === 2) {
                    clearInterval(gameInterval);
                    alert("Congratulations! You won the game!");
                    resetGame();
                }
            }

function resetGame() {
                cube.style.transform = "translateY(0)";
                isJumping = false;
                jumpCount = 0;
                gameInterval = setInterval(updateGame, 10);
            }

function checkCollision() {
                const cubeRect = cube.getBoundingClientRect();
                const trophyRect = trophy.getBoundingClientRect();

if (cubeRect.top <= 0) {
                    jump();
                }

if (
                    trophyRect.left < cubeRect.left + cubeRect.width &&
                    trophyRect.left + trophyRect.width > cubeRect.left &&
                    trophyRect.top < cubeRect.top + cubeRect.height &&
                    trophyRect.top + trophyRect.height > cubeRect.top
                ) {
                    jump();
                }

for (let i = 0; i < spikes.length; i++) {
                    const spikeRect = spikes[i].getBoundingClientRect();

if (
                        spikeRect.left < cubeRect.left + cubeRect.width &&
                        spikeRect.left + spikeRect.width > cubeRect.left &&
                        spikeRect.top < cubeRect.top + cubeRect.height &&
                        spikeRect.top + spikeRect.height > cubeRect.top
                    ) {
                        clearInterval(gameInterval);
                        alert("Game Over! Try again.");
                        resetGame();
                    }
                }
            }

checkCollision();
            }

document.addEventListener("click", function() {
                if (!isJumping) {
                    isJumping = true;
                }
            });

// Start the game
            resetGame();
        });
    </script>
</body>
</html>
```