AI game creator

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

No:9240

1855

←

Prev Next

→

Shooting Game
Developer User4320｜Date and time 23/7/22 21:51:34
Build time 39.57 sec｜Game capacity 6.324KB｜

Script

Sure! Here's a simple shooting game implemented as a single HTML file using JavaScript:

To play the game, open the HTML file in a browser. The game will display a player-controlled rectangle at the bottom of the canvas. Move the player left and right using the arrow keys or by dragging the mouse. Click the mouse to shoot bullets at randomly spawning enemies. The goal is to destroy as many enemies as possible without colliding with them. The game will end when an enemy reaches the bottom, and a score will be displayed.

←

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>

// Player object
        function Player(x, y, size, speed) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.speed = speed;
            this.score = 0;
        }

// Bullet object
        function Bullet(x, y, size, speed) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.speed = speed;
        }

// Enemy object
        function Enemy(x, y, size, speed) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.speed = speed;
        }

// Initialize the game
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            player = new Player(canvas.width / 2, canvas.height - 30, 10, 5);
            bullets = [];
            enemies = [];
            gameLoop = setInterval(update, 20);
            document.addEventListener("keydown", keyDownHandler);
            document.addEventListener("keyup", keyUpHandler);
            document.addEventListener("mousemove", mouseMoveHandler);
            document.addEventListener("mousedown", mouseDownHandler);
        }

// Update the game state
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update player position
            player.x += player.speed;

// Keep player within the canvas bounds
            if (player.x < 0) player.x = 0;
            if (player.x > canvas.width - player.size) player.x = canvas.width - player.size;

// Draw player
            ctx.fillRect(player.x, player.y, player.size, player.size);

// Draw bullets
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                bullet.y -= bullet.speed;
                ctx.fillRect(bullet.x, bullet.y, bullet.size, bullet.size);

// Remove bullets when they go out of the canvas
                if (bullet.y < 0) {
                    bullets.splice(i, 1);
                    i--;
                }
            }

// Spawn enemies
            if (Math.random() < 0.01) {
                var enemySize = Math.random() * 20 + 10;
                var enemyX = Math.random() * (canvas.width - enemySize);
                var enemyY = 0 - enemySize;
                var enemySpeed = Math.random() * 2 + 1;
                var enemy = new Enemy(enemyX, enemyY, enemySize, enemySpeed);
                enemies.push(enemy);
            }

// Draw enemies
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                enemy.y += enemy.speed;
                ctx.fillRect(enemy.x, enemy.y, enemy.size, enemy.size);

// Remove enemies when they reach the bottom
                if (enemy.y > canvas.height) {
                    enemies.splice(i, 1);
                    i--;
                }

// Check for collisions between bullets and enemies
                for (var j = 0; j < bullets.length; j++) {
                    var bullet = bullets[j];
                    if (collided(bullet, enemy)) {
                        bullets.splice(j, 1);
                        j--;
                        enemies.splice(i, 1);
                        i--;
                        player.score++;
                    }
                }

// Check for collisions between player and enemies
                if (collided(player, enemy)) {
                    clearInterval(gameLoop);
                    alert("Game Over! Your score: " + player.score);
                    break;
                }
            }

// Display player score
            ctx.font = "16px Arial";
            ctx.fillText("Score: " + player.score, 8, 20);
        }

// Handle key down events
        function keyDownHandler(event) {
            if (event.key === "ArrowLeft") {
                player.speed = -5;
            } else if (event.key === "ArrowRight") {
                player.speed = 5;
            }
        }

// Handle key up events
        function keyUpHandler(event) {
            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                player.speed = 0;
            }
        }

// Handle mouse move events
        function mouseMoveHandler(event) {
            var relativeX = event.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                player.x = relativeX - player.size / 2;
            }
        }

// Handle mouse down events
        function mouseDownHandler(event) {
            var bulletX = player.x + player.size / 2 - 2.5;
            var bulletY = player.y - 5;
            var bulletSize = 5;
            var bulletSpeed = 10;
            var bullet = new Bullet(bulletX, bulletY, bulletSize, bulletSpeed);
            bullets.push(bullet);
        }

// Check collision between two objects
        function collided(object1, object2) {
            return (
                object1.x < object2.x + object2.size &&
                object1.x + object1.size > object2.x &&
                object1.y < object2.y + object2.size &&
                object1.y + object1.size > object2.y
            );
        }

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