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

No:51917

221

←

Prev Next

→

A dungeon crawler that you play as a mech trying t..ALL
Developer User21724｜Date and time 24/3/16 23:43:13
Build time 10.566 sec｜Game capacity 2.238KB｜

Script

Mech Zombie Apocalypse

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Mech Zombie Apocalypse</title>
    <style>
        body {
            text-align: center;
        }
        #gameScreen {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .player {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url('mech.png') center/cover;
        }
        .zombie {
            width: 50px;
            height: 50px;
            position: absolute;
            background: url('zombie.png') center/cover;
        }
    </style>
</head>
<body>
    <h1>Mech Zombie Apocalypse</h1>
    <div id="gameScreen">
        <div class="player"></div>
        <div class="zombie"></div>
        <div class="zombie"></div>
        <div class="zombie"></div>
    </div>
    
    <script>
        const player = document.querySelector('.player');
        const zombies = document.querySelectorAll('.zombie');
        
        let playerX = 200;
        let playerY = 200;
        
        player.style.top = `${playerY}px`;
        player.style.left = `${playerX}px`;
        
        window.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowUp':
                    playerY -= 10;
                    break;
                case 'ArrowDown':
                    playerY += 10;
                    break;
                case 'ArrowLeft':
                    playerX -= 10;
                    break;
                case 'ArrowRight':
                    playerX += 10;
                    break;
            }
            
            player.style.top = `${playerY}px`;
            player.style.left = `${playerX}px`;
            
            zombies.forEach(zombie => {
                const zombieX = Math.floor(Math.random() * 400);
                const zombieY = Math.floor(Math.random() * 400);
                
                zombie.style.top = `${zombieY}px`;
                zombie.style.left = `${zombieX}px`;
            });
        });
    </script>
</body>
</html>