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

No:1045

272

←

Prev Next

→

Zombie attack
Developer User3221｜Date and time 23/6/18 0:39:04
Build time 70.08 sec｜Game capacity 6.244KB｜

Script

Zombie Attack!

Use the arrow keys or swipe to move. Press space or tap to shoot.

Score: 0

Game Over

Zombie Attack is a game where you play as a survivor trying to fend off waves of zombies. Use the arrow keys or swipe to move and press space or tap to shoot. You must avoid getting caught by a zombie or the game will be over. See how long you can survive and how high of a score you can get!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Zombie Attack!</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: black;
			color: white;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		canvas {
			border: 2px solid white;
			background-color: #333;
			margin: 30px;
		}
		#score {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 24px;
		}
		#gameover {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 48px;
			display: none;
		}
	</style>
</head>
<body>
	<h1>Zombie Attack!</h1>
	<p>Use the arrow keys or swipe to move. Press space or tap to shoot.</p>
	<canvas id="gameCanvas" width="500" height="500"></canvas>
	<div id="score">Score: 0</div>
	<div id="gameover">Game Over</div>
	<script>
		// Game variables
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var gameover = false;

// Player variables
		var player = {
			x: canvas.width/2,
			y: canvas.height - 50,
			width: 50,
			height: 50,
			speed: 5,
			dx: 0,
			dy: 0
		};

// Bullet variables
		var bullets = [];
		var bulletSpeed = 10;

// Zombie variables
		var zombies = [];
		var zombieSpeed = 2;
		var zombieSpawnInterval = 1000;
		var lastSpawn = 0;

// Handle keyboard input
		document.addEventListener("keydown", function(event) {
			if (event.code === "ArrowLeft" || event.code === "KeyA") {
				player.dx = -player.speed;
			} else if (event.code === "ArrowRight" || event.code === "KeyD") {
				player.dx = player.speed;
			} else if (event.code === "ArrowUp" || event.code === "KeyW") {
				player.dy = -player.speed;
			} else if (event.code === "ArrowDown" || event.code === "KeyS") {
				player.dy = player.speed;
			} else if (event.code === "Space") {
				shoot();
			}
		});

// Handle touch input
		document.addEventListener("touchstart", function(event) {
			event.preventDefault();
			var touchX = event.touches[0].pageX;
			var touchY = event.touches[0].pageY;
			var halfWidth = canvas.width/2;

if (touchX < halfWidth) {
				player.dx = -player.speed;
			} else {
				player.dx = player.speed;
			}

if (touchY < canvas.height - 100) {
				player.dy = -player.speed;
			} else {
				shoot();
			}
		});

document.addEventListener("touchend", function(event) {
			player.dx = 0;
			player.dy = 0;
		});

// Game loop
		var lastTimestamp = 0;
		function gameLoop(timestamp) {
			var dt = (timestamp - lastTimestamp) / 1000;
			lastTimestamp = timestamp;

if (!gameover) {
				update(dt);
				draw();
				window.requestAnimationFrame(gameLoop);
			}
		}

function update(dt) {
			// Move player
			player.x += player.dx;
			player.y += player.dy;

// Keep player inside canvas
			if (player.x < player.width/2) {
				player.x = player.width/2;
			} else if (player.x > canvas.width - player.width/2) {
				player.x = canvas.width - player.width/2;
			}

if (player.y < player.height/2) {
				player.y = player.height/2;
			} else if (player.y > canvas.height - player.height/2) {
				player.y = canvas.height - player.height/2;
			}

// Move bullets
			for (var i = 0; i < bullets.length; i++) {
				bullets[i].y -= bulletSpeed;

// Remove bullets that go off the top of the canvas
				if (bullets[i].y < 0) {
					bullets.splice(i, 1);
					i--;
				}
			}

// Spawn zombies
			if (lastTimestamp - lastSpawn > zombieSpawnInterval) {
				spawnZombie();
				lastSpawn = lastTimestamp;
			}

// Move zombies
			for (var i = 0; i < zombies.length; i++) {
				zombies[i].y += zombieSpeed;

// Check for zombie collisions with player
				if (collides(zombies[i], player)) {
					gameover = true;
					document.getElementById("gameover").style.display = "block";
				}

// Check for zombie collisions with bullets
				for (var j = 0; j < bullets.length; j++) {
					if (collides(zombies[i], bullets[j])) {
						score++;
						document.getElementById("score").innerHTML = "Score: " + score;
						zombies.splice(i, 1);
						i--;
						bullets.splice(j, 1);
						break;
					}
				}

// Remove zombies that go off the bottom of the canvas
				if (zombies[i].y > canvas.height) {
					zombies.splice(i, 1);
					i--;
				}
			}
		}

function draw() {
			// Clear canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
			ctx.fillStyle = "white";
			ctx.fillRect(player.x - player.width/2, player.y - player.height/2, player.width, player.height);

// Draw bullets
			ctx.fillStyle = "orange";
			for (var i = 0; i < bullets.length; i++) {
				ctx.fillRect(bullets[i].x - 2, bullets[i].y - 10, 4, 10);
			}

// Draw zombies
			ctx.fillStyle = "green";
			for (var i = 0; i < zombies.length; i++) {
				ctx.fillRect(zombies[i].x - zombies[i].width/2, zombies[i].y - zombies[i].height/2, zombies[i].width, zombies[i].height);
			}
		}

function shoot() {
			bullets.push({x: player.x, y: player.y});
		}

function spawnZombie() {
			var width = Math.floor(Math.random() * 50) + 50;
			var height = Math.floor(Math.random() * 50) + 50;
			var x = Math.floor(Math.random() * (canvas.width - width)) + width/2;
			var y = -height/2;
			var dx = Math.random() * 4 - 2;
			zombies.push({x: x, y: y, width: width, height: height, dx: dx});
		}

function collides(a, b) {
			return a.x - a.width/2 < b.x + b.width/2 &&
				   a.x + a.width/2 > b.x - b.width/2 &&
				   a.y - a.height/2 < b.y + b.height/2 &&
				   a.y + a.height/2 > b.y - b.height/2;
		}

// Start game
		window.requestAnimationFrame(gameLoop);
	</script>
</body>
</html>