Continuar lendo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Crash Drive</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(#87CEEB, #e0e0e0);
font-family: Arial, sans-serif;
text-align: center;
}
canvas {
background: #444;
display: block;
margin: auto;
}
#hud {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div id="hud">
Velocidade: <span id="speed">0</span> km/h<br>
Dano: <span id="damage">0</span>%
</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let gravity = 0.5;
let friction = 0.98;
let car = {
x: 200,
y: canvas.height - 150,
width: 60,
height: 30,
vx: 0,
vy: 0,
speed: 0,
damage: 0
};
let ground = canvas.height - 100;
let keys = {};
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);
function update() {
// Controle
if (keys["ArrowRight"]) car.vx += 0.5;
if (keys["ArrowLeft"]) car.vx -= 0.5;
if (keys["ArrowUp"] && car.y + car.height >= ground) {
car.vy = -12; // pulo
}
// Física
car.vy += gravity;
car.x += car.vx;
car.y += car.vy;
car.vx *= friction;
// Chão
if (car.y + car.height > ground) {
car.y = ground - car.height;
car.vy = 0;
}
// Colisão com obstáculo
if (car.x > 600 && car.x < 650 && car.y + car.height > ground - 40) {
car.vx *= -0.3;
car.damage += 5;
}
car.speed = Math.abs(car.vx * 5);
document.getElementById("speed").innerText = car.speed.toFixed(0);
document.getElementById("damage").innerText = car.damage.toFixed(0);
if (car.damage > 100) {
alert("Carro destruído!");
car.damage = 0;
car.x = 200;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// chão
ctx.fillStyle = "#2E8B57";
ctx.fillRect(0, ground, canvas.width, 200);
// obstáculo
ctx.fillStyle = "brown";
ctx.fillRect(600, ground - 40, 50, 40);
// carro
ctx.fillStyle = "red";
ctx.fillRect(car.x, car.y, car.width, car.height);
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
