Space shooting games's game

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

No:23139

←

Prev Next

→

Space shooting games
Developer User10675｜Date and time 23/10/28 3:21:26
Build time 106.103 sec｜Game capacity 5.756KB｜

Script

Here is an example of a simple space shooting game implemented as a single HTML file using JavaScript:

To play the game, you can open the HTML file in a web browser, and control the player using the left and right arrow keys to move and the spacebar to shoot bullets. The objective is to avoid the descending enemies and destroy them by shooting bullets at them.

←

Prev　Next

→ 　

Back　

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

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

Here is an example of a simple space shooting game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Space Shooting Game</title>
    <style>
        #game-container {
            width: 100vw;
            height: 100vh;
            background-color: black;
            overflow: hidden;
            position: relative;
        }
        #player {
            width: 50px;
            height: 50px;
            background-color: white;
            position: absolute;
        }
        .bullet {
            width: 10px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
        .enemy {
            width: 30px;
            height: 30px;
            background-color: green;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>

// Keyboard keys mapping
        var keys = {
            space: 32,
            left: 37,
            right: 39
        };

// Game initialization
        function init() {
            gameContainer = document.getElementById("game-container");
            player = document.getElementById("player");
            player.style.left = (gameContainer.offsetWidth / 2 - player.offsetWidth / 2) + "px";
            player.style.top = (gameContainer.offsetHeight - player.offsetHeight) + "px";

document.addEventListener("keydown", handleKeyPress);
            gameLoop();
        }

// Handle key presses
        function handleKeyPress(event) {
            if (event.keyCode === keys.left) {
                movePlayer(-10);
            } else if (event.keyCode === keys.right) {
                movePlayer(10);
            } else if (event.keyCode === keys.space) {
                shoot();
            }
        }

// Move player left or right
        function movePlayer(delta) {
            var playerPosition = player.offsetLeft + delta;
            var containerWidth = gameContainer.offsetWidth;
            if (playerPosition >= 0 && playerPosition <= containerWidth - player.offsetWidth) {
                player.style.left = playerPosition + "px";
            }
        }

// Shooting bullets
        function shoot() {
            var bullet = document.createElement("div");
            bullet.className = "bullet";
            bullet.style.left = (player.offsetLeft + player.offsetWidth / 2 - bullet.offsetWidth / 2) + "px";
            bullet.style.top = (player.offsetTop - bullet.offsetHeight) + "px";
            gameContainer.appendChild(bullet);
            bullets.push(bullet);
        }

// Game loop
        function gameLoop() {
            moveBullets();
            createEnemies();
            moveEnemies();
            detectCollisions();

requestAnimationFrame(gameLoop);
        }

// Move bullets upwards
        function moveBullets() {
            bullets.forEach(function(bullet) {
                var bulletTop = parseInt(bullet.style.top);
                if (bulletTop > 0) {
                    bullet.style.top = (bulletTop - 10) + "px";
                } else {
                    bullet.remove();
                    bullets.splice(bullets.indexOf(bullet), 1);
                }
            });
        }

// Create enemies randomly
        function createEnemies() {
            if (Math.random() < 0.02) {
                var enemy = document.createElement("div");
                enemy.className = "enemy";
                enemy.style.left = Math.random() * (gameContainer.offsetWidth - enemy.offsetWidth) + "px";
                enemy.style.top = (-enemy.offsetHeight) + "px";
                gameContainer.appendChild(enemy);
                enemies.push(enemy);
            }
        }

// Move enemies downwards
        function moveEnemies() {
            enemies.forEach(function(enemy) {
                var enemyTop = parseInt(enemy.style.top);
                if (enemyTop < gameContainer.offsetHeight) {
                    enemy.style.top = (enemyTop + 5) + "px";
                } else {
                    enemy.remove();
                    enemies.splice(enemies.indexOf(enemy), 1);
                }
            });
        }

// Detect collisions between bullets and enemies
        function detectCollisions() {
            bullets.forEach(function(bullet) {
                var bulletRect = bullet.getBoundingClientRect();
                enemies.forEach(function(enemy) {
                    var enemyRect = enemy.getBoundingClientRect();
                    if (bulletRect.right >= enemyRect.left && bulletRect.left <= enemyRect.right &&
                        bulletRect.bottom >= enemyRect.top && bulletRect.top <= enemyRect.bottom) {
                        bullet.remove();
                        bullets.splice(bullets.indexOf(bullet), 1);
                        enemy.remove();
                        enemies.splice(enemies.indexOf(enemy), 1);
                    }
                });
            });
        }

// Start the game
        init();
    </script>
</body>
</html>
```