You are a red emoji circle running from a red emoji monster with red triangle emoji spikes tap to jump's game

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

No:38497

←

Prev Next

→

You are a red emoji circle running from a red emoj..ALL
Developer User17401｜Date and time 24/1/24 23:44:09
Build time 11.239 sec｜Game capacity 2.645KB｜

Script

🔴

🔻

▲

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Emoji Escape Game</title>
    <style>
        #game-container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 5rem;
        }
        #player {
            color: red;
            cursor: pointer;
        }
        #monster {
            color: red;
            animation: monster-move 2s infinite linear;
        }
        @keyframes monster-move {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        #spikes {
            color: red;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player" onclick="jump()">🔴</div>
        <div id="monster">🔻</div>
        <div id="spikes">▲</div>
    </div>

function jump() {
            if (!isGameOver) {
                document.getElementById("player").classList.add("jump");

setTimeout(() => {
                    document.getElementById("player").classList.remove("jump");
                }, 500);
            }
        }

function checkCollision() {
            let playerPos = document.getElementById("player").getBoundingClientRect();
            let monsterPos = document.getElementById("monster").getBoundingClientRect();
            let spikesPos = document.getElementById("spikes").getBoundingClientRect();

if (
                playerPos.right >= monsterPos.left &&
                playerPos.left <= monsterPos.right &&
                playerPos.bottom >= monsterPos.top &&
                playerPos.top <= monsterPos.bottom
            ) {
                endGame();
            } 
            else if (
                playerPos.right >= spikesPos.left &&
                playerPos.left <= spikesPos.right &&
                playerPos.bottom >= spikesPos.top &&
                playerPos.top <= spikesPos.bottom
            ) {
                endGame();
            }
        }

function endGame() {
            isGameOver = true;
            alert("Game Over! Your score: " + score);
            resetGame();
        }

function resetGame() {
            score = 0;
            isGameOver = false;
        }

function updateScore() {
            score++;
            document.getElementById("score").innerText = "Score: " + score;
        }

setInterval(() => {
            checkCollision();
            updateScore();
        }, 100);

</script>
</body>
</html>