A geometry dash port where you take control of a yellow square and you are moving infinitely across the screen while the camera follows you, there are spikes you need to avoid that are placed in the level and if you touch one of the spikes you have to restart the game. If you get to the end you win! Tap on the screen yo jump and then go back down. Teal background and purple spikes's game

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

No:48057

←

Prev Next

→

A geometry dash port where you take control of a y..ALL
Developer User19162｜Date and time 24/3/1 8:03:49
Build time 7.193 sec｜Game capacity 2.291KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jumping Square Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: teal;
        }

#square {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: yellow;
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
        }

.spike {
            position: absolute;
            width: 20px;
            height: 50px;
            background-color: purple;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="square"></div>
    <script>
        const square = document.getElementById('square');
        const spikes = document.querySelectorAll('.spike');
        let gameover = false;

document.body.addEventListener('click', jump);

function jump() {
            if (!gameover) {
                let currentTop = parseInt(square.style.top) || square.offsetTop;
                square.style.top = (currentTop - 100) + 'px';

setTimeout(() => {
                    square.style.top = currentTop + 'px';
                }, 300);
            } else {
                resetGame();
            }
        }

function checkCollision() {
            spikes.forEach(spike => {
                if (isColliding(square, spike)) {
                    gameover = true;
                }
            });
        }

function isColliding(a, b) {
            const aRect = a.getBoundingClientRect();
            const bRect = b.getBoundingClientRect();

return !(
                aRect.bottom < bRect.top ||
                aRect.top > bRect.bottom ||
                aRect.right < bRect.left ||
                aRect.left > bRect.right
            );
        }

function resetGame() {
            square.style.top = '50%';
            gameover = false;
        }

function gameLoop() {
            if (!gameover) {
                checkCollision();
                requestAnimationFrame(gameLoop);
            }
        }

gameLoop();
    </script>
</body>

</html>
```