Click here for free DL of the app version that can save data.

No:15545

←

Prev Next

→

لعبة الزومبي
Developer User6662｜Date and time 23/9/9 22:09:56
Build time 39.618 sec｜Game capacity 3.495KB｜

Script

لعبة الزومبي

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>لعبة الزومبي</title>
	<style>
		body {
			text-align: center;
			font-family: Arial, sans-serif;
			background-color: #f4f4f4;
		}

h1 {
			color: #333333;
		}

#game-container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 400px;
		}

#player {
			width: 100px;
			height: 100px;
			background-image: url('player.png');
			background-repeat: no-repeat;
			background-size: cover;
			position: absolute;
		}

#zombie {
			width: 100px;
			height: 100px;
			background-image: url('zombie.png');
			background-repeat: no-repeat;
			background-size: cover;
			position: absolute;
		}

#result {
			color: #FF0000;
			font-size: 18px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>لعبة الزومبي</h1>
	<div id="game-container">
		<div id="player"></div>
		<div id="zombie"></div>
	</div>
	<div id="result"></div>

var player = document.getElementById("player");
			var zombie = document.getElementById("zombie");
			var result = document.getElementById("result");

var gameContainer = document.getElementById("game-container");
			var containerWidth = gameContainer.offsetWidth;
			var containerHeight = gameContainer.offsetHeight;

var playerWidth = player.offsetWidth;
			var playerHeight = player.offsetHeight;

var zombieWidth = zombie.offsetWidth;
			var zombieHeight = zombie.offsetHeight;

var playerX = containerWidth / 2 - playerWidth / 2;
			var playerY = containerHeight / 2 - playerHeight / 2;

var zombieX = Math.floor(Math.random() * (containerWidth - zombieWidth));
			var zombieY = Math.floor(Math.random() * (containerHeight - zombieHeight));

player.style.top = playerY + "px";
			player.style.left = playerX + "px";

zombie.style.top = zombieY + "px";
			zombie.style.left = zombieX + "px";

var score = 0;
			var numOfTicks = 0;

document.addEventListener("click", function(event) {
				var x = event.clientX;
				var y = event.clientY;

var dx = Math.abs(playerX - x);
				var dy = Math.abs(playerY - y);

var distance = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));

if (distance <= 50) {
					score++;
					result.textContent = "نقاط: " + score;
				}
			});

setInterval(function() {
				var dx = Math.abs(playerX - zombieX);
				var dy = Math.abs(playerY - zombieY);

var distance = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));

if (distance <= 50) {
					result.textContent = "لقد انتهت اللعبة!";
					document.removeEventListener("click");
				}

player.style.transition = "top 0.1s, left 0.1s";
				zombie.style.transition = "top 0.1s, left 0.1s";

if (playerX < zombieX) {
					playerX++;
					player.style.left = playerX + "px";
				} else if (playerX > zombieX) {
					playerX--;
					player.style.left = playerX + "px";
				}

if (playerY < zombieY) {
					playerY++;
					player.style.top = playerY + "px";
				} else if (playerY > zombieY) {
					playerY--;
					player.style.top = playerY + "px";
				}

if (numOfTicks % 100 == 0) {
					zombieX = Math.random() * (containerWidth - zombieWidth);
					zombieY = Math.random() * (containerHeight - zombieHeight);

zombieX = Math.floor(zombieX);
					zombieY = Math.floor(zombieY);

zombie.style.left = zombieX + "px";
					zombie.style.top = zombieY + "px";
				}

numOfTicks++;
			}, 10);

});
	</script>

</body>
</html>