<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caça ao Tesouro Espacial</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
#gameContainer {
position: relative;
width: 100%;
max-width: 800px;
background: #000;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
overflow: hidden;
}
#gameCanvas {
display: block;
width: 100%;
background: radial-gradient(ellipse at center, #0d1b2a 0%, #000000 100%);
}
#ui {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
display: flex;
justify-content: space-between;
color: #fff;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
z-index: 10;
font-size: 18px;
}
#gameOver {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
padding: 40px;
border-radius: 15px;
text-align: center;
display: none;
border: 2px solid #00ffff;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}
#gameOver h2 {
color: #00ffff;
font-size: 36px;
margin-bottom: 20px;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}
#gameOver p {
color: #fff;
font-size: 20px;
margin: 10px 0;
}
#restartBtn {
margin-top: 20px;
padding: 15px 40px;
font-size: 18px;
background: linear-gradient(135deg, #00ffff, #0080ff);
color: #000;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);
}
#restartBtn:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 255, 255, 0.6);
}
#instructions {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #00ffff;
text-align: center;
font-size: 14px;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="ui">
<div>⭐ Cristais: <span id="score">0</span></div>
<div>❤️ Vidas: <span id="lives">3</span></div>
</div>
<div id="gameOver">
<h2>Fim de Jogo!</h2>
<p>Cristais Coletados: <span id="finalScore">0</span></p>
<button id="restartBtn">Jogar Novamente</button>
</div>
<div id="instructions">
⬅️ ➡️ Use as setas para mover | Colete cristais 💎 | Evite asteroides ☄️
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let game = {
score: 0,
lives: 3,
isRunning: true,
player: {
x: 375,
y: 500,
width: 50,
height: 50,
speed: 7,
color: '#00ffff'
},
keys: {},
asteroids: [],
crystals: [],
stars: [],
particles: []
};
// Criar estrelas de fundo
for (let i = 0; i < 100; i++) {
game.stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2,
speed: Math.random() * 2 + 1
});
}
// Controles
document.addEventListener('keydown', (e) => {
game.keys[e.key] = true;
});
document.addEventListener('keyup', (e) => {
game.keys[e.key] = false;
});
document.getElementById('restartBtn').addEventListener('click', restartGame);
function restartGame() {
game.score = 0;
game.lives = 3;
game.isRunning = true;
game.asteroids = [];
game.crystals = [];
game.particles = [];
game.player.x = 375;
document.getElementById('gameOver').style.display = 'none';
updateUI();
gameLoop();
}
function drawPlayer() {
ctx.save();
ctx.translate(game.player.x + game.player.width / 2, game.player.y + game.player.height / 2);
// Nave espacial
ctx.fillStyle = game.player.color;
ctx.shadowBlur = 20;
ctx.shadowColor = game.player.color;
ctx.beginPath();
ctx.moveTo(0, -25);
ctx.lineTo(-20, 25);
ctx.lineTo(0, 15);
ctx.lineTo(20, 25);
ctx.closePath();
ctx.fill();
// Propulsor
ctx.fillStyle = '#ff6600';
ctx.beginPath();
ctx.moveTo(-10, 20);
ctx.lineTo(0, 30 + Math.random() * 10);
ctx.lineTo(10, 20);
ctx.closePath();
ctx.fill();
ctx.restore();
}
function drawStars() {
game.stars.forEach(star => {
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
ctx.fill();
star.y += star.speed;
if (star.y > canvas.height) {
star.y = 0;
star.x = Math.random() * canvas.width;
}
});
}
function spawnAsteroid() {
if (Math.random() < 0.02) {
game.asteroids.push({
x: Math.random() * (canvas.width - 40),
y: -40,
width: 40,
height: 40,
speed: Math.random() * 3 + 2,
rotation: Math.random() * Math.PI * 2
});
}
}
function spawnCrystal() {
if (Math.random() < 0.015) {
game.crystals.push({
x: Math.random() * (canvas.width - 30),
y: -30,
width: 30,
height: 30,
speed: 3,
pulse: 0
});
}
}
function drawAsteroids() {
game.asteroids.forEach((asteroid, index) => {
ctx.save();
ctx.translate(asteroid.x + asteroid.width / 2, asteroid.y + asteroid.height / 2);
ctx.rotate(asteroid.rotation);
ctx.fillStyle = '#8B4513';
ctx.shadowBlur = 10;
ctx.shadowColor = '#ff4500';
ctx.beginPath();
for (let i = 0; i < 8; i++) {
const angle = (Math.PI * 2 * i) / 8;
const radius = asteroid.width / 2 + Math.random() * 5;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.restore();
asteroid.y += asteroid.speed;
asteroid.rotation += 0.05;
if (asteroid.y > canvas.height) {
game.asteroids.splice(index, 1);
}
});
}
function drawCrystals() {
game.crystals.forEach((crystal, index) => {
ctx.save();
ctx.translate(crystal.x + crystal.width / 2, crystal.y + crystal.height / 2);
crystal.pulse += 0.1;
const scale = 1 + Math.sin(crystal.pulse) * 0.2;
ctx.scale(scale, scale);
ctx.fillStyle = '#ffff00';
ctx.shadowBlur = 20;
ctx.shadowColor = '#ffff00';
ctx.beginPath();
ctx.moveTo(0, -15);
ctx.lineTo(10, 0);
ctx.lineTo(0, 15);
ctx.lineTo(-10, 0);
ctx.closePath();
ctx.fill();
ctx.restore();
crystal.y += crystal.speed;
if (crystal.y > canvas.height) {
game.crystals.splice(index, 1);
}
});
}
function createParticles(x, y, color) {
for (let i = 0; i < 15; i++) {
game.particles.push({
x: x,
y: y,
vx: (Math.random() - 0.5) * 8,
vy: (Math.random() - 0.5) * 8,
life: 30,
color: color
});
}
}
function drawParticles() {
game.particles.forEach((particle, index) => {
ctx.fillStyle = particle.color;
ctx.globalAlpha = particle.life / 30;
ctx.beginPath();
ctx.arc(particle.x, particle.y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.globalAlpha = 1;
particle.x += particle.vx;
particle.y += particle.vy;
particle.life--;
if (particle.life <= 0) {
game.particles.splice(index, 1);
}
});
}
function checkCollisions() {
// Colisão com asteroides
game.asteroids.forEach((asteroid, index) => {
if (game.player.x < asteroid.x + asteroid.width &&
game.player.x + game.player.width > asteroid.x &&
game.player.y < asteroid.y + asteroid.height &&
game.player.y + game.player.height > asteroid.y) {
createParticles(asteroid.x + asteroid.width / 2, asteroid.y + asteroid.height / 2, '#ff4500');
game.asteroids.splice(index, 1);
game.lives--;
updateUI();
if (game.lives <= 0) {
endGame();
}
}
});
// Colisão com cristais
game.crystals.forEach((crystal, index) => {
if (game.player.x < crystal.x + crystal.width &&
game.player.x + game.player.width > crystal.x &&
game.player.y < crystal.y + crystal.height &&
game.player.y + game.player.height > crystal.y) {
createParticles(crystal.x + crystal.width / 2, crystal.y + crystal.height / 2, '#ffff00');
game.crystals.splice(index, 1);
game.score += 10;
updateUI();
}
});
}
function updateUI() {
document.getElementById('score').textContent = game.score;
document.getElementById('lives').textContent = game.lives;
}
function endGame() {
game.isRunning = false;
document.getElementById('finalScore').textContent = game.score;
document.getElementById('gameOver').style.display = 'block';
}
function update() {
if (!game.isRunning) return;
// Movimento do jogador
if (game.keys['ArrowLeft'] && game.player.x > 0) {
game.player.x -= game.player.speed;
}
if (game.keys['ArrowRight'] && game.player.x < canvas.width - game.player.width) {
game.player.x += game.player.speed;
}
spawnAsteroid();
spawnCrystal();
checkCollisions();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawStars();
drawCrystals();
drawAsteroids();
drawPlayer();
drawParticles();
}
function gameLoop() {
if (!game.isRunning) return;
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
