AI game creator

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

No:33110

←

Prev Next

→

Shooting Game
Developer User15655｜Date and time 24/1/2 17:10:44
Build time 39.542 sec｜Game capacity 4.561KB｜

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"></canvas>

// Creación del jugador
        const player = {
            x: canvas.width / 2,
            y: canvas.height - 30,
            width: 30,
            height: 30,
            color: "blue"
        };

// Movimiento del jugador
        function movePlayer(event) {
            if (event.key === "ArrowLeft" && player.x > 0) {
                player.x -= 10;
            } else if (event.key === "ArrowRight" && player.x < canvas.width - player.width) {
                player.x += 10;
            }
        }

// Disparo del jugador
        function shoot() {
            const bullet = {
                x: player.x + player.width / 2 - 2.5,
                y: player.y,
                width: 5,
                height: 10,
                color: "red",
                speed: 5
            };

bullets.push(bullet);
        }

document.addEventListener("keydown", movePlayer);

// Creación de los enemigos
        const enemies = [];
        const totalEnemies = 10;

for (let i = 0; i < totalEnemies; i++) {
            const enemy = {
                x: Math.random() * (canvas.width - 20) + 10,
                y: Math.random() * 100,
                width: 20,
                height: 20,
                color: "green",
                speed: Math.random() * 2 + 1
            };

enemies.push(enemy);
        }

// Movimiento de los enemigos
        function moveEnemies() {
            for (let i = 0; i < enemies.length; i++) {
                enemies[i].y += enemies[i].speed;

if (enemies[i].y > canvas.height) {
                    enemies[i].x = Math.random() * (canvas.width - 20) + 10;
                    enemies[i].y = -30;
                }

// Colisión del jugador con los enemigos
                if (player.x < enemies[i].x + enemies[i].width &&
                    player.x + player.width > enemies[i].x &&
                    player.y < enemies[i].y + enemies[i].height &&
                    player.y + player.height > enemies[i].y) {
                    alert("¡Game over!");
                    location.reload();
                }
            }
        }

// Movimiento de los disparos
        const bullets = [];

function moveBullets() {
            for (let i = 0; i < bullets.length; i++) {
                bullets[i].y -= bullets[i].speed;

if (bullets[i].y < 0) {
                    bullets.splice(i, 1);
                    i--;
                }

// Colisión de los disparos con los enemigos
                for (let j = 0; j < enemies.length; j++) {
                    if (bullets[i] && bullets[i].x < enemies[j].x + enemies[j].width &&
                        bullets[i].x + bullets[i].width > enemies[j].x &&
                        bullets[i].y < enemies[j].y + enemies[j].height &&
                        bullets[i].y + bullets[i].height > enemies[j].y) {
                        bullets.splice(i, 1);
                        i--;
                        enemies.splice(j, 1);
                        j--;
                    }
                }
            }
        }

// Dibujado en el canvas
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);

for (let i = 0; i < bullets.length; i++) {
                ctx.fillStyle = bullets[i].color;
                ctx.fillRect(bullets[i].x, bullets[i].y, bullets[i].width, bullets[i].height);
            }

for (let i = 0; i < enemies.length; i++) {
                ctx.fillStyle = enemies[i].color;
                ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
            }
        }

// Función principal del juego
        function gameLoop() {
            moveEnemies();
            moveBullets();
            draw();

requestAnimationFrame(gameLoop);
        }

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