Tap to defeat enemies with different HP and speeds approaching in the middle.'s game

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

No:2016

7181

←

Prev Next

→

Tap to defeat enemies with different HP and speeds..ALL
Developer User1006｜Date and time 23/6/19 19:13:28
Build time 34.29 sec｜Game capacity 2.964KB｜

Script

Below is the actual program. This application can be operated with a smartphone and、This is a game in which you tap to defeat enemies with different HP and speeds that are approaching you in the middle. It uses a lot of pictograms.

Score: 0

←

Prev　Next

→ 　

Back　

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

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

以下が実際のプログラムです。このアプリはスマホで操作可能で、真ん中に迫ってくるHPと速度の異なる敵たちをタップして倒すゲームです。絵文字を多く使っています。

<!DOCTYPE html>
<html>
<head>
	<title>Tap the Enemy</title>
	<style type="text/css">
		body {
			background-color: #c8e3c5;
		}

#game-area {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 90%;
			height: 90%;
			background-color: #669966;
			border-radius: 10px;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

#score {
			font-size: 2em;
			margin-bottom: 10px;
		}

.enemy {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: #e60000;
			border-radius: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 2em;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="game-area">
		<div id="score">Score: 0</div>
	</div>

function addEnemy() {
			var enemy = document.createElement("div");
			enemy.classList.add("enemy");
			enemy.hp = Math.floor(Math.random() * 3) + 1;
			enemy.speed = Math.floor(Math.random() * 4) + 1;
			enemy.innerText = enemy.hp;
			enemy.style.left = Math.floor(Math.random() * (gameArea.offsetWidth - 50)) + "px";
			enemy.style.top = Math.floor(Math.random() * (gameArea.offsetHeight - 50)) + "px";
			gameArea.appendChild(enemy);
			enemies.push(enemy);
		}

setInterval(function() {
			if (enemies.length < maxEnemies) {
				addEnemy();
			}
			updateEnemies();
			checkCollisions();
			document.getElementById("score").innerText = "Score: " + score;
		}, 50);

gameArea.addEventListener("click", function(event) {
			var target = event.target;
			if (target.classList.contains("enemy") && target.hp > 0) {
				target.hp--;
				target.innerText = target.hp;
				if (target.hp == 0) {
					score++;
					gameArea.removeChild(target);
					enemies.splice(enemies.indexOf(target), 1);
				}
			}
		});
	</script>
</body>
</html>