敵を倒しながら山を登るゲーム's game

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

No:46962

←

Prev Next

→

敵を倒しながら山を登るゲーム
Developer User20328｜Date and time 24/2/26 20:24:09
Build time 11.939 sec｜Game capacity 2.976KB｜

Script

🧗

🐻

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mountain Climbing Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: skyblue;
        }

#player {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            font-size: 3em;
        }

#enemy {
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 3em;
        }

#score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 2em;
        }

</style>
</head>

<body>
    <div id="player">🧗</div>
    <div id="enemy">🐻</div>
    <div id="score">Score: 0</div>

let score = 0;

function moveEnemy() {
            const randomPosition = Math.floor(Math.random() * window.innerWidth);
            enemy.style.left = `${randomPosition}px`;
        }

function increaseScore() {
            score++;
            scoreDisplay.textContent = `Score: ${score}`;
        }

function checkCollision() {
            const playerRect = player.getBoundingClientRect();
            const enemyRect = enemy.getBoundingClientRect();

if (playerRect.bottom >= enemyRect.top && playerRect.left <= enemyRect.right && playerRect.right >= enemyRect.left) {
                alert('Game Over! Your final score is: ' + score);
                score = 0;
                scoreDisplay.textContent = 'Score: 0';
            } else {
                window.requestAnimationFrame(checkCollision);
            }
        }

document.addEventListener('keydown', function (event) {
            if (event.key === 'ArrowLeft') {
                player.style.left = parseInt(player.style.left, 10) - 10 + 'px';
            } else if (event.key === 'ArrowRight') {
                player.style.left = parseInt(player.style.left, 10) + 10 + 'px';
            }

if (parseInt(player.style.left, 10) < 0) {
                player.style.left = 0;
            }

if (parseInt(player.style.left, 10) + player.offsetWidth > window.innerWidth) {
                player.style.left = window.innerWidth - player.offsetWidth + 'px';
            }
        });

moveEnemy();
        checkCollision();

setInterval(() => {
            moveEnemy();
            increaseScore();
        }, 1000);

</script>
</body>

</html>