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

No:2598

3873

←

Prev Next

→

Leisurely game of watching ants building a nest
Developer anonymous｜Date and time 70/1/1 9:57:39
Build time unknown sec｜Game capacity 3.459KB｜

Script

蟻の巣作り

スマホで操作して蟻の巣を作っていく放置ゲームです。

←

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>蟻の巣作り</title>
	<style>
		#colony {
			display: flex;
			flex-wrap: wrap;
			max-width: 100%;
			background-color: #F5DEB3;
		}
		.ant {
			padding: 10px;
			font-size: 25px;
			animation: ant-move 5s infinite;
		}
		@keyframes ant-move {
			0% {
				transform: rotate(0);
				margin-left: 0;
				margin-top: 0;
			}
			25% {
				transform: rotate(90deg);
				margin-left: 20px;
				margin-top: 0;
			}
			50% {
				transform: rotate(180deg);
				margin-left: 20px;
				margin-top: 20px;
			}
			75% {
				transform: rotate(-90deg);
				margin-left: 0;
				margin-top: 20px;
			}
			100% {
				transform: rotate(0);
				margin-left: 0;
				margin-top: 0;
			}
		}
		.food {
			padding: 10px;
			font-size: 30px;
			background-color: #FF6347;
		}
	</style>
</head>
<body>
	<h1>蟻の巣作り</h1>
	<p>スマホで操作して蟻の巣を作っていく放置ゲームです。</p>
	<div id="colony"></div>
	<button onclick="addAnt()">蟻を追加する</button>
	<button onclick="addFood()">餌を追加する</button>
	<script>
		let colony = document.getElementById('colony');
		let antCount = 0;
		let foodCount = 0;

// 蟻を追加する関数
		function addAnt() {
			let ant = document.createElement('div');
			ant.className = 'ant';
			ant.textContent = '🐜';
			ant.style.top = Math.floor(Math.random() * colony.offsetHeight) + 'px';
			ant.style.left = Math.floor(Math.random() * colony.offsetWidth) + 'px';
			colony.appendChild(ant);
			antCount++;
		}

// 餌を追加する関数
		function addFood() {
			let food = document.createElement('div');
			food.className = 'food';
			food.textContent = '🍎';
			food.style.top = Math.floor(Math.random() * colony.offsetHeight) + 'px';
			food.style.left = Math.floor(Math.random() * colony.offsetWidth) + 'px';
			colony.appendChild(food);
			foodCount++;
		}

// 一定間隔で蟻が餌に向かう処理
		setInterval(function() {
			let ants = document.getElementsByClassName('ant');
			let foods = document.getElementsByClassName('food');
			for (let i = 0; i < ants.length; i++) {
				let ant = ants[i];
				let minDist = Infinity;
				let targetFood = null;
				for (let j = 0; j < foods.length; j++) {
					let food = foods[j];
					let dist = getDistance(ant, food);
					if (dist < minDist) {
						minDist = dist;
						targetFood = food;
					}
				}
				if (targetFood) {
					let dx = targetFood.offsetLeft - ant.offsetLeft;
					let dy = targetFood.offsetTop - ant.offsetTop;
					let angle = Math.atan2(dy, dx);
					let xSpeed = Math.cos(angle);
					let ySpeed = Math.sin(angle);
					let speed = 5;
					let left = ant.offsetLeft + (xSpeed * speed);
					let top = ant.offsetTop + (ySpeed * speed);
					ant.style.left = left + 'px';
					ant.style.top = top + 'px';
					if (getDistance(ant, targetFood) < 20) {
						targetFood.remove();
					}
				}
			}
		}, 100);

// 2つの要素間の距離を取得する関数
		function getDistance(el1, el2) {
			let x1 = el1.offsetLeft + (el1.offsetWidth / 2);
			let y1 = el1.offsetTop + (el1.offsetHeight / 2);
			let x2 = el2.offsetLeft + (el2.offsetWidth / 2);
			let y2 = el2.offsetTop + (el2.offsetHeight / 2);
			let dx = x2 - x1;
			let dy = y2 - y1;
			return Math.sqrt(dx * dx + dy * dy);
		}

// 初期状態として蟻5匹と餌5個を追加する
		for (let i = 0; i < 5; i++) {
			addAnt();
			addFood();
		}
	</script>
</body>
</html>