Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>GTA Defender Fixed</title>
<style>
body { margin: 0; background: #87CEEB; overflow: hidden; font-family: sans-serif; touch-action: none; }
#hud { position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.6); padding: 10px; border-radius: 5px; z-index: 10; pointer-events: none; }
#controls { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: space-around; z-index: 20; }
.btn { width: 65px; height: 65px; background: rgba(0,0,0,0.8); border: 2px solid white; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; }
.fire { background: #ff0000; box-shadow: 0 0 15px red; width: 80px; border-radius: 10px; }
.exit { background: #ffcc00; color: black; width: 80px; border-radius: 10px; }
canvas { display: block; width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="hud">
<b>GTA DEFENDER</b><br>
SPEED: <span id="sp">0</span> KM/H<br>
FUEL: <span id="fl">100</span>%
</div>
<div id="controls">
<div style="display:flex; gap:10px">
<div class="btn" id="l">L</div>
<div class="btn" id="r">R</div>
</div>
<div style="display:flex; flex-direction:column; gap:10px">
<div class="btn fire" id="f">FIRE π₯</div>
<div class="btn exit" id="e">EXIT πΆ</div>
</div>
<div style="display:flex; gap:10px">
<div class="btn" id="b" style="background:rgba(255,0,0,0.5)">BRK</div>
<div class="btn" id="g" style="background:rgba(0,255,0,0.5)">GAS</div>
</div>
</div>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let w, h, speed = 0, carX = 0, roadZ = 0, inCar = true, fuel = 100;
let traffic = [], explosions = [];
function init() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
carX = w / 2;
// Seed initial traffic
for(let i=0; i<6; i++) spawnTraffic(true);
}
function spawnTraffic(randomZ = false) {
traffic.push({
lane: Math.floor(Math.random() * 6) - 2.5, // 6 lanes
z: randomZ ? Math.random() * 2000 + 500 : roadZ + 2500,
color: ['#ff0000', '#ffffff', '#ffff00', '#0000ff'][Math.floor(Math.random()*4)]
});
}
let input = { l:0, r:0, g:0, b:0 };
const bind = (id, k) => {
const el = document.getElementById(id);
el.ontouchstart = (e) => {
e.preventDefault();
if(id === 'e' && speed < 5) inCar = !inCar;
else { input[k] = 1; if(id === 'f') shoot(); }
};
el.ontouchend = (e) => { e.preventDefault(); input[k] = 0; };
};
bind('l','l'); bind('r','r'); bind('g','g'); bind('b','b'); bind('f','f'); bind('e','e');
function shoot() {
traffic.forEach((t, i) => {
let relZ = t.z - roadZ;
if(relZ > 0 && relZ < 1500) {
explosions.push({x: w/2 + (t.lane * 150 * (400/relZ)), y: h*0.4 + (400*(400/relZ)), r: 10});
traffic.splice(i, 1);
spawnTraffic();
}
});
}
function draw() {
// Sky & Ground
ctx.fillStyle = "#87CEEB"; ctx.fillRect(0, 0, w, h);
ctx.fillStyle = "#3e8e41"; ctx.fillRect(0, h * 0.4, w, h * 0.6);
let horizon = h * 0.4;
// Draw Road (Grey Asphalt)
ctx.fillStyle = "#333";
ctx.beginPath();
ctx.moveTo(w * 0.4, horizon);
ctx.lineTo(w * 0.6, horizon);
ctx.lineTo(w * 2, h);
ctx.lineTo(w * -1, h);
ctx.fill();
// Lane Lines
ctx.strokeStyle = "white";
ctx.setLineDash([20, 40]);
ctx.lineDashOffset = -roadZ;
for(let i = -3; i <= 3; i++) {
ctx.beginPath();
ctx.moveTo(w/2 + (i * 20), horizon);
ctx.lineTo(w/2 + (i * 600), h);
ctx.stroke();
}
// Logic
if(inCar && fuel > 0) {
if(input.g) { speed += 0.4; fuel -= 0.02; }
if(input.b) speed -= 0.8;
if(input.l) carX -= speed * 0.15;
if(input.r) carX += speed * 0.15;
} else if(!inCar) {
if(input.g) roadZ += 5;
if(input.b) roadZ -= 5;
if(input.l) carX -= 5;
if(input.r) carX += 5;
}
speed *= 0.98; if(speed < 0) speed = 0;
roadZ += inCar ? speed : 0;
// Traffic Drawing
traffic.forEach((t, i) => {
let relZ = t.z - roadZ;
if(relZ < -200) { traffic.splice(i, 1); spawnTraffic(); return; }
let scale = 400 / relZ;
if(scale > 0 && scale < 20) {
let tx = w/2 + (t.lane * 180 * scale);
let ty = horizon + (400 * scale);
ctx.fillStyle = t.color;
ctx.fillRect(tx - 30*scale, ty - 40*scale, 60*scale, 40*scale);
}
});
// Player Defender
if(inCar) {
ctx.fillStyle = "#4b5320"; // Army Green
ctx.fillRect(carX - 50, h - 140, 100, 70);
ctx.fillStyle = "black"; ctx.fillRect(carX - 5, h - 170, 10, 40); // Gun
} else {
ctx.fillStyle = "#ffdbac"; ctx.fillRect(carX - 10, h - 150, 20, 40); // Character
}
document.getElementById('sp').innerText = Math.floor(speed * 6);
document.getElementById('fl').innerText = Math.floor(fuel);
requestAnimationFrame(draw);
}
init(); draw();
</script>
</body>
</html>1
1
6KB
6KB
122.0ms
192.0ms
122.0ms