AI game creator

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

No:6105

714

←

Prev Next

→

Shooting Game
Developer User3861｜Date and time 23/7/1 16:59:49
Build time 37.17 sec｜Game capacity 4.874KB｜

Script

Sure, here's a simple shooting game implemented as a single HTML file using JavaScript:

This game involves shooting enemies with bullets while avoiding collisions with them. The player is controlled using the left and right arrow keys, and bullets are fired using the spacebar. Enemies continuously descend from the top of the canvas, and the player earns points by shooting down enemies. The game ends if an enemy collides with the player.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure, here's a simple shooting game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        var player = { x: 200, y: 380, width: 20, height: 20, color: "#0000FF" };
        var bullets = [];
        var enemies = [];
        var score = 0;
        
        function drawPlayer() {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }
        
        function drawBullets() {
            bullets.forEach(function(bullet) {
                bullet.y -= 5; // move bullet up
                ctx.fillStyle = "#00FF00";
                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
                
                // check if bullet hits any enemy
                enemies.forEach(function(enemy, index) {
                    if (bullet.x > enemy.x && bullet.x < enemy.x + enemy.width &&
                        bullet.y > enemy.y && bullet.y < enemy.y + enemy.height) {
                        bullets.splice(bullets.indexOf(bullet), 1); // remove bullet
                        enemies.splice(index, 1); // remove enemy
                        score += 10;
                    }
                });
                
                // remove bullet if it goes off-screen
                if (bullet.y < 0) {
                    bullets.splice(bullets.indexOf(bullet), 1);
                }
            });
        }
        
        function drawEnemies() {
            enemies.forEach(function(enemy) {
                enemy.y += 2; // move enemy down
                ctx.fillStyle = "#FF0000";
                ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
                
                // check if enemy collides with player
                if (enemy.y + enemy.height > player.y && enemy.y < player.y + player.height &&
                    enemy.x + enemy.width > player.x && enemy.x < player.x + player.width) {
                    endGame();
                }
                
                // remove enemy if it goes off-screen
                if (enemy.y > canvas.height) {
                    enemies.splice(enemies.indexOf(enemy), 1);
                }
            });
        }
        
        function drawScore() {
            ctx.fillStyle = "#000000";
            ctx.font = "16px Arial";
            ctx.fillText("Score: " + score, 10, 20);
        }
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
            
            drawPlayer();
            drawBullets();
            drawEnemies();
            drawScore();
            
            requestAnimationFrame(draw); // loop for animation
        }
        
        function endGame() {
            // stop game and show game over message
            cancelAnimationFrame(draw);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "#000000";
            ctx.font = "20px Arial";
            ctx.fillText("Game Over!", (canvas.width - 100) / 2, canvas.height / 2);
            ctx.font = "16px Arial";
            ctx.fillText("Final Score: " + score, (canvas.width - 100) / 2, canvas.height / 2 + 30);
        }
        
        function shoot() {
            bullets.push({ x: player.x + player.width / 2, y: player.y - 10, width: 4, height: 10 });
        }
        
        document.addEventListener("keydown", function(event) {
            if (event.keyCode === 37) { // left arrow key
                if (player.x > 0) {
                    player.x -= 5;
                }
            } else if (event.keyCode === 39) { // right arrow key
                if (player.x + player.width < canvas.width) {
                    player.x += 5;
                }
            } else if (event.keyCode === 32) { // spacebar
                shoot();
            }
        });
        
        function createEnemy() {
            var enemy = { x: Math.random() * (canvas.width - 10), y: -10, width: 10, height: 10 };
            enemies.push(enemy);
            setTimeout(createEnemy, 1000);
        }
        
        createEnemy();
        draw();
    </script>
</body>
</html>
```