Jogo space shooter's game | AI game creator

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

No:38780

65

Jogo space shooter
Developer User17429｜Date and time 24/1/25 10:43:10
Build time 28.553 sec｜Game capacity 6.754KB｜

HTML Code:

Este código é um exemplo de um jogo simples de Space Shooter implementado em um único arquivo HTML, com JavaScript. No jogo, o jogador controla uma nave espacial que pode mover para a esquerda e direita usando as teclas de seta. O jogador também pode disparar balas pressionando a barra de espaço. O objetivo do jogo é atirar nos inimigos que estão caindo do topo da tela. Cada inimigo destruído aumenta a pontuação do jogador. O jogo continua até que um inimigo alcance a parte inferior da tela. O jogo utiliza o elemento `canvas` do HTML para desenhar os elementos na tela. A função `draw()` é responsável por desenhar a nave do jogador, as balas, os inimigos e a pontuação atualizada. A função `update()` é responsável por atualizar a posição dos elementos e verificar colisões. O jogo inicia um intervalo de tempo onde a função `spawnEnemy()` é chamada periodicamente para criar novos inimigos. A função `update()` é invocada a cada quadro para atualizar a lógica do jogo e desenhar os elementos atualizados. Os eventos de teclado estão sendo ouvidos para que o jogador possa controlar a nave usando as teclas de seta e disparar balas com a barra de espaço. Espero que isso ajude! Divirta-se jogando o Space Shooter!

→ 　

0　

0　

　

　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

HTML Code:

```html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo Space Shooter</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="480" height="320"></canvas>

<script>
        // Elementos do jogo
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var player = { x: 220, y: 280, width: 40, height: 40, dx: 0 };
        var bullets = [];
        var enemies = [];
        var score = 0;
        var gameInterval;

// Função para desenhar o jogador
        function drawPlayer() {
            context.fillStyle = "#FFFFFF";
            context.fillRect(player.x, player.y, player.width, player.height);
        }

// Função para desenhar as balas
        function drawBullets() {
            context.fillStyle = "#00FF00";
            for (var i = 0; i < bullets.length; i++) {
                context.fillRect(
                    bullets[i].x,
                    bullets[i].y,
                    bullets[i].width,
                    bullets[i].height
                );
            }
        }

// Função para desenhar os inimigos
        function drawEnemies() {
            context.fillStyle = "#FF0000";
            for (var i = 0; i < enemies.length; i++) {
                context.fillRect(
                    enemies[i].x,
                    enemies[i].y,
                    enemies[i].width,
                    enemies[i].height
                );
            }
        }

// Função para atualizar a posição do jogador
        function updatePlayer() {
            if (player.x + player.dx > 0 && player.x + player.dx < canvas.width - player.width) {
                player.x += player.dx;
            }
        }

// Função para atualizar as posições das balas
        function updateBullets() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].y -= 4;

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

// Função para atualizar as posições dos inimigos
        function updateEnemies() {
            for (var i = 0; i < enemies.length; i++) {
                enemies[i].y += 2;

if (enemies[i].y > canvas.height) {
                    enemies.splice(i, 1);
                    i--;
                }
            }
        }

// Função para detectar colisões entre balas e inimigos
        function detectCollisions() {
            for (var i = 0; i < bullets.length; i++) {
                for (var j = 0; j < enemies.length; j++) {
                    if (
                        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);
                        enemies.splice(j, 1);
                        i--;
                        j--;
                        score++;
                    }
                }
            }
        }

// Função para atualizar o placar na tela
        function updateScore() {
            context.fillStyle = "#000";
            context.font = "18px Arial";
            context.fillText("Score: " + score, 10, 20);
        }

// Função para desenhar tudo na tela
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
            drawBullets();
            drawEnemies();
            updateScore();
        }

// Função para realizar as atualizações do jogo
        function update() {
            updatePlayer();
            updateBullets();
            updateEnemies();
            detectCollisions();
            draw();
        }

// Função para criar novas balas
        function shoot() {
            bullets.push({
                x: player.x + player.width / 2 - 2,
                y: player.y - 10,
                width: 4,
                height: 10
            });
        }

// Função para criar novos inimigos
        function spawnEnemy() {
            var randomX = Math.floor(Math.random() * canvas.width);
            enemies.push({ x: randomX, y: -30, width: 30, height: 30 });
        }

// Evento de tecla pressionada
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft") {
                player.dx = -3;
            }
            if (event.key === "ArrowRight") {
                player.dx = 3;
            }
            if (event.key === " ") {
                shoot();
            }
        });

// Evento de tecla solta
        document.addEventListener("keyup", function(event) {
            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                player.dx = 0;
            }
        });

// Iniciar o jogo
        gameInterval = setInterval(function() {
            spawnEnemy();
            update();
        }, 1000 / 60);
    </script>
</body>
</html>
```

Este código é um exemplo de um jogo simples de Space Shooter implementado em um único arquivo HTML, com JavaScript. No jogo, o jogador controla uma nave espacial que pode mover para a esquerda e direita usando as teclas de seta. O jogador também pode disparar balas pressionando a barra de espaço.

O objetivo do jogo é atirar nos inimigos que estão caindo do topo da tela. Cada inimigo destruído aumenta a pontuação do jogador. O jogo continua até que um inimigo alcance a parte inferior da tela.

O jogo utiliza o elemento `canvas` do HTML para desenhar os elementos na tela. A função `draw()` é responsável por desenhar a nave do jogador, as balas, os inimigos e a pontuação atualizada. A função `update()` é responsável por atualizar a posição dos elementos e verificar colisões.

O jogo inicia um intervalo de tempo onde a função `spawnEnemy()` é chamada periodicamente para criar novos inimigos. A função `update()` é invocada a cada quadro para atualizar a lógica do jogo e desenhar os elementos atualizados.

Os eventos de teclado estão sendo ouvidos para que o jogador possa controlar a nave usando as teclas de seta e disparar balas com a barra de espaço.

Espero que isso ajude! Divirta-se jogando o Space Shooter!