Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Zombie City Mobile FIX</title>
<style>
body {
margin:0;
overflow:hidden;
background:black;
touch-action:none;
}
canvas {
display:block;
}
#ui {
position:fixed;
bottom:10px;
width:100%;
text-align:center;
}
.btn {
width:60px;
height:60px;
margin:4px;
font-size:14px;
border-radius:10px;
border:none;
background:rgba(255,255,255,0.8);
}
#hud {
position:fixed;
top:10px;
left:10px;
color:white;
font-family:Arial;
font-size:14px;
}
#map {
position:fixed;
top:10px;
right:10px;
width:120px;
height:120px;
background:#111;
border:2px solid white;
display:none;
}
</style>
</head>
<body>
<canvas id="game"></canvas>
<canvas id="map"></canvas>
<div id="hud">
❤️ HP: <span id="hp">100</span><br>
⛽ Fuel: <span id="fuel">100</span>
</div>
<div id="ui">
<button class="btn" onclick="move(0,-1)">↑</button><br>
<button class="btn" onclick="move(-1,0)">←</button>
<button class="btn" onclick="move(0,1)">↓</button>
<button class="btn" onclick="move(1,0)">→</button>
<br>
<button class="btn" onclick="shoot()">🔫</button>
<button class="btn" onclick="heal()">❤️</button>
<button class="btn" onclick="toggleMap()">🗺️</button>
<button class="btn" onclick="rescue()">🚁</button>
</div>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
function resize(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener("resize", resize);
resize();
let player = {x:500,y:500,hp:100,fuel:100};
let bullets = [];
let zombies = [];
let buildings = [];
let goal = {x:1800,y:1800,size:200};
for(let i=0;i<60;i++){
buildings.push({
x:Math.random()*2500,
y:Math.random()*2500,
w:80,
h:80
});
}
function spawnZombie(){
let angle = Math.random()*Math.PI*2;
let dist = 250 + Math.random()*150;
zombies.push({
x:player.x + Math.cos(angle)*dist,
y:player.y + Math.sin(angle)*dist,
hp:30
});
}
setInterval(spawnZombie,1500);
function move(dx,dy){
player.x += dx*15;
player.y += dy*15;
player.fuel -= 0.1;
}
function shoot(){
bullets.push({
x:player.x,
y:player.y,
dx:0,
dy:-8
});
}
function heal(){
player.hp = Math.min(100, player.hp + 20);
}
function toggleMap(){
let m = document.getElementById("map");
m.style.display = (m.style.display=="none")?"block":"none";
}
function rescue(){
alert("🚁 Trực thăng tới! Bạn thắng!");
location.reload();
}
function update(){
// zombies chase
zombies.forEach(z=>{
let dx = player.x - z.x;
let dy = player.y - z.y;
let d = Math.sqrt(dx*dx + dy*dy);
z.x += dx/d * 0.7;
z.y += dy/d * 0.7;
if(d < 18) player.hp -= 0.4;
});
// bullets move
bullets.forEach(b=>{
b.y -= 10;
});
// collision buildings (simple)
buildings.forEach(b=>{
if(player.x > b.x && player.x < b.x+b.w &&
player.y > b.y && player.y < b.y+b.h){
player.x -= 10;
player.y -= 10;
}
});
if(player.hp <= 0){
alert("💀 Bạn đã chết!");
location.reload();
}
document.getElementById("hp").innerText = Math.floor(player.hp);
document.getElementById("fuel").innerText = Math.floor(player.fuel);
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
// camera follow
let camX = player.x - canvas.width/2;
let camY = player.y - canvas.height/2;
ctx.save();
ctx.translate(-camX, -camY);
// goal (purple win zone)
ctx.fillStyle="purple";
ctx.fillRect(goal.x,goal.y,goal.size,goal.size);
// buildings
ctx.fillStyle="white";
buildings.forEach(b=>{
ctx.fillRect(b.x,b.y,b.w,b.h);
});
// zombies
ctx.fillStyle="green";
zombies.forEach(z=>{
ctx.beginPath();
ctx.arc(z.x,z.y,10,0,Math.PI*2);
ctx.fill();
});
// bullets
ctx.fillStyle="yellow";
bullets.forEach(b=>{
ctx.fillRect(b.x,b.y,5,5);
});
// player
ctx.fillStyle="red";
ctx.beginPath();
ctx.arc(player.x,player.y,10,0,Math.PI*2);
ctx.fill();
// direction line (kim chỉ hướng)
ctx.strokeStyle="cyan";
ctx.beginPath();
ctx.moveTo(player.x,player.y);
ctx.lineTo(player.x,player.y-30);
ctx.stroke();
ctx.restore();
}
function loop(){
update();
draw();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
5KB
Transfer Size
5KB
Content Size
138.0ms
Dom Content Loaded
204.0ms
First Paint
139.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...