APK FET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Urban Havoc 3D: Daybreak</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { margin: 0; overflow: hidden; background: #e0f2fe; font-family: 'Segoe UI', sans-serif; touch-action: none; }
canvas { display: block; }
#ui-layer { pointer-events: none; }
.touch-btn { pointer-events: auto; user-select: none; -webkit-tap-highlight-color: transparent; }
#joystick-container { width: 140px; height: 140px; background: rgba(255,255,255,0.4); border-radius: 50%; border: 2px solid rgba(0,0,0,0.1); position: relative; backdrop-filter: blur(8px); }
#joystick-knob { width: 50px; height: 50px; background: white; border-radius: 50%; position: absolute; left: 45px; top: 45px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1); }
#game-over { display: none; background: rgba(255,255,255,0.95); backdrop-filter: blur(15px); }
.stat-card { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,0.05); color: #1e293b; }
</style>
</head>
<body>
<div id="flash-overlay" class="fixed inset-0 pointer-events-none z-50 transition-opacity duration-100 opacity-0 bg-red-500/30"></div>
<div id="ui-layer" class="absolute inset-0 flex flex-col justify-between p-4 z-10">
<div class="flex justify-between items-start pt-2">
<div class="stat-card p-3 rounded-xl shadow-lg">
<div class="text-[10px] uppercase tracking-[0.2em] text-blue-600 mb-1 font-black">Shield Integrity</div>
<div class="w-40 h-2.5 bg-slate-200 rounded-full overflow-hidden border border-black/5">
<div id="health-bar" class="h-full bg-gradient-to-r from-red-500 to-blue-500 transition-all duration-300" style="width: 100%"></div>
</div>
<div id="weapon-lvl" class="text-[9px] font-bold mt-1.5 text-slate-500 uppercase tracking-tighter">Patrol Mode Active</div>
</div>
<div class="stat-card p-3 rounded-xl shadow-lg text-right">
<div class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">Score</div>
<div id="score-val" class="text-3xl font-black font-mono tracking-tighter text-slate-800">00000</div>
</div>
</div>
<div class="flex justify-between items-end mb-8 px-2">
<div class="touch-btn" id="joystick-zone">
<div id="joystick-container">
<div id="joystick-knob"></div>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="flex gap-4">
<div id="btn-brake" class="touch-btn w-16 h-16 rounded-full bg-slate-100 border-2 border-slate-300 flex items-center justify-center text-[10px] font-black text-slate-600 active:bg-slate-200 shadow-lg">BRAKE</div>
<div id="btn-gas" class="touch-btn w-20 h-20 rounded-full bg-blue-600 flex items-center justify-center text-lg font-black italic text-white active:scale-95 shadow-xl">GO</div>
</div>
<div id="btn-fire" class="touch-btn w-full h-16 rounded-2xl bg-slate-800 border-2 border-white/20 flex items-center justify-center text-xl font-black italic text-white active:bg-black shadow-lg uppercase tracking-tighter">Fire</div>
</div>
</div>
</div>
<div id="game-over" class="fixed inset-0 z-[100] flex flex-col items-center justify-center p-10 text-center">
<h1 class="text-7xl font-black italic mb-2 text-slate-900">CRASHED</h1>
<p class="text-xl mb-10 text-slate-500 max-w-md">Vehicle integrity compromised. Recovery team dispatched.</p>
<button onclick="location.reload()" class="bg-blue-600 text-white px-16 py-5 rounded-full font-black hover:bg-blue-700 transition-colors uppercase tracking-widest shadow-2xl">Restart</button>
</div>
<script>
let scene, camera, renderer, clock;
let player, roadSegments = [];
let enemies = [], bullets = [], enemyBullets = [];
let score = 0, health = 100;
let isGameOver = false;
const input = { forward: 0, brake: 0, turn: 0, fire: false };
let velocity = 0;
let lastZ = 0;
// Geometries
const geoms = {
trunk: new THREE.CylinderGeometry(0.3, 0.5, 3, 6),
leaves: new THREE.IcosahedronGeometry(1.8, 1),
window: new THREE.PlaneGeometry(0.4, 0.6)
};
const mats = {
trunk: new THREE.MeshLambertMaterial({ color: 0x5d4037 }),
leaves: new THREE.MeshLambertMaterial({ color: 0x2e7d32 }),
window: new THREE.MeshBasicMaterial({ color: 0x87ceeb, transparent: true, opacity: 0.6 })
};
window.onload = init;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xb3e5fc);
scene.fog = new THREE.Fog(0xb3e5fc, 100, 500);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
clock = new THREE.Clock();
// Lighting for Day
const ambient = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambient);
const sun = new THREE.DirectionalLight(0xffffff, 1.2);
sun.position.set(50, 100, 50);
sun.castShadow = true;
sun.shadow.camera.left = -50;
sun.shadow.camera.right = 50;
sun.shadow.camera.top = 50;
sun.shadow.camera.bottom = -50;
scene.add(sun);
createPlayer();
setupControls();
for(let i=0; i<8; i++) spawnRoadChunk(i * -100);
animate();
}
function createTree(x, z) {
const tree = new THREE.Group();
const trunk = new THREE.Mesh(geoms.trunk, mats.trunk);
trunk.position.y = 1.5;
tree.add(trunk);
const canopy = new THREE.Mesh(geoms.leaves, mats.leaves);
canopy.position.y = 3.5;
tree.add(canopy);
const canopy2 = canopy.clone();
canopy2.scale.set(0.7, 0.7, 0.7);
canopy2.position.y = 5.2;
tree.add(canopy2);
tree.position.set(x, 0, z);
return tree;
}
function createBuilding(x, z, side) {
const building = new THREE.Group();
const w = 12 + Math.random() * 4;
const h = 20 + Math.random() * 60;
const d = 12 + Math.random() * 4;
const colors = [0xf5f5f5, 0xe0e0e0, 0xeeeeee];
const box = new THREE.Mesh(
new THREE.BoxGeometry(w, h, d),
new THREE.MeshLambertMaterial({ color: colors[Math.floor(Math.random()*colors.length)] })
);
box.position.y = h/2;
building.add(box);
const winCount = Math.floor(h / 4);
for(let i=1; i<winCount; i++) {
if (Math.random() > 0.3) {
const win = new THREE.Mesh(geoms.window, mats.window);
win.position.set(side === 1 ? -w/2 - 0.05 : w/2 + 0.05, i * 3, (Math.random()-0.5) * d * 0.8);
win.rotation.y = side === 1 ? -Math.PI/2 : Math.PI/2;
building.add(win);
}
}
building.position.set(x, 0, z);
return building;
}
function createPlayer() {
player = new THREE.Group();
const body = new THREE.Mesh(
new THREE.BoxGeometry(2.4, 0.8, 5),
new THREE.MeshPhongMaterial({ color: 0x2563eb })
);
body.castShadow = true;
player.add(body);
const cabin = new THREE.Mesh(new THREE.BoxGeometry(1.6, 0.7, 2.5), new THREE.MeshPhongMaterial({ color: 0x111111 }));
cabin.position.set(0, 0.6, 0.5);
player.add(cabin);
player.position.y = 0.8;
scene.add(player);
}
function spawnRoadChunk(zPos) {
const chunk = new THREE.Group();
const road = new THREE.Mesh(new THREE.PlaneGeometry(40, 100), new THREE.MeshLambertMaterial({ color: 0x475569 }));
road.rotation.x = -Math.PI / 2;
road.receiveShadow = true;
chunk.add(road);
const swMat = new THREE.MeshLambertMaterial({ color: 0x94a3b8 });
const swL = new THREE.Mesh(new THREE.BoxGeometry(10, 0.4, 100), swMat);
swL.position.set(-25, 0.2, 0);
chunk.add(swL);
const swR = swL.clone();
swR.position.x = 25;
chunk.add(swR);
const line = new THREE.Mesh(new THREE.PlaneGeometry(0.5, 40), new THREE.MeshBasicMaterial({ color: 0xffffff }));
line.rotation.x = -Math.PI / 2;
for(let i=0; i<3; i++) {
const l = line.clone();
l.position.set(0, 0.06, -50 + i * 40);
chunk.add(l);
}
chunk.position.z = zPos;
scene.add(chunk);
roadSegments.push(chunk);
for(let i=0; i<5; i++) {
const side = Math.random() > 0.5 ? 1 : -1;
const bZ = zPos + (Math.random() * 80 - 40);
scene.add(createBuilding(side * 45, bZ, side));
const tZ = zPos + (Math.random() * 80 - 40);
scene.add(createTree(side * 22, tZ));
}
}
function spawnEnemy() {
if (enemies.length < 8) {
const e = new THREE.Group();
const body = new THREE.Mesh(new THREE.BoxGeometry(2.6, 1.2, 5), new THREE.MeshPhongMaterial({ color: 0xb91c1c }));
e.add(body);
e.position.set((Math.random() - 0.5) * 30, 0.8, player.position.z - 450);
e.speed = 0.5 + Math.random() * 1.5;
e.lastShot = 0;
e.hp = 3;
enemies.push(e);
scene.add(e);
}
}
function setupControls() {
window.addEventListener('keydown', (e) => {
if (['KeyW', 'ArrowUp'].includes(e.code)) input.forward = 1;
if (['KeyS', 'ArrowDown'].includes(e.code)) input.brake = 1;
if (['KeyA', 'ArrowLeft'].includes(e.code)) input.turn = -1;
if (['KeyD', 'ArrowRight'].includes(e.code)) input.turn = 1;
if (e.code === 'Space') input.fire = true;
});
window.addEventListener('keyup', (e) => {
if (['KeyW', 'ArrowUp'].includes(e.code)) input.forward = 0;
if (['KeyS', 'ArrowDown'].includes(e.code)) input.brake = 0;
if (['KeyA', 'ArrowLeft', 'KeyD', 'ArrowRight'].includes(e.code)) input.turn = 0;
if (e.code === 'Space') input.fire = false;
});
const knob = document.getElementById('joystick-knob');
const container = document.getElementById('joystick-container');
container.addEventListener('touchmove', (e) => {
e.preventDefault();
const rect = container.getBoundingClientRect();
const touch = e.touches[0];
const dx = Math.max(-50, Math.min(50, touch.clientX - (rect.left + rect.width/2)));
knob.style.transform = `translateX(${dx}px)`;
input.turn = dx / 50;
});
container.addEventListener('touchend', () => {
knob.style.transform = `translateX(0px)`;
input.turn = 0;
});
document.getElementById('btn-gas').ontouchstart = (e) => { e.preventDefault(); input.forward = 1; };
document.getElementById('btn-gas').ontouchend = () => input.forward = 0;
document.getElementById('btn-brake').ontouchstart = (e) => { e.preventDefault(); input.brake = 1; };
document.getElementById('btn-brake').ontouchend = () => input.brake = 0;
document.getElementById('btn-fire').ontouchstart = (e) => { e.preventDefault(); input.fire = true; };
document.getElementById('btn-fire').ontouchend = () => input.fire = false;
}
function playerFire() {
const b = new THREE.Mesh(new THREE.SphereGeometry(0.3), new THREE.MeshBasicMaterial({color: 0x2563eb}));
b.position.copy(player.position).add(new THREE.Vector3(0, 0, -3).applyQuaternion(player.quaternion));
b.velocity = new THREE.Vector3(0,0,-8).applyQuaternion(player.quaternion);
bullets.push(b);
scene.add(b);
}
function enemyFire(enemy) {
const b = new THREE.Mesh(new THREE.SphereGeometry(0.6), new THREE.MeshBasicMaterial({color: 0xef4444}));
b.position.copy(enemy.position).add(new THREE.Vector3(0, 0, 3));
const dir = new THREE.Vector3().subVectors(player.position, enemy.position).normalize();
b.velocity = dir.multiplyScalar(3.5);
enemyBullets.push(b);
scene.add(b);
}
function takeDamage(amt) {
health -= amt;
document.getElementById('health-bar').style.width = Math.max(0, health) + '%';
document.getElementById('flash-overlay').style.opacity = '1';
setTimeout(() => document.getElementById('flash-overlay').style.opacity = '0', 50);
if (health <= 0 && !isGameOver) {
isGameOver = true;
document.getElementById('game-over').style.display = 'flex';
}
}
function animate() {
if (isGameOver) return;
requestAnimationFrame(animate);
const dt = clock.getDelta();
const time = clock.getElapsedTime();
if (player.position.z < lastZ - 50) {
lastZ -= 100;
spawnRoadChunk(lastZ - 700);
}
if (input.forward) velocity += 0.08;
if (input.brake) velocity -= 0.15;
velocity *= 0.98;
velocity = Math.max(-0.1, Math.min(velocity, 2.0));
player.rotation.y -= input.turn * 0.05 * (velocity + 0.2);
player.translateZ(-velocity);
player.position.x = Math.max(-18, Math.min(18, player.position.x));
camera.position.lerp(player.position.clone().add(new THREE.Vector3(0, 6, 15).applyQuaternion(player.quaternion)), 0.1);
camera.lookAt(player.position.clone().add(new THREE.Vector3(0, 0, -20).applyQuaternion(player.quaternion)));
if (Math.random() < 0.02) spawnEnemy();
if (input.fire && time % 0.12 < 0.02) playerFire();
bullets.forEach((b, i) => {
b.position.add(b.velocity);
if (b.position.distanceTo(player.position) > 500) {
scene.remove(b);
bullets.splice(i, 1);
}
});
enemyBullets.forEach((eb, i) => {
eb.position.add(eb.velocity);
if (eb.position.distanceTo(player.position) < 3.5) {
takeDamage(15);
scene.remove(eb);
enemyBullets.splice(i, 1);
}
});
enemies.forEach((e, i) => {
e.position.z += e.speed;
if (e.position.distanceTo(player.position) < 150 && time - e.lastShot > 2.0) {
enemyFire(e);
e.lastShot = time;
}
bullets.forEach((b, bi) => {
if (b.position.distanceTo(e.position) < 4) {
e.hp--;
scene.remove(b);
bullets.splice(bi, 1);
if (e.hp <= 0) {
score += 500;
document.getElementById('score-val').innerText = score.toString().padStart(5, '0');
scene.remove(e);
enemies.splice(i, 1);
}
}
});
if (e.position.z > player.position.z + 100) {
scene.remove(e);
enemies.splice(i, 1);
}
});
renderer.render(scene, camera);
}
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
Urban Havoc 3D: Daybreak
Urban Havoc 3D: Daybreak is a high-octane, endless vehicular combat simulator. In this "Daybreak" edition, the gritty, neon-soaked underworld has been traded for a high-contrast, sun-bleached metropolitan nightmare. You pilot a heavy-duty tactical interceptor through an infinite city, where the objective is simple: survive the patrol, neutralize hostile units, and maintain your shield integrity.
The Setting: The "Sun-Bleached" Metropolis
Unlike typical dark-themed combat games, Daybreak takes place at high noon. The world is rendered in crisp architectural whites, sky blues, and saturated greens. The lighting is harsh and direct, creating long, sharp shadows that emphasize the height of the skyscrapers and the speed of your vehicle. The atmospheric haze (light fog) gives the city a sense of immense scale, making the world feel both beautiful and dangerously open.
Gameplay Mechanics
Tactical Driving: Master the physics of a heavy interceptor. Use the acceleration and braking system to weave through traffic and architectural obstacles. The vehicle handles with momentum, requiring players to anticipate turns and drift around hostile fire.
360° Combat: Hostile red interceptors spawn ahead and behind. They aren't just targets; they are intelligent hunters that will fire tracking projectiles. You must balance offensive fire with defensive maneuvering.
Procedural Generation: The city never ends. The road, skyscrapers, and foliage are generated in real-time as you drive, ensuring that no two "patrols" feel identical.
Integrity Management: Your vehicle is equipped with a high-tech shield (the Blue-to-Red health bar). Every collision or enemy hit compromises your integrity. Once the shields fail, the mission is over.
Controls
Desktop: Use WASD or Arrow Keys to drive and Spacebar to unleash the forward-mounted plasma cannons.
Mobile/Touch: A precision "Glassmorphism" joystick on the left controls steering, while dedicated "GO," "BRAKE," and "FIRE" buttons on the right provide a console-like experience on handheld devices.
Technical Highlights
Powered by Three.js: Utilizes a custom WebGL engine for smooth 3D performance and real-time lighting/shadows.
Responsive UI: A sleek, semi-transparent interface (Glassmorphism) ensures that HUD elements remain readable against the bright, sunny background without obscuring the action.
Optimized Performance: Uses geometry instancing and fog-based culling to maintain high frame rates even as the procedural city expands.