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

No:2406

170

←

Prev Next

→

GA
Developer User3544｜Date and time 23/6/21 10:35:13
Build time 69.084 sec｜Game capacity 5.978KB｜

Script

We have created a simulation game using The players are、The goal is to pass on the seeds and grow your own flowers. Seeds are randomly generated and、Each has a different shape and color. The shape and color of the flower changes depending on how it is grown, and、To grow the desired flowers, genetic algorithms are used to select、Mating、Mutation must be performed. The UI is easy to operate on a smartphone and、Pictograms are used to represent flowers, seeds, etc. Have fun growing flowers.、Get the desired flowers! Specific implementations are as follows

Genetic Algorithm Flower Growing Game

Species List

Ones own flower

Operation

←

Prev　Next

→ 　

Back　

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

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

を用いたシミュレーションゲームを作成しました。プレイヤーは、種を受け継いで自分の花を育てることが目的です。種はランダムに生成され、それぞれ異なる形状や色を持ちます。育て方によって花の形や色が変化し、目的の花を育てるためには遺伝的アルゴリズムを駆使して選択、交配、突然変異を行う必要があります。スマホでも操作しやすいUIを採用し、絵文字で花や種などを表現しています。楽しく花を育てて、目的の花を手に入れましょう！具体的な実装は以下の通りです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>遺伝的アルゴリズム花育成ゲーム</title>
	<style>
		body {
			font-size: 2em;
			text-align: center;
			background-color: #fffacd;
		}
	</style>
</head>
<body>
	<header>
		<h1>遺伝的アルゴリズム花育成ゲーム</h1>
	</header>
	<main>
		<section>
			<h2>種の一覧</h2>
			<div id="seed-list"></div>
		</section>
		<section>
			<h2>自分の花</h2>
			<div id="flower"></div>
		</section>
		<section>
			<h2>操作</h2>
			<button id="select-parents">両親の選択</button>
			<button id="breed">交配</button>
			<button id="mutate">突然変異</button>
		</section>
	</main>
	<script>
		// 初期化
		var seeds = [];
		var flower = null;

// 種の生成
		function generateSeeds(num) {
			var emojis = [🌷, 🌹, 🌺, 🌻, 🌼, 🌸];
			for (var i = 0; i < num; i++) {
				var shape = Math.floor(Math.random() * 5) + 1;
				var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
				var emoji = emojis[Math.floor(Math.random() * emojis.length)];
				var seed = {
					shape: shape,
					color: color,
					emoji: emoji
				};
				seeds.push(seed);
			}
		}

// 花の生成
		function generateFlower() {
			var shape = Math.floor(Math.random() * 5) + 1;
			var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
			var emoji = "🌷";
			flower = {
				shape: shape,
				color: color,
				emoji: emoji
			};
			updateFlower();
		}

// 花の更新
		function updateFlower() {
			var flowerDiv = document.querySelector("#flower");
			flowerDiv.innerHTML = flower.emoji + "<br>形：" + flower.shape + "<br>色：" + flower.color;
		}

// 両親の選択
		var parent1 = null;
		var parent2 = null;
		var selectedParents = false;

// 交配
		var child = null;

// 突然変異
		function mutate() {
			if (child == null) {
				alert("まず交配して子を生成してください");
				return;
			}
			var mutationType = Math.floor(Math.random() * 2); // 0:形、1:色
			if (mutationType == 0) {
				var mutationAmount = Math.floor(Math.random() * 3) - 1; // -1〜1
				child.shape += mutationAmount;
				alert("形が" + (mutationAmount >= 0 ? "+" : "") + mutationAmount + "変化しました");
			} else {
				var mutationAmount = Math.floor(Math.random() * 16) - 8; // -8〜7
				var colorInt = parseInt(child.color.slice(1), 16);
				var mutatedColorInt = colorInt + mutationAmount;
				if (mutatedColorInt < 0) {
					mutatedColorInt = 0;
				} else if (mutatedColorInt > 16777215) {
					mutatedColorInt = 16777215;
				}
				var mutatedColor = mutatedColorInt.toString(16).slice(0, 6);
				child.color = "#" + mutatedColor;
				alert("色が" + (mutationAmount >= 0 ? "+" : "") + mutationAmount + "変化しました");
			}
			updateChild();
		}

// 子の更新
		function updateChild() {
			var seedListDiv = document.querySelector("#seed-list");
			seedListDiv.innerHTML = "";
			var childDiv = document.createElement("div");
			childDiv.innerHTML = child.emoji + "<br>形：" + child.shape + "<br>色：" + child.color + "<br>親1：" + child.parents[0].emoji + "<br>親2：" + child.parents[1].emoji;
			seedListDiv.appendChild(childDiv);
		}

// 初期化処理
		generateSeeds(6);
		generateFlower();

// イベントハンドラの登録
		var selectParentsButton = document.querySelector("#select-parents");
		selectParentsButton.addEventListener("click", selectParents);
		var breedButton = document.querySelector("#breed");
		breedButton.addEventListener("click", breed);
		var mutateButton = document.querySelector("#mutate");
		mutateButton.addEventListener("click", mutate);
	</script>
</body>
</html>