CZ
Giới thiệu
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Zombie Escape</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background: #111;
font-family: Arial, sans-serif;
}
#game {
width: 100vw;
height: 100vh;
background:
linear-gradient(rgba(20,40,20,.35), rgba(10,20,10,.6)),
repeating-linear-gradient(
45deg,
#355c35 0px,
#355c35 40px,
#315631 40px,
#315631 80px
);
position: relative;
overflow: hidden;
}
#player {
position: absolute;
width: 42px;
height: 42px;
background: #2196f3;
border-radius: 50%;
border: 4px solid white;
box-shadow: 0 0 15px #2196f3;
z-index: 5;
}
.zombie {
position: absolute;
width: 42px;
height: 42px;
background: #72c472;
border-radius: 50%;
border: 4px solid #193d19;
box-shadow: 0 0 12px #72c472;
z-index: 4;
}
.obstacle {
position: absolute;
background: #5b3820;
border: 4px solid #321e10;
border-radius: 10px;
}
#ui {
position: fixed;
top: 15px;
left: 15px;
color: white;
font-size: 22px;
font-weight: bold;
z-index: 20;
text-shadow: 2px 2px 4px black;
}
#gameOver {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.8);
color: white;
z-index: 100;
text-align: center;
padding-top: 18vh;
}
#gameOver h1 {
font-size: 60px;
color: #ff3333;
margin: 10px;
}
#gameOver p {
font-size: 25px;
}
button {
padding: 15px 35px;
font-size: 20px;
border: 0;
border-radius: 10px;
cursor: pointer;
background: #2196f3;
color: white;
font-weight: bold;
}
button:hover {
background: #0d75c9;
}
#help {
position: fixed;
bottom: 15px;
left: 15px;
color: white;
background: rgba(0,0,0,.5);
padding: 10px;
border-radius: 8px;
z-index: 20;
}
</style>
</head>
<body>
<div id="game">
</div>
<div id="gameOver">
<h1>🧟 GAME OVER</h1>
<p>Bạn đã bị Zombie bắt!</p>
<p>Điểm của bạn: <b id="finalScore">0</b></p>
<button onclick="restartGame()">🔄 Chơi lại</button>
</div>
<script>
const game = document.getElementById("game");
const player = document.getElementById("player");
const scoreText = document.getElementById("score");
const hpText = document.getElementById("hp");
const gameOverScreen = document.getElementById("gameOver");
const finalScore = document.getElementById("finalScore");
let playerX = window.innerWidth / 2;
let playerY = window.innerHeight / 2;
let speed = 5;
let score = 0;
let hp = 3;
let gameRunning = true;
let keys = {};
let zombies = [];
let obstacles = [];
/* =========================
ĐIỀU KHIỂN
========================= */
document.addEventListener("keydown", e => {
keys[e.key.toLowerCase()] = true;
});
document.addEventListener("keyup", e => {
keys[e.key.toLowerCase()] = false;
});
/* =========================
TẠO CHƯỚNG NGẠI VẬT
========================= */
function createObstacles() {
for (let i = 0; i < 12; i++) {
const obstacle = document.createElement("div");
obstacle.className = "obstacle";
let width = 50 + Math.random() * 80;
let height = 50 + Math.random() * 80;
obstacle.style.width = width + "px";
obstacle.style.height = height + "px";
obstacle.style.left =
Math.random() * (window.innerWidth - width) + "px";
obstacle.style.top =
80 + Math.random() * (window.innerHeight - height - 100) + "px";
game.appendChild(obstacle);
obstacles.push(obstacle);
}
}
/* =========================
TẠO ZOMBIE
========================= */
function createZombie() {
const zombie = document.createElement("div");
zombie.className = "zombie";
let side = Math.floor(Math.random() * 4);
let x;
let y;
if (side === 0) {
x = -50;
y = Math.random() * window.innerHeight;
}
if (side === 1) {
x = window.innerWidth + 50;
y = Math.random() * window.innerHeight;
}
if (side === 2) {
x = Math.random() * window.innerWidth;
y = -50;
}
if (side === 3) {
x = Math.random() * window.innerWidth;
y = window.innerHeight + 50;
}
zombie.x = x;
zombie.y = y;
zombie.style.left = x + "px";
zombie.style.top = y + "px";
game.appendChild(zombie);
zombies.push(zombie);
}
/* =========================
DI CHUYỂN NGƯỜI CHƠI
========================= */
function movePlayer() {
if (keys["w"] || keys["arrowup"]) {
playerY -= speed;
}
if (keys["s"] || keys["arrowdown"]) {
playerY += speed;
}
if (keys["a"] || keys["arrowleft"]) {
playerX -= speed;
}
if (keys["d"] || keys["arrowright"]) {
playerX += speed;
}
// Không cho chạy ra ngoài màn hình
playerX = Math.max(
0,
Math.min(window.innerWidth - 42, playerX)
);
playerY = Math.max(
50,
Math.min(window.innerHeight - 42, playerY)
);
player.style.left = playerX + "px";
player.style.top = playerY + "px";
}
/* =========================
ZOMBIE ĐUỔI NGƯỜI CHƠI
========================= */
function moveZombies() {
zombies.forEach(zombie => {
let dx = playerX - zombie.x;
let dy = playerY - zombie.y;
let distance = Math.sqrt(dx * dx + dy * dy);
let zombieSpeed = 1.1 + score / 1000;
zombie.x += (dx / distance) * zombieSpeed;
zombie.y += (dy / distance) * zombieSpeed;
zombie.style.left = zombie.x + "px";
zombie.style.top = zombie.y + "px";
// Zombie chạm người chơi
if (
Math.abs(playerX - zombie.x) < 35 &&
Math.abs(playerY - zombie.y) < 35
) {
hitPlayer();
zombie.x = Math.random() * window.innerWidth;
zombie.y = Math.random() * window.innerHeight;
}
});
}
/* =========================
BỊ ZOMBIE TẤN CÔNG
========================= */
function hitPlayer() {
hp--;
hpText.textContent = hp;
player.style.transform = "scale(1.4)";
setTimeout(() => {
player.style.transform = "scale(1)";
}, 150);
if (hp <= 0) {
endGame();
}
}
/* =========================
KẾT THÚC GAME
========================= */
function endGame() {
gameRunning = false;
finalScore.textContent = score;
gameOverScreen.style.display = "block";
}
/* =========================
ĐIỂM
========================= */
setInterval(() => {
if (!gameRunning) return;
score++;
scoreText.textContent = score;
}, 1000);
/* =========================
THÊM ZOMBIE
========================= */
setInterval(() => {
if (!gameRunning) return;
if (zombies.length < 15) {
createZombie();
}
}, 2500);
/* =========================
VÒNG LẶP GAME
========================= */
function gameLoop() {
if (gameRunning) {
movePlayer();
moveZombies();
}
requestAnimationFrame(gameLoop);
}
/* =========================
CHƠI LẠI
========================= */
function restartGame() {
zombies.forEach(z => z.remove());
zombies = [];
hp = 3;
score = 0;
playerX = window.innerWidth / 2;
playerY = window.innerHeight / 2;
hpText.textContent = hp;
scoreText.textContent = score;
gameOverScreen.style.display = "none";
gameRunning = true;
for (let i = 0; i < 3; i++) {
createZombie();
}
}
/* =========================
BẮT ĐẦU
========================= */
createObstacles();
for (let i = 0; i < 3; i++) {
createZombie();
}
gameLoop();
</script>
</body>
</html>
<div id="ui">
⭐ Điểm: <span id="score">0</span>
❤️ Máu: <span id="hp">3</span>
</div>
<div id="help">
🕹️ WASD hoặc phím mũi tên để chạy
</div>
<div id="player"></div>Đánh giá
Bình luận (0)
Vui lòng đăng nhập để bình luận.
Đánh giá & Review (0)
Đăng nhập để viết review cho game này.
Chưa có review nào. Hãy là người đầu tiên!
Chưa có bình luận nào. Hãy là người đầu tiên bình luận!