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

No:20137

Evil crabs are invading Uganda
Developer User8969｜Date and time 23/10/8 16:22:15
Build time 14.031 sec｜Game capacity 2.533KB｜

Script

Uganda's Crab Invasion

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Uganda's Crab Invasion</title>
    <style>
        body {
            background-color: skyblue;
            text-align: center;
        }
        h1 {
            color: white;
            padding: 20px;
        }
        #game-container {
            position: relative;
            width: 300px;
            height: 500px;
            margin: 0 auto;
            background-image: url('crab-background.jpg');
            background-size: cover;
            overflow: hidden;
        }
        .player {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .crab {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('crab-pictogram.png');
            background-size: contain;
            background-repeat: no-repeat;
            animation: crabMove 2s infinite linear;
        }
        @keyframes crabMove {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(450px);
            }
        }
    </style>
</head>
<body>
    <h1>Uganda's Crab Invasion</h1>
    <div id="game-container">
        <div class="player">
            <img src="player-pictogram.png" alt="Player" width="50" height="50">
        </div>
        <div class="crab"></div>
    </div>
   
<script>
    document.addEventListener('DOMContentLoaded', startGame);

function startGame() {
        document.addEventListener('keydown', movePlayer);
        setInterval(spawnCrab, 2000);
    }

function movePlayer(event) {
        const player = document.querySelector('.player');
        const keyCode = event.keyCode;
        const leftBoundary = 0;
        const rightBoundary = 300;

if (keyCode === 37) { // Left Arrow
            const playerX = parseInt(player.style.left);
            if (playerX > leftBoundary) {
                player.style.left = playerX - 10 + 'px';
            }
        } else if (keyCode === 39) { // Right Arrow
            const playerX = parseInt(player.style.left);
            if (playerX < rightBoundary) {
                player.style.left = playerX + 10 + 'px';
            }
        }
    }

function spawnCrab() {
        const crabContainer = document.createElement('div');
        crabContainer.classList.add('crab');
        document.getElementById('game-container').appendChild(crabContainer);
    }

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