Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mini GTA Style Game</title>
<style>
body { margin: 0; overflow: hidden; background: #222; }
canvas { display: block; margin: auto; background: #555; }
</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
canvas.width = 900;
canvas.height = 600;
let keys = {};
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);
let player = { x: 100, y: 100, size: 20, speed: 3, inCar: false };
let car = { x: 400, y: 300, size: 30 };
let police = { x: 700, y: 500, size: 25, speed: 2 };
let money = 0;
let wanted = 0;
function drawRect(obj, color) {
ctx.fillStyle = color;
ctx.fillRect(obj.x, obj.y, obj.size, obj.size);
}
function movePlayer() {
let speed = player.inCar ? 6 : player.speed;
if (keys["ArrowUp"]) player.y -= speed;
if (keys["ArrowDown"]) player.y += speed;
if (keys["ArrowLeft"]) player.x -= speed;
if (keys["ArrowRight"]) player.x += speed;
}
function policeAI() {
if (wanted > 0) {
if (police.x < player.x) police.x += police.speed;
if (police.x > player.x) police.x -= police.speed;
if (police.y < player.y) police.y += police.speed;
if (police.y > player.y) police.y -= police.speed;
}
}
function checkCollision(a, b) {
return (
a.x < b.x + b.size &&
a.x + a.size > b.x &&
a.y < b.y + b.size &&
a.y + a.size > b.y
);
}
function update() {
movePlayer();
policeAI();
// Entrar al coche
if (keys[" "] && checkCollision(player, car)) {
player.inCar = true;
}
// Robar dinero
if (keys["g"]) {
money += 10;
wanted = 1;
}
// Policía te atrapa
if (checkCollision(player, police) && wanted > 0) {
alert("¡La policía te atrapó! Dinero final: $" + money);
location.reload();
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRect(car, "blue");
drawRect(player, player.inCar ? "yellow" : "lime");
drawRect(police, "red");
ctx.fillStyle = "white";
ctx.fillText("Dinero: $" + money, 20, 20);
ctx.fillText("Nivel de búsqueda: " + wanted, 20, 40);
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>1
1
3KB
3KB
98.0ms
108.0ms
98.0ms