Spaces:

giseldo
/

jogo_space_invaders

Running

App Files Files Community

giseldo commited on Apr 13, 2025

Commit

ac3c319

verified ·

1 Parent(s): a29b598

Update index.html

Browse files

Files changed (1) hide show

index.html +544 -94

index.html CHANGED Viewed

@@ -1,94 +1,544 @@
-<style>
-    body { margin: 0; overflow: hidden; }
-    canvas { display: block; }
-    #ui {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        color: white;
-        font-family: Arial, sans-serif;
-        display: none;
-    }
-    #center-ui {
-        position: absolute;
-        top: 10px;
-        left: 50%;
-        transform: translateX(-50%);
-        color: white;
-        font-family: Arial, sans-serif;
-        text-align: center;
-        display: none;
-    }
-    #deaths-ui {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        color: white;
-        font-family: Arial, sans-serif;
-        text-align: right;
-        display: none;
-    }
-    #gameOver {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: white;
-        font-family: Arial, sans-serif;
-        text-align: center;
-        display: none;
-    }
-    #gameOver button {
-        font-size: 32px; /* Aumenta o tamanho da fonte */
-        padding: 15px 30px; /* Aumenta o preenchimento */
-        cursor: pointer;
-        border: none; /* Opcional: remove borda padrão */
-        background-color: #ff0000; /* Opcional: fundo vermelho */
-        color: white; /* Opcional: texto branco */
-        border-radius: 5px; /* Opcional: bordas arredondadas */
-    }
-    #gameOver button:hover {
-        background-color: #cc0000; /* Opcional: cor ao passar o mouse */
-    }
-    #startScreen {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: white;
-        font-family: Arial, sans-serif;
-        text-align: center;
-        display: block;
-    }
-    #startScreen h1 {
-        font-size: 48px;
-        margin-bottom: 20px;
-    }
-    #startScreen p {
-        font-size: 24px;
-        margin: 10px 0;
-    }
-    #startScreen button {
-        font-size: 24px;
-        padding: 10px 20px;
-        cursor: pointer;
-    }
-    #pausedScreen {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: white;
-        font-family: Arial, sans-serif;
-        text-align: center;
-        display: none;
-    }
-    #pausedScreen h1 {
-        font-size: 48px;
-        margin-bottom: 20px;
-    }
-    #pausedScreen p {
-        font-size: 24px;
-        margin: 10px 0;
-    }
-</style>

