AI game creator

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

No:1738

831

←

Prev Next

→

Toy Tower Defense
Developer User3398｜Date and time 23/6/18 23:26:47
Build time 56.162 sec｜Game capacity 8.105KB｜

Script

アプリを作成します！

Wave: 1 Money: 100

このアプリは、「おもちゃのタワーディフェンス」というタイトルのゲームです。プレイヤーは、フィールド上にタワーを設置して、敵を倒していくというゲームです。敵を倒すたびにお金がもらえて、お金を使ってタワーを設置したり、タワーを強化したりすることができます。ゲームは、5ウェーブがクリアできたら勝ちとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

アプリを作成します！

<!DOCTYPE html>
<html>
<head>
	<title>おもちゃのタワーディフェンス</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 20px;
			margin: 0;
			padding: 0;
			background-color: #aaddcc;
		}
		#gameArea {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.cell {
			width: 50px;
			height: 50px;
			border: 1px solid black;
			background-color: #fff;
			text-align: center;
			font-size: 30px;
			line-height: 50px;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		.cell:hover {
			background-color: #eee;
		}
		.cell.attack {
			background-color: #f00;
			color: #fff;
			border: none;
		}
		.controls {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 10px;
		}
		.controls button {
			font-size: 20px;
			padding: 10px;
			margin: 10px;
			background-color: #fff;
			border: none;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		.controls button:hover {
			background-color: #eee;
		}
		.controls button:focus {
			outline: none;
		}
		.message {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 10px;
			font-size: 30px;
			text-align: center;
			color: #fff;
			text-shadow: 2px 2px 2px #000;
		}
		.message span {
			margin: 20px;
		}
	</style>
</head>
<body>
	<div id="gameArea"></div>
	<div class="controls">
		<button id="startButton">スタート！</button>
		<button id="restartButton">もう一度！</button>
	</div>
	<div class="message">
		<span id="waveMessage">Wave: 1</span>
		<span id="moneyMessage">Money: 100</span>
	</div>
	<script>
		// フィールドサイズ
		var fieldSize = 9;

// 初期設定
		var wave = 1;
		var money = 100;
		var towerList = [];
		var enemyList = [];
		var attackCells = [];

// セルクリックイベント
		function cellClickEvent() {
			if (towerList.length == 0) {
				alert("タワーを設置してください！");
				return;
			}
			if (this.classList.contains("attack")) {
				attackCells.push(this);
				this.classList.remove("attack");
			} else {
				for (var i = 0; i < attackCells.length; i++) {
					attackCells[i].classList.remove("attack");
				}
				attackCells = [];
				this.classList.add("attack");
			}
		}

// スタートボタンクリックイベント
		function startButtonClickEvent() {
			createField();
			createTower();
			createEnemy();
			document.getElementById("startButton").disabled = true;
		}

// リスタートボタンクリックイベント
		function restartButtonClickEvent() {
			location.reload();
		}

// セルを作成する
		function createCell() {
			var cell = document.createElement("div");
			cell.classList.add("cell");
			cell.addEventListener("click", cellClickEvent);
			return cell;
		}

// フィールドを作成する
		function createField() {
			var gameArea = document.getElementById("gameArea");
			for (var i = 0; i < fieldSize; i++) {
				for (var j = 0; j < fieldSize; j++) {
					var cell = createCell();
					cell.setAttribute("data-x", j);
					cell.setAttribute("data-y", i);
					gameArea.appendChild(cell);
				}
			}
		}

// タワーを作成する
		function createTower() {
			var gameArea = document.getElementById("gameArea");
			for (var i = 0; i < 3; i++) {
				var x = Math.floor(Math.random() * fieldSize);
				var y = Math.floor(Math.random() * fieldSize);
				var cell = gameArea.querySelector('[data-x="' + x + '"][data-y="' + y + '"]');
				if (cell.classList.contains("tower")) {
					i--;
				} else {
					cell.classList.add("tower");
					towerList.push({
						x: x,
						y: y
					});
				}
			}
		}

// エネミーを作成する
		function createEnemy() {
			var interval = setInterval(function() {
				if (wave > 5) {
					clearInterval(interval);
					endGame(true);
				} else {
					var x = 0;
					var y = Math.floor(Math.random() * fieldSize);
					var cell = document.getElementById("gameArea").querySelector('[data-x="' + x + '"][data-y="' + y + '"]');
					cell.classList.add("enemy");
					enemyList.push(cell);
					moveEnemy(cell, 1);
				}
			}, 2000);
		}

// エネミーを移動する
		function moveEnemy(enemy, step) {
			if (enemy == null) {
				return;
			}
			var x = parseInt(enemy.getAttribute("data-x"));
			var y = parseInt(enemy.getAttribute("data-y"));
			var nextCell = document.getElementById("gameArea").querySelector('[data-x="' + (x + step) + '"][data-y="' + y + '"]');
			if (nextCell.classList.contains("enemy") || nextCell.classList.contains("tower")) {
				endGame(false);
				return;
			}
			if (nextCell == null) {
				enemy.classList.remove("enemy");
				enemy.remove();
				enemyList.splice(enemyList.indexOf(enemy), 1);
				if (enemyList.length == 0) {
					wave++;
					document.getElementById("waveMessage").innerHTML = "Wave: " + wave;
					money += 50;
					document.getElementById("moneyMessage").innerHTML = "Money: " + money;
					createEnemy();
				}
				return;
			}
			step++;
			enemy.classList.remove("enemy");
			nextCell.classList.add("enemy");
			enemyList.splice(enemyList.indexOf(enemy), 1);
			enemyList.push(nextCell);
			setTimeout(function() {
				moveEnemy(nextCell, step);
			}, 1000);
		}

// タワーを攻撃する
		function attackTower() {
			if (attackCells.length == 0) {
				alert("攻撃するセルを選んでください！");
				return;
			}
			var towerX = [];
			var towerY = [];
			for (var i = 0; i < towerList.length; i++) {
				towerX.push(towerList[i].x);
				towerY.push(towerList[i].y);
			}
			var attackX = [];
			var attackY = [];
			for (var i = 0; i < attackCells.length; i++) {
				attackX.push(parseInt(attackCells[i].getAttribute("data-x")));
				attackY.push(parseInt(attackCells[i].getAttribute("data-y")));
			}
			var attackTowerX = [];
			var attackTowerY = [];
			for (var i = 0; i < attackX.length; i++) {
				if (towerX.indexOf(attackX[i]) != -1) {
					if (attackTowerY.indexOf(towerY[towerX.indexOf(attackX[i])]) == -1) {
						attackTowerX.push(attackX[i]);
						attackTowerY.push(towerY[towerX.indexOf(attackX[i])]);
					}
				}
			}
			if (attackTowerX.length == 0) {
				alert("攻撃するセルにタワーがありません！");
				return;
			}
			for (var i = 0; i < attackTowerX.length; i++) {
				var cell = document.getElementById("gameArea").querySelector('[data-x="' + attackTowerX[i] + '"][data-y="' + attackTowerY[i] + '"]');
				cell.classList.remove("tower");
				towerList.splice(towerList.indexOf({
					x: attackTowerX[i],
					y: attackTowerY[i]
				}), 1);
			}
			attackCells = [];
			money += 20;
			document.getElementById("moneyMessage").innerHTML = "Money: " + money;
		}

// ゲームオーバー
		function endGame(win) {
			if (win) {
				alert("ゲームクリア！おめでとう！");
			} else {
				alert("ゲームオーバー！残念！");
			}
			location.reload();
		}

// スタートボタンクリックイベントに関数を設定する
		document.getElementById("startButton").addEventListener("click", startButtonClickEvent);

// リスタートボタンクリックイベントに関数を設定する
		document.getElementById("restartButton").addEventListener("click", restartButtonClickEvent);
	</script>
</body>
</html>