AI game creator

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

No:27740

←

Prev Next

→

Shooting Game
Developer User13815｜Date and time 23/12/8 19:56:12
Build time 49.28 sec｜Game capacity 5.125KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!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>
        // Setup Canvas
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Player
        const player = {
            x: 200,
            y: 380,
            width: 32,
            height: 32,
            color: "blue",
        };

// Bullets
        const bullets = [];

// Enemies
        const enemies = [];

// Game Variables
        let score = 0;
        let gameover = false;

// Function to handle player movement
        function movePlayer(event) {
            const key = event.keyCode;
            if (key === 37) { // Left Arrow
                if (player.x > 0) {
                    player.x -= 10;
                }
            } else if (key === 39) { // Right Arrow
                if (player.x < canvas.width - player.width) {
                    player.x += 10;
                }
            } else if (key === 32) { // Spacebar to shoot
                bullets.push({
                    x: player.x + player.width / 2,
                    y: player.y,
                    width: 8,
                    height: 8,
                    color: "red",
                    speed: 5,
                });
            }
        }

// Function to update game state
        function updateGame() {
            if (gameover) {
                return;
            }

// Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            context.fillStyle = player.color;
            context.fillRect(player.x, player.y, player.width, player.height);

// Draw bullets
            for (let i = 0; i < bullets.length; i++) {
                const bullet = bullets[i];
                context.fillStyle = bullet.color;
                context.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
                bullet.y -= bullet.speed;

// Check if bullet hits enemy
                for (let j = 0; j < enemies.length; j++) {
                    const enemy = enemies[j];
                    if (
                        bullet.x < enemy.x + enemy.width &&
                        bullet.x + bullet.width > enemy.x &&
                        bullet.y < enemy.y + enemy.height &&
                        bullet.y + bullet.height > enemy.y
                    ) {
                        // Bullet hit enemy
                        bullets.splice(i, 1);
                        enemies.splice(j, 1);
                        score += 10;
                    }
                }

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

// Draw enemies
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                context.fillStyle = enemy.color;
                context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
                enemy.y += enemy.speed;

// Check if enemy hits player
                if (
                    player.x < enemy.x + enemy.width &&
                    player.x + player.width > enemy.x &&
                    player.y < enemy.y + enemy.height &&
                    player.y + player.height > enemy.y
                ) {
                    // Enemy hit player
                    gameover = true;
                    alert("Game Over! Score: " + score);
                    resetGame();
                }

// Remove enemies when they go out of the canvas
                if (enemy.y > canvas.height) {
                    enemies.splice(i, 1);
                }
            }

// Add new enemy periodically
            if (Math.random() < 0.01) {
                const enemy = {
                    x: Math.random() * (canvas.width - 32),
                    y: 0,
                    width: 32,
                    height: 32,
                    color: "green",
                    speed: Math.random() * 2 + 1,
                };
                enemies.push(enemy);
            }

// Update score on the screen
            context.fillStyle = "black";
            context.font = "16px Arial";
            context.fillText("Score: " + score, 10, 20);

// Continue the game loop
            requestAnimationFrame(updateGame);
        }

// Function to reset the game state
        function resetGame() {
            score = 0;
            player.x = 200;
            bullets.length = 0;
            enemies.length = 0;
            gameover = false;
        }

// Start the game
        function startGame() {
            window.addEventListener("keydown", movePlayer);
            updateGame();
        }

startGame();
    </script>
</body>
</html>