+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <title>Space Invaders com Three.js</title>
+    <style>
+        body { margin: 0; overflow: hidden; }
+        canvas { display: block; }
+        #ui {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            font-family: Arial, sans-serif;
+            display: none;
+        }
+        #center-ui {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            font-family: Arial, sans-serif;
+            text-align: center;
+            display: none;
+        }
+        #deaths-ui {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: white;
+            font-family: Arial, sans-serif;
+            text-align: right;
+            display: none;
+        }
+        #gameOver {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-family: Arial, sans-serif;
+            text-align: center;
+            display: none;
+        }
+        #startScreen {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-family: Arial, sans-serif;
+            text-align: center;
+            display: block;
+        }
+        #startScreen h1 {
+            font-size: 48px;
+            margin-bottom: 20px;
+        }
+        #startScreen p {
+            font-size: 24px;
+            margin: 10px 0;
+        }
+        #startScreen button {
+            font-size: 24px;
+            padding: 10px 20px;
+            cursor: pointer;
+        }
+        #pausedScreen {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-family: Arial, sans-serif;
+            text-align: center;
+            display: none;
+        }
+        #pausedScreen h1 {
+            font-size: 48px;
+            margin-bottom: 20px;
+        }
+        #pausedScreen p {
+            font-size: 24px;
+            margin: 10px 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="ui">
+        <p>Score: <span id="score">0</span></p>
+        <p>Planet: <span id="level">1</span></p>
+    </div>
+    <div id="center-ui">
+        <p>Hi-Score: <span id="hiScore">0</span></p>
+        <p>Hi-Planet: <span id="hiPlanet">1</span></p>
+    </div>
+    <div id="deaths-ui">
+        <p>Mortes: <span id="deaths">0</span></p>
+        <p>Próximo Power-Up: <span id="nextPowerUp">Planet 2</span></p>
+    </div>
+    <div id="gameOver">
+        <h1>Game Over</h1>
+        <button onclick="retry()">Tentar Novamente</button>
+    </div>
+    <div id="pausedScreen">
+        <h1>PAUSED</h1>
+        <p>Pressione R para reiniciar</p>
+    </div>
+    <div id="startScreen">
+        <h1>Space Invaders</h1>
+        <p>Espaço para atirar</p>
+        <p>P para pausar</p>
+        <p>R para reiniciar</p>
+        <button onclick="startGame()">Iniciar</button>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+    <script>
+        // Configuração da cena
+        const scene = new THREE.Scene();
+        const camera = new THREE.OrthographicCamera(-8, 8, 8, -8, 0.1, 100);
+        camera.position.z = 10;
+        const renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        // Variáveis do jogo
+        let player, enemies = [], bullets = [], enemyBullets = [], shields = [], explosions = [];
+        let score = 0, hiScore = 0, level = 1, hiPlanet = 1, deaths = 0;
+        let unlockedPowerUps = [0]; // Começa com tiro simples
+        let isPaused = false, gameOver = false, isGameStarted = false;
+        let enemyDirection = 1, enemySpeed = 0.01;
+        let lastShotTime = 0, tapShotDelay = 200, holdShotDelay = 500;
+        let isSpacePressed = false;
+        const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00]; // Cores por fase
+        // Jogador
+        function createPlayer() {
+            const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
+            const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+            player = new THREE.Mesh(geometry, material);
+            player.position.set(0, -6, 0);
+            scene.add(player);
+        }
+        // Inimigos
+        function createEnemies() {
+            enemies = [];
+            const color = colors[(level - 1) % colors.length];
+            for (let x = -6; x <= 6; x += 1.5) {
+                for (let y = 4; y <= 7; y += 1.5) {
+                    const geometry = new THREE.BoxGeometry(0.3, 0.3, 0.3);
+                    const material = new THREE.MeshBasicMaterial({ color });
+                    const enemy = new THREE.Mesh(geometry, material);
+                    enemy.position.set(x, y, 0);
+                    enemies.push(enemy);
+                    scene.add(enemy);
+                }
+            }
+        }
+        // Proteções
+        function createShields() {
+            shields = [];
+            let positions;
+            if (deaths === 0) {
+                positions = [-6, -2, 2, 6]; // 4 barreiras
+            } else if (deaths === 1) {
+                positions = [-4, 0, 4]; // 3 barreiras
+            } else if (deaths === 2) {
+                positions = [-2, 2]; // 2 barreiras
+            } else if (deaths === 3) {
+                positions = [0]; // 1 barreira
+            } else {
+                positions = []; // 0 barreiras
+            }
+            positions.forEach(x => {
+                const geometry = new THREE.BoxGeometry(1, 0.5, 0.5);
+                const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+                const shield = new THREE.Mesh(geometry, material);
+                shield.position.set(x, -4, 0);
+                shield.health = 30;
+                shields.push(shield);
+                scene.add(shield);
+            });
+        }
+        // Atualizar visual da proteção
+        function updateShieldVisual(shield) {
+            if (shield.health <= 22) {
+                shield.scale.set(0.8, 0.8, 0.8);
+                shield.material.color.set(0xffff00); // Amarelo
+            } else if (shield.health <= 14) {
+                shield.scale.set(0.6, 0.6, 0.6);
+                shield.material.color.set(0xffa500); // Laranja
+            } else if (shield.health <= 7) {
+                shield.scale.set(0.4, 0.4, 0.4);
+                shield.material.color.set(0xff0000); // Vermelho
+            }
+        }
+        // Tiro do jogador
+        function shoot(isTap = false) {
+            const now = Date.now();
+            const delay = isTap ? tapShotDelay : holdShotDelay;
+            if (now - lastShotTime < delay) return;
+            lastShotTime = now;
+            unlockedPowerUps.forEach(powerUp => {
+                if (powerUp >= 5) {
+                    const offsets = powerUp === 5 ? [0] : powerUp === 6 ? [-0.3, 0.3] : [-0.5, 0, 0.5];
+                    offsets.forEach(offset => {
+                        const bulletLeft = createBullet(offset);
+                        bulletLeft.velocity = new THREE.Vector3(-0.075, 0.1, 0);
+                        bulletLeft.isDiagonal = true;
+                        bullets.push(bulletLeft);
+                        scene.add(bulletLeft);
+                        const bulletRight = createBullet(offset);
+                        bulletRight.velocity = new THREE.Vector3(0.075, 0.1, 0);
+                        bulletRight.isDiagonal = true;
+                        bullets.push(bulletRight);
+                        scene.add(bulletRight);
+                    });
+                } else if (powerUp >= 3) {
+                    const offsets = powerUp === 3 ? [0] : [-0.3, 0.3];
+                    offsets.forEach(offset => {
+                        const geometry = new THREE.SphereGeometry(0.3, 8, 8);
+                        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+                        const bomb = new THREE.Mesh(geometry, material);
+                        bomb.position.set(player.position.x + offset, player.position.y, 0);
+                        bomb.velocity = new THREE.Vector3(0, 0.1, 0);
+                        bomb.isBomb = true;
+                        bullets.push(bomb);
+                        scene.add(bomb);
+                    });
+                } else {
+                    const offsets = powerUp === 0 ? [0] : powerUp === 1 ? [-0.3, 0.3] : [-0.5, 0, 0.5];
+                    offsets.forEach(offset => {
+                        const bullet = createBullet(offset);
+                        bullet.velocity = new THREE.Vector3(0, 0.1, 0);
+                        bullet.isNormal = true;
+                        bullets.push(bullet);
+                        scene.add(bullet);
+                    });
+                }
+            });
+            function createBullet(offset) {
+                const geometry = new THREE.BoxGeometry(0.1, 0.3, 0.1);
+                const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+                const bullet = new THREE.Mesh(geometry, material);
+                bullet.position.set(player.position.x + offset, player.position.y, 0);
+                return bullet;
+            }
+        }
+        // Tiro dos inimigos
+        function enemyShoot(enemy) {
+            const geometry = new THREE.BoxGeometry(0.1, 0.3, 0.1);
+            const material = new THREE.MeshBasicMaterial({ color: 0x800080 });
+            const bullet = new THREE.Mesh(geometry, material);
+            bullet.position.set(enemy.position.x, enemy.position.y - 0.3, 0);
+            bullet.velocity = new THREE.Vector3(0, -0.05, 0);
+            enemyBullets.push(bullet);
+            scene.add(bullet);
+        }
+        // Explosão
+        function createExplosion(x, y) {
+            const geometry = new THREE.SphereGeometry(0.3, 8, 8);
+            const material = new THREE.MeshBasicMaterial({ color: 0xffa500 });
+            const explosion = new THREE.Mesh(geometry, material);
+            explosion.position.set(x, y, 0);
+            explosion.scale.set(0.1, 0.1, 0.1);
+            explosion.life = 0;
+            explosions.push(explosion);
+            scene.add(explosion);
+        }
+        // Atualizar UI
+        function updateUI() {
+            document.getElementById('score').textContent = score;
+            document.getElementById('hiScore').textContent = hiScore;
+            document.getElementById('level').textContent = level;
+            document.getElementById('hiPlanet').textContent = hiPlanet;
+            document.getElementById('deaths').textContent = deaths;
+            const nextPowerUpPhase = unlockedPowerUps.length + 1;
+            document.getElementById('nextPowerUp').textContent =
+                nextPowerUpPhase <= 8 ? `Planet ${nextPowerUpPhase}` : 'Todos Desbloqueados';
+        }
+        // Iniciar o jogo
+        function startGame() {
+            isGameStarted = true;
+            document.getElementById('startScreen').style.display = 'none';
+            document.getElementById('ui').style.display = 'block';
+            document.getElementById('center-ui').style.display = 'block';
+            document.getElementById('deaths-ui').style.display = 'block';
+            createPlayer();
+            createEnemies();
+            createShields();
+            updateUI();
+        }
+        // Próxima fase
+        function nextLevel() {
+            level++;
+            hiPlanet = Math.max(hiPlanet, level);
+            if (!unlockedPowerUps.includes(level - 1)) {
+                unlockedPowerUps.push(level - 1);
+            }
+            enemySpeed += 0.005;
+            enemyBullets.forEach(bullet => scene.remove(bullet));
+            enemyBullets = [];
+            createEnemies();
+            updateUI();
+        }
+        // Game Over
+        function endGame() {
+            deaths++;
+            gameOver = true;
+            updateUI();
+            document.getElementById('gameOver').style.display = 'block';
+        }
+        // Reinício completo (novo jogo, usado por tecla R)
+        function restartGame() {
+            // Resetar todas as variáveis para um novo jogo
+            score = 0;
+            hiScore = 0;
+            level = 1;
+            hiPlanet = 1;
+            deaths = 0;
+            unlockedPowerUps = [0]; // Reseta power-ups
+            enemySpeed = 0.01;
+            // Limpar cena
+            enemies.forEach(enemy => scene.remove(enemy));
+            bullets.forEach(bullet => scene.remove(bullet));
+            enemyBullets.forEach(bullet => scene.remove(bullet));
+            shields.forEach(shield => scene.remove(shield));
+            explosions.forEach(explosion => scene.remove(explosion));
+            if (player) scene.remove(player);
+            // Limpar arrays
+            enemies = [];
+            bullets = [];
+            enemyBullets = [];
+            shields = [];
+            explosions = [];
+            player = null;
+            // Resetar estados
+            gameOver = false;
+            isPaused = false;
+            document.getElementById('gameOver').style.display = 'none';
+            document.getElementById('pausedScreen').style.display = 'none';
+            // Recriar elementos
+            createPlayer();
+            createEnemies();
+            createShields(); // Cria 4 barreiras, pois deaths = 0
+            updateUI();
+        }
+        // Tentar novamente (mantém power-ups, usado por Game Over)
+        window.retry = function() {
+            // Resetar variáveis, mas manter power-ups
+            score = 0;
+            level = 1;
+            enemySpeed = 0.01;
+            // Limpar cena
+            enemies.forEach(enemy => scene.remove(enemy));
+            bullets.forEach(bullet => scene.remove(bullet));
+            enemyBullets.forEach(bullet => scene.remove(bullet));
+            shields.forEach(shield => scene.remove(shield));
+            explosions.forEach(explosion => scene.remove(explosion));
+            if (player) scene.remove(player);
+            // Limpar arrays
+            enemies = [];
+            bullets = [];
+            enemyBullets = [];
+            shields = [];
+            explosions = [];
+            player = null;
+            // Resetar estados
+            gameOver = false;
+            isPaused = false;
+            document.getElementById('gameOver').style.display = 'none';
+            document.getElementById('pausedScreen').style.display = 'none';
+            // Recriar elementos
+            createPlayer();
+            createEnemies();
+            createShields(); // Cria barreiras com base em deaths
+            updateUI();
+        };
+        // Controles
+        const keys = {};
+        document.addEventListener('keydown', e => {
+            if (e.code === 'KeyR') {
+                if (isGameStarted && !gameOver) {
+                    restartGame();
+                }
+                return;
+            }
+            if (!isGameStarted || gameOver) return;
+            keys[e.code] = true;
+            if (e.code === 'Space' && !isSpacePressed) {
+                isSpacePressed = true;
+                shoot(true);
+            } else if (e.code === 'KeyP') {
+                isPaused = !isPaused;
+                document.getElementById('pausedScreen').style.display = isPaused ? 'block' : 'none';
+            }
+        });
+        document.addEventListener('keyup', e => {
+            keys[e.code] = false;
+            if (e.code === 'Space') {
+                isSpacePressed = false;
+            }
+        });
+        // Animação
+        function animate() {
+            if (!isGameStarted || gameOver) {
+                renderer.render(scene, camera);
+                requestAnimationFrame(animate);
+                return;
+            }
+            if (isPaused) {
+                document.getElementById('pausedScreen').style.display = 'block';
+                renderer.render(scene, camera);
+                requestAnimationFrame(animate);
+                return;
+            }
+            document.getElementById('pausedScreen').style.display = 'none';
+            // Movimento do jogador
+            if (keys['ArrowLeft'] && player.position.x > -7.5) {
+                player.position.x -= 0.05;
+            }
+            if (keys['ArrowRight'] && player.position.x < 7.5) {
+                player.position.x += 0.05;
+            }
+            if (keys['Space'] && isSpacePressed) {
+                shoot(false);
+            }
+            // Movimento dos inimigos
+            let moveDown = false;
+            enemies.forEach(enemy => {
+                enemy.position.x += enemySpeed * enemyDirection;
+                if (enemy.position.x > 7.5 || enemy.position.x < -7.5) moveDown = true;
+                if (enemy.position.y < -5.5) endGame();
+                if (Math.random() < 0.005) {
+                    enemyShoot(enemy);
+                }
+            });
+            if (moveDown) {
+                enemyDirection *= -1;
+                enemies.forEach(enemy => enemy.position.y -= 0.5);
+            }
+            // Movimento dos tiros do jogador
+            bullets.forEach((bullet, bIndex) => {
+                bullet.position.add(bullet.velocity);
+                if (bullet.position.y > 8 || bullet.position.x < -8 || bullet.position.x > 8) {
+                    scene.remove(bullet);
+                    bullets.splice(bIndex, 1);
+                }
+            });
+            // Movimento dos tiros dos inimigos
+            enemyBullets.forEach((bullet, bIndex) => {
+                bullet.position.add(bullet.velocity);
+                if (bullet.position.y < -8) {
+                    scene.remove(bullet);
+                    enemyBullets.splice(bIndex, 1);
+                }
+            });
+            // Colisões jogador-inimigos
+            bullets.forEach((bullet, bIndex) => {
+                enemies.forEach((enemy, eIndex) => {
+                    if (bullet.position.distanceTo(enemy.position) < 0.3) {
+                        createExplosion(enemy.position.x, enemy.position.y);
+                        scene.remove(enemy);
+                        enemies.splice(eIndex, 1);
+                        if (!bullet.isBomb) {
+                            scene.remove(bullet);
+                            bullets.splice(bIndex, 1);
+                        }
+                        score += 10;
+                        hiScore = Math.max(hiScore, score);
+                        updateUI();
+                    }
+                });
+            });
+            // Colisões inimigos-jogador
+            enemyBullets.forEach((bullet, bIndex) => {
+                shields.forEach((shield, sIndex) => {
+                    if (bullet.position.distanceTo(shield.position) < 0.5) {
+                        shield.health--;
+                        if (shield.health <= 0) {
+                            scene.remove(shield);
+                            shields.splice(sIndex, 1);
+                        } else {
+                            updateShieldVisual(shield);
+                        }
+                        scene.remove(bullet);
+                        enemyBullets.splice(bIndex, 1);
+                        return;
+                    }
+                });
+                if (bullet.position.distanceTo(player.position) < 0.3) {
+                    scene.remove(bullet);
+                    enemyBullets.splice(bIndex, 1);
+                    endGame();
+                }
+            });
+            // Explosões
+            explosions.forEach((explosion, index) => {
+                explosion.scale.multiplyScalar(1.1);
+                explosion.life += 0.1;
+                if (explosion.life > 0.5) {
+                    scene.remove(explosion);
+                    explosions.splice(index, 1);
+                }
+            });
+            // Verificar próxima fase
+            if (enemies.length === 0) nextLevel();
+            renderer.render(scene, camera);
+            requestAnimationFrame(animate);
+        }
+        // Inicialização
+        animate();
+    </script>
+</body>
+</html>