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

No:2153

262

←

Prev Next

→

Zombie game
Developer User3502｜Date and time 23/6/20 10:20:10
Build time 64.814 sec｜Game capacity 5.046KB｜

Script

Here’s an example of a HTML file with JavaScript code that implements a zombie game:

Zombie Game

This is a simple game where the player’s goal is to kill all the zombies by moving around on a 5x5 grid. The game starts with the player in the top-left corner and three zombies randomly placed on the board. The player can move up, down, left, or right using the arrow keys on their device. If the player collides with a zombie, they are eaten and the game is over. If the player kills all the zombies, they win. The game automatically moves the zombies one step towards the player every second. The game uses emoji characters for the player and zombie images.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Here's an example of a HTML file with JavaScript code that implements a zombie game:

```html
<!DOCTYPE html>
<html>
<head>
	<title>Zombie Game</title>
</head>
<body>
	<h1>Zombie Game</h1>
	<div id="board"></div>
	<button id="start">Start Game</button>
	<button id="reset">Reset Game</button>
	<script>
		// Define game variables
		var board = document.getElementById('board');
		var startButton = document.getElementById('start');
		var resetButton = document.getElementById('reset');
		var rows = 5;
		var cols = 5;
		var zombies = 3;
		var playerPos = [0, 0];
		var zombiePos = [];
		var gameOver = false;

// Draw game board
		function drawBoard() {
			var html = '';
			for (var i = 0; i < rows; i++) {
				html += '<div class="row">';
				for (var j = 0; j < cols; j++) {
					html += '<div class="cell"></div>';
				}
				html += '</div>';
			}
			board.innerHTML = html;
			// Set player and zombie positions
			playerPos = [0, 0];
			zombiePos = [];
			for (var k = 0; k < zombies; k++) {
				var r = Math.floor(Math.random() * rows);
				var c = Math.floor(Math.random() * cols);
				zombiePos.push([r, c]);
			}
			drawEntities();
		}

// Draw player and zombies
		function drawEntities() {
			var cells = board.querySelectorAll('.cell');
			for (var i = 0; i < cells.length; i++) {
				cells[i].classList.remove('player', 'zombie');
			}
			var index = playerPos[0] * cols + playerPos[1];
			cells[index].classList.add('player');
			for (var j = 0; j < zombiePos.length; j++) {
				var index = zombiePos[j][0] * cols + zombiePos[j][1];
				cells[index].classList.add('zombie');
			}
		}

// Move player
		function movePlayer(dir) {
			if (gameOver) return;
			var newPos = [playerPos[0], playerPos[1]];
			switch (dir) {
				case 'up':
					newPos[0] = Math.max(playerPos[0]-1, 0);
					break;
				case 'down':
					newPos[0] = Math.min(playerPos[0]+1, rows-1);
					break;
				case 'left':
					newPos[1] = Math.max(playerPos[1]-1, 0);
					break;
				case 'right':
					newPos[1] = Math.min(playerPos[1]+1, cols-1);
					break;
			}
			// Check for collision with zombie
			for (var i = 0; i < zombiePos.length; i++) {
				if (newPos[0] == zombiePos[i][0] && newPos[1] == zombiePos[i][1]) {
					gameOver = true;
					alert('You were eaten by a zombie!');
					return;
				}
			}
			playerPos = newPos;
			drawEntities();
			// Check for win
			if (zombiePos.length == 0) {
				gameOver = true;
				alert('You killed all the zombies! You win!');
				return;
			}
		}

// Move zombies
		function moveZombies() {
			if (gameOver) return;
			for (var i = 0; i < zombiePos.length; i++) {
				var newPos = [zombiePos[i][0], zombiePos[i][1]];
				if (playerPos[0] < zombiePos[i][0]) {
					newPos[0]--;
				} else if (playerPos[0] > zombiePos[i][0]) {
					newPos[0]++;
				}
				if (playerPos[1] < zombiePos[i][1]) {
					newPos[1]--;
				} else if (playerPos[1] > zombiePos[i][1]) {
					newPos[1]++;
				}
				// Check for collision with player
				if (newPos[0] == playerPos[0] && newPos[1] == playerPos[1]) {
					gameOver = true;
					alert('You were eaten by a zombie!');
					return;
				}
				// Check for collision with other zombies
				for (var j = 0; j < zombiePos.length; j++) {
					if (i == j) continue;
					if (newPos[0] == zombiePos[j][0] && newPos[1] == zombiePos[j][1]) {
						break;
					}
				}
				zombiePos[i] = newPos;
			}
			drawEntities();
		}

// Attach event listeners
		startButton.addEventListener('click', function() {
			gameOver = false;
			drawBoard();
			startButton.style.display = 'none';
			resetButton.style.display = 'block';
			setInterval(moveZombies, 1000);
		});
		resetButton.addEventListener('click', function() {
			gameOver = false;
			drawBoard();
		});
		document.addEventListener('keydown', function(event) {
			switch (event.key) {
				case 'ArrowUp':
					movePlayer('up');
					break;
				case 'ArrowDown':
					movePlayer('down');
					break;
				case 'ArrowLeft':
					movePlayer('left');
					break;
				case 'ArrowRight':
					movePlayer('right');
					break;
			}
		});

// Apply styles
		var style = document.createElement('style');
		style.textContent = `
			.row {
				display: flex;
			}
			.cell {
				flex: 1;
				box-sizing: border-box;
				padding: 10px;
				border: 1px solid #ccc;
				background-color: #eee;
			}
			.player {
				background-image: url('👦');
			}
			.zombie {
				background-image: url('🧟');
			}
		`;
		document.head.appendChild(style);
	</script>
</body>
</html>
```

This is a simple game where the player's goal is to kill all the zombies by moving around on a 5x5 grid. The game starts with the player in the top-left corner and three zombies randomly placed on the board. The player can move up, down, left, or right using the arrow keys on their device. If the player collides with a zombie, they are eaten and the game is over. If the player kills all the zombies, they win. The game automatically moves the zombies one step towards the player every second. The game uses emoji characters for the player and zombie images.