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

No:28

363

←

Prev Next

→

Tower diffence game
Developer anonymous｜Date and time 23/5/1 16:34:35
Build time 95.608 sec｜Game capacity 5.022KB｜

Script

Tower Defense Game

How to play

Click on the cells to add towers. All cells must have a tower to clear the level.

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Tower Defense Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #B3E5FC;
			text-align: center;
			padding-top: 20px;
		}
		
		h1 {
			color: #283593;
			font-size: 40px;
			margin-bottom: 0;
			font-weight: bold;
			text-shadow: 2px 2px #E3F2FD;
		}
		
		h2 {
			color: #1A237E;
			font-size: 30px;
			margin: 10px;
			text-shadow: 1px 1px #E3F2FD;
		}
		
		p {
			color: #01579B;
			font-size: 20px;
			margin: 10px;
			line-height: 1.5;
			text-shadow: 1px 1px #E3F2FD;
		}
		
		button {
			background-color: #01579B;
			color: #FFF;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			cursor: pointer;
			margin-bottom: 20px;
		}
		
		#game {
			background-color: #FFF;
			padding: 20px;
			border-radius: 20px;
			box-shadow: 2px 2px 10px #BBDEFB;
			display: none;
		}
		
		#map {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-gap: 10px;
			margin-top: 20px;
		}
		
		.cell {
			background-color: #E3F2FD;
			border-radius: 10px;
			height: 70px;
			border: 2px solid #01579B;
			text-align: center;
			font-size: 50px;
			font-weight: bold;
			color: #69F0AE;
			box-shadow: 2px 2px #BBDEFB;
			cursor: pointer;
		}
		
		.cell:hover {
			background-color: #BBDEFB;
		}
		
		#score {
			font-size: 30px;
			font-weight: bold;
			margin-top: 20px;
			color: #1A237E;
			text-shadow: 1px 1px #E3F2FD;
		}
		
		#level {
			font-size: 30px;
			font-weight: bold;
			margin-top: 20px;
			color: #1A237E;
			text-shadow: 1px 1px #E3F2FD;
			display: none;
		}
		
		#hud {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;
		}
		
		.button {
			background-color: #01579B;
			color: #FFF;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			cursor: pointer;
			margin-bottom: 20px;
		}
		
		#next {
			background-color: #01579B;
			color: #FFF;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			cursor: pointer;
			display: none;
		}
	</style>
	<script>
		var startTime = null;
		var score = 0;
		var level = 1;
		var map = [[0, 0, 0, 0, 0],
				   [0, 0, 0, 0, 0],
				   [0, 0, 0, 0, 0],
				   [0, 0, 0, 0, 0],
				   [0, 0, 0, 0, 0]];
		
		function startGame() {
			document.getElementById("intro").style.display = "none";
			document.getElementById("game").style.display = "block";
			startTime = new Date().getTime();
			drawMap();
		}
		
		function drawMap() {
			var divMap = document.getElementById("map");
			divMap.innerHTML = "";
			for (var i = 0; i < map.length; i++) {
				for (var j = 0; j < map[i].length; j++) {
					var cell = document.createElement("div");
					cell.className = "cell";
					cell.dataset.row = i;
					cell.dataset.col = j;
					cell.textContent = map[i][j];
					cell.addEventListener("click", addTower);
					divMap.appendChild(cell);
				}
			}
		}
		
		function addTower() {
			var row = parseInt(this.dataset.row);
			var col = parseInt(this.dataset.col);
			map[row][col] = 1;
			this.removeEventListener("click", addTower);
			checkWin();
		}
		
		function checkWin() {
			var cells = document.querySelectorAll(".cell");
			for (var i = 0; i < cells.length; i++) {
				var row = parseInt(cells[i].dataset.row);
				var col = parseInt(cells[i].dataset.col);
				if (map[row][col] == 0) {
					return; //not all cells have tower 
				}
			}
			document.getElementById("score").textContent = "Score: " + score;
			document.getElementById("level").style.display = "block";
			if (level < 3) {
				document.getElementById("level").textContent = "Level " + level + " cleared!"
				document.getElementById("next").style.display = "block";
				document.getElementById("next").addEventListener("click", nextLevel);
			} else {
				document.getElementById("level").textContent = "Congratulations! You won!";
			}
		}
		
		function nextLevel() {
			level++;
			map = [[0, 0, 0, 0, 0],
				   [0, 0, 0, 0, 0],
				   [0, 0, 0, 0, 0],
				   [0, 0, 0, 0, 0],
				   [0, 0, 0, 0, 0]];
			document.getElementById("level").style.display = "none";
			document.getElementById("next").style.display = "none";
			drawMap();
		}
		
		function updateScore() {
			var currentTime = new Date().getTime();
			score += Math.round((currentTime - startTime) / 1000);
			startTime = currentTime;
		}
		
		setInterval(updateScore, 1000);
	</script>
</head>
<body>
	<div id="intro">
		<h1>Tower Defense Game</h1>
		<h2>How to play</h2>
		<p>Click on the cells to add towers. All cells must have a tower to clear the level.</p>
		<button onclick="startGame()">Start Game</button>
	</div>
	<div id="game">
		<div id="score">Score: 0</div>
		<div id="level"></div>
		<div id="map"></div>
		<div id="hud">
			<button onclick="location.reload()" class="button">Reset</button>
			<button onclick="startGame()" class="button">New Game</button>
			<button id="next" class="button">Next Level</button>
		</div>
	</div>
</body>
</html>