Maak een spel datzich afspeelt in de ruimte waarbij jij een astronaut bent en aliens moet doden's game

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

No:37312

←

Prev Next

→

Maak een spel datzich afspeelt in de ruimte waarbi..ALL
Developer User17057｜Date and time 24/1/21 0:40:31
Build time 15.204 sec｜Game capacity 4.378KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Ruimte Avontuur</title>
    <style>
        #game-container {
            width: 100vw;
            height: 100vh;
            background: black;
            position: relative;
        }
        
        #player {
            position: absolute;
            bottom: 50px;
            left: 50px;
            width: 50px;
            height: 50px;
            background: url('astronaut.png') no-repeat center center;
            background-size: contain;
        }
        
        .alien {
            position: absolute;
            width: 50px;
            height: 50px;
            background: url('alien.png') no-repeat center center;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>
    
    <script>
        // Astronaut object
        let astronaut = document.querySelector('#player');
        let astronautX = 50;
        let astronautY = 50;
        
        // Alien objects
        let aliens = [];
        
        // Game loop
        setInterval(function() {
            spawnAlien();
            updateAliens();
        }, 2000);
        
        // Handle user input
        window.addEventListener('keydown', function(event) {
            let keyPressed = event.key;
            
            switch (keyPressed) {
                case 'ArrowUp':
                    moveUp();
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
            }
        });
        
        // Move astronaut up
        function moveUp() {
            if (astronautY > 50) {
                astronautY -= 50;
            }
            astronaut.style.top = astronautY + 'px';
        }
        
        // Move astronaut down
        function moveDown() {
            if (astronautY < (window.innerHeight - 100)) {
                astronautY += 50;
            }
            astronaut.style.top = astronautY + 'px';
        }
        
        // Move astronaut left
        function moveLeft() {
            if (astronautX > 50) {
                astronautX -= 50;
            }
            astronaut.style.left = astronautX + 'px';
        }
        
        // Move astronaut right
        function moveRight() {
            if (astronautX < (window.innerWidth - 100)) {
                astronautX += 50;
            }
            astronaut.style.left = astronautX + 'px';
        }
        
        // Spawn an alien
        function spawnAlien() {
            let alien = document.createElement('div');
            alien.classList.add('alien');
            let alienX = window.innerWidth - 100;
            let alienY = Math.floor(Math.random() * (window.innerHeight - 100));
            alien.style.left = alienX + 'px';
            alien.style.top = alienY + 'px';
            document.getElementById('game-container').appendChild(alien);
            aliens.push(alien);
        }
        
        // Update all aliens' positions
        function updateAliens() {
            aliens.forEach(function(alien, index) {
                let alienX = parseInt(alien.style.left);
                let alienY = parseInt(alien.style.top);
                
                if (alienX > 0) {
                    alienX -= 10;
                    alien.style.left = alienX + 'px';
                }
                else {
                    aliens.splice(index, 1);
                    alien.remove();
                }
                
                if (collisionDetection(alienX, alienY)) {
                    gameOver();
                }
            });
        }
        
        // Check if the player collides with an alien
        function collisionDetection(alienX, alienY) {
            return (astronautX < alienX + 50 &&
                    astronautX + 50 > alienX &&
                    astronautY < alienY + 50 &&
                    astronautY + 50 > alienY);
        }
        
        // Game over
        function gameOver() {
            alert('Je bent gepakt door een alien. Spel afgelopen!');
            location.reload();
        }
    </script>
</body>
</html>