Meta Description" name="description" />
<!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 V2</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:65px;
height:65px;
margin:3px;
font-size:13px;
border-radius:12px;
border:none;
background:rgba(255,255,255,0.85);
}
#hud {
position:fixed;
top:10px;
left:10px;
color:white;
font-family:Arial;
font-size:14px;
}
#msg {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:yellow;
font-size:28px;
display:none;
font-family:Arial;
}
</style>
</head>
<body>
<canvas id="game"></canvas>
<div id="hud">
❤️ HP: <span id="hp">100</span><br>
⛽ Speed Mode: <span id="spd">NORMAL</span>
</div>
<div id="msg">📡 GỌI TRỰC THĂNG</div>
<div id="ui">
<button class="btn" onpointerdown="startMove(0,-1)" onpointerup="stopMove()">↑</button><br>
<button class="btn" onpointerdown="startMove(-1,0)" onpointerup="stopMove()">←</button>
<button class="btn" onpointerdown="startMove(0,1)" onpointerup="stopMove()">↓</button>
<button class="btn" onpointerdown="startMove(1,0)" onpointerup="stopMove()">→</button>
<br>
<button class="btn" onclick="shoot()">🔫</button>
<button class="btn" onclick="heal()">❤️</button>
<button class="btn" onclick="secretCombo()">⚡</button>
<button class="btn" onclick="rescue()">🚁</button>
</div>
<script>
const c = document.getElementById("game");
const ctx = c.getContext("2d");
function resize(){
c.width = innerWidth;
c.height = innerHeight;
}
window.addEventListener("resize", resize);
resize();
let player = {x:500,y:500,hp:100,fast:false};
let zombies = [];
let bullets = [];
let buildings = [];
let goal = {x:2000,y:2000,size:200};
let moveX = 0;
let moveY = 0;
let secretStep = 0;
for(let i=0;i<50;i++){
buildings.push({
x:Math.random()*3000,
y:Math.random()*3000,
w:80,h:80
});
}
// spawn zombies SLOWER
function spawn(){
let a = Math.random()*Math.PI*2;
let d = 400 + Math.random()*200;
zombies.push({
x:player.x + Math.cos(a)*d,
y:player.y + Math.sin(a)*d
});
}
setInterval(spawn,2000); // chậm hơn
function startMove(x,y){
moveX = x;
moveY = y;
}
function stopMove(){
moveX = 0;
moveY = 0;
}
function shoot(){
bullets.push({x:player.x,y:player.y});
checkSecret(4);
}
function heal(){
player.hp = Math.min(100,player.hp+20);
}
function secretCombo(){
alert("⚡ Combo: ↑ ← ↓ → 🔫");
}
function checkSecret(step){
if(step === 4){
secretStep++;
} else {
secretStep = 0;
}
if(secretStep >= 4){
player.fast = true;
document.getElementById("spd").innerText = "FAST MODE";
secretStep = 0;
}
}
function rescue(){
document.getElementById("msg").style.display="block";
setTimeout(()=>{
alert("🚁 Bạn đã thoát!");
location.reload();
},1500);
}
function update(){
let speed = player.fast ? 6 : 3;
player.x += moveX * speed;
player.y += moveY * speed;
// zombies slower
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.4;
z.y += dy/d * 0.4;
if(d < 18) player.hp -= 0.2;
});
// bullets
bullets.forEach(b=>{
b.y -= 12;
});
// buildings collision
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 -= moveX*5;
player.y -= moveY*5;
}
});
if(player.hp<=0){
alert("💀 Game Over");
location.reload();
}
document.getElementById("hp").innerText = Math.floor(player.hp);
}
function draw(){
ctx.clearRect(0,0,c.width,c.height);
let camX = player.x - c.width/2;
let camY = player.y - c.height/2;
ctx.save();
ctx.translate(-camX,-camY);
// goal 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 SMALL yellow
ctx.fillStyle="yellow";
bullets.forEach(b=>{
ctx.beginPath();
ctx.arc(b.x,b.y,3,0,Math.PI*2);
ctx.fill();
});
// player
ctx.fillStyle="red";
ctx.beginPath();
ctx.arc(player.x,player.y,10,0,Math.PI*2);
ctx.fill();
// LONG POINTER (xuyên màn hình cảm giác GTA)
ctx.strokeStyle="cyan";
ctx.beginPath();
ctx.moveTo(player.x,player.y);
ctx.lineTo(player.x,player.y-80);
ctx.stroke();
ctx.restore();
}
function loop(){
update();
draw();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>1
1
5KB
5KB
201.0ms
220.0ms
201.0ms