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 lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Zombie City Escape V8</title><style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}
body{
overflow:hidden;
background:#000;
}
canvas{
display:block;
background:#111;
}
/* MENU */
#menu{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:#050505;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:10;
}
#menu h1{
color:white;
font-size:40px;
margin-bottom:30px;
}
.menuBtn{
width:220px;
height:60px;
margin:10px;
font-size:24px;
border:none;
border-radius:12px;
}
#settings{
display:none;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:#111;
color:white;
padding:20px;
z-index:20;
}
#settings h2{
margin-bottom:20px;
}
.setting{
margin-bottom:20px;
}
/* HUD */
#hud{
position:absolute;
top:10px;
left:10px;
color:white;
z-index:5;
}
#minimap{
position:absolute;
top:10px;
right:10px;
width:140px;
height:140px;
background:#000;
border:2px solid white;
z-index:5;
}
/* LEFT CONTROL */
#leftControls{
position:absolute;
bottom:20px;
left:20px;
z-index:5;
}
/* RIGHT CONTROL */
#rightControls{
position:absolute;
bottom:20px;
right:20px;
z-index:5;
}
.ctrl{
width:65px;
height:65px;
font-size:24px;
border:none;
border-radius:10px;
margin:4px;
}
.row{
display:flex;
justify-content:center;
}
</style></head><body><div id="menu">
<h1>ZOMBIE CITY ESCAPE</h1><button class="menuBtn" onclick="startGame()">▶ Chơi</button>
<button class="menuBtn" onclick="openSettings()">⚙ Cài đặt</button>
<button class="menuBtn">❌ Thoát</button>
</div><div id="settings"><h2>Cài đặt</h2><div class="setting">
Độ sáng
<input id="brightness"
type="range"
min="20"
max="100"
value="60">
</div><div class="setting">
Độ khó<select id="difficulty">
<option>Dễ</option>
<option selected>Thường</option>
<option>Khó</option>
<option>Ác Mộng</option>
</select>
</div><button onclick="closeSettings()">
Quay lại
</button></div><div id="hud">
❤️ HP: 100
<br>
🔋 Pin: 0 / 5
</div><canvas id="minimap"></canvas>
<div id="leftControls"><div class="row">
<button class="ctrl">⬆</button>
</div><div class="row">
<button class="ctrl">⬅</button>
<button class="ctrl">⬇</button>
<button class="ctrl">➡</button>
</div></div><div id="rightControls"><div class="row">
<button class="ctrl">🔫</button>
</div><div class="row">
<button class="ctrl">🏃</button>
<button class="ctrl">📦</button>
</div><div class="row">
<button class="ctrl">❤️</button>
</div></div><canvas id="game"></canvas>
<script>
const canvas =
document.getElementById("game");
const ctx =
canvas.getContext("2d");
function resize(){
canvas.width = innerWidth;
canvas.height = innerHeight;
}
resize();
window.addEventListener(
"resize",
resize
);
let gameStarted=false;
function startGame(){
document.getElementById("menu")
.style.display="none";
gameStarted=true;
}
function openSettings(){
document.getElementById("settings")
.style.display="block";
}
function closeSettings(){
document.getElementById("settings")
.style.display="none";
}// ===== THÀNH PHỐ CƠ BẢN =====
const player = {
x: 500,
y: 500,
speed: 3
};
function drawCity(){
// nền đường
ctx.fillStyle = "#222";
ctx.fillRect(0,0,3000,3000);
// công viên
ctx.fillStyle = "#184d18";
ctx.fillRect(1200,1200,600,600);
// nhà trắng
ctx.fillStyle = "#eeeeee";
for(let i=0;i<20;i++){
ctx.fillRect(
100 + i*120,
200,
80,
80
);
ctx.fillRect(
100 + i*120,
800,
80,
80
);
}
// người chơi
ctx.fillStyle="cyan";
ctx.beginPath();
ctx.arc(
player.x,
player.y,
12,
0,
Math.PI*2
);
ctx.fill();
}
// ===== ĐÈN PIN =====
function drawFlashlight(){
let g =
ctx.createRadialGradient(
player.x,
player.y,
20,
player.x,
player.y,
180
);
g.addColorStop(
0,
"rgba(255,255,255,0)"
);
g.addColorStop(
1,
"rgba(0,0,0,0.92)"
);
ctx.fillStyle = g;
ctx.fillRect(
0,
0,
canvas.width,
canvas.height
);
}
// ===== MINIMAP =====
const mini =
document.getElementById("minimap");
const mctx =
mini.getContext("2d");
function drawMiniMap(){
mctx.fillStyle="#000";
mctx.fillRect(
0,
0,
mini.width,
mini.height
);
mctx.fillStyle="cyan";
mctx.fillRect(
(player.x/3000)*140,
(player.y/3000)*140,
4,
4
);
}
// ===== GAME LOOP =====
function gameLoop(){
if(gameStarted){
ctx.clearRect(
0,
0,
canvas.width,
canvas.height
);
drawCity();
drawFlashlight();
drawMiniMap();
}
requestAnimationFrame(
gameLoop
);
}
gameLoop();
</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
126.0ms
Dom Content Loaded
184.0ms
First Paint
127.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...