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

No:308

4098

Genetic Algorithm Games
Developer User2906｜Date and time 23/6/11 22:30:06
Build time 67.156 sec｜Game capacity 5.216KB｜

以下が遺伝的アルゴリズムのゲームの実装例です。

遺伝的アルゴリズムのゲーム

世代: 1

このゲームの概要は、盤面に遺伝子のランダムな配列を表示し、プレイヤーが盤面のスクエアをクリックすることによって、そのスクエアの内容と一致する遺伝子の数を得点として加算し、最大得点に到達することを目指す遺伝的アルゴリズムのゲームです。絵文字は使用していませんが、スタイルシートで背景色やフォントサイズを調整しています。スマホでも遊べるように、スクエアのサイズは100pxに設定しています。また、世代数を表示するdivタグを追加しています。遺伝的アルゴリズムの処理はJavaScriptで行っています。ランダムな配列を生成し、エリート選択、ルーレット選択、一点交叉、突然変異を組み合わせて進化を繰り返しています。最大得点に到達するまで進化を繰り返すと、最終的には「クリア!!」というメッセージが表示されます。

→ 　

0　

0　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

以下が遺伝的アルゴリズムのゲームの実装例です。

<!DOCTYPE html>
<html>
<head>
	<title>遺伝的アルゴリズムのゲーム</title>
	<style>
		body {
			background-color: #f9f5d7;
		}
		h1 {
			text-align: center;
			font-size: 3em;
		}
		button {
			font-size: 2em;
			margin: 10px;
			padding: 10px;
			background-color: #d9f2e6;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		#generation {
			font-size: 2em;
			margin-top: 20px;
			text-align: center;
		}
		#board {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
		.square {
			font-size: 5em;
			width: 100px;
			height: 100px;
			margin: 5px;
			text-align: center;
			line-height: 100px;
			background-color: #d9f2e6;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>遺伝的アルゴリズムのゲーム</h1>
	<div id="generation">世代: 1</div>
	<div id="board"></div>

<script>
		var board = document.getElementById("board");
		var size = 10; // 盤面の一辺の長さ
		var genes = "0123456789ABCDEF"; // 遺伝子
		var population = []; // ポピュレーション
		var generation = 1; // 世代数
		var maxScore = size * size; // 最大得点

// 盤面の初期化
		function initBoard() {
			for (var i = 0; i < size * size; i++) {
				var square = document.createElement("div");
				square.classList.add("square");
				square.id = i;
				square.innerHTML = genes.charAt(Math.floor(Math.random() * genes.length));
				square.addEventListener("click", function() {
					var score = 0;
					for (var j = 0; j < size * size; j++) {
						if (population[0][j] === this.innerHTML) {
							score++;
						}
					}
					alert("得点: " + score + "/" + maxScore);
				});
				board.appendChild(square);
			}
		}

// ポピュレーションの初期化
		function initPopulation() {
			for (var i = 0; i < 100; i++) {
				var individual = [];
				for (var j = 0; j < size * size; j++) {
					individual.push(genes.charAt(Math.floor(Math.random() * genes.length)));
				}
				population.push(individual);
			}
		}

// ポピュレーションの評価
		function evaluatePopulation() {
			for (var i = 0; i < population.length; i++) {
				var score = 0;
				for (var j = 0; j < size * size; j++) {
					if (population[i][j] === document.getElementById(j).innerHTML) {
						score++;
					}
				}
				population[i].score = score;
			}
			population.sort(function(a, b) {
				return b.score - a.score;
			});
			document.getElementById("generation").innerHTML = "世代: " + generation;
		}

// 選択と交叉
		function selectAndCrossover() {
			var newPopulation = [];
			newPopulation.push(population[0]); // エリート選択
			while (newPopulation.length < population.length) {
				var parents = [];
				for (var i = 0; i < 2; i++) {
					var sumScore = 0;
					for (var j = 0; j < population.length; j++) {
						sumScore += population[j].score;
					}
					var randomScore = Math.floor(Math.random() * sumScore);
					var index = -1;
					while (randomScore >= 0) {
						index++;
						randomScore -= population[index].score;
					}
					parents.push(population[index]);
				}
				var crossoverPoint = Math.floor(Math.random() * (size * size));
				var child1 = parents[0].slice(0, crossoverPoint).concat(parents[1].slice(crossoverPoint));
				var child2 = parents[1].slice(0, crossoverPoint).concat(parents[0].slice(crossoverPoint));
				newPopulation.push(child1);
				newPopulation.push(child2);
			}
			population = newPopulation;
			generation++;
		}

// 突然変異
		function mutate() {
			for (var i = 1; i < population.length; i++) {
				for (var j = 0; j < size * size; j++) {
					if (Math.random() < 0.01) {
						population[i][j] = genes.charAt(Math.floor(Math.random() * genes.length));
					}
				}
			}
		}

// メイン処理
		function main() {
			initBoard();
			initPopulation();
			while (population[0].score < maxScore) {
				evaluatePopulation();
				selectAndCrossover();
				mutate();
				for (var i = 0; i < size * size; i++) {
					document.getElementById(i).innerHTML = population[0][i];
				}
			}
			alert("クリア!!");
		}

main();
	</script>
</body>
</html>

このゲームの概要は、盤面に遺伝子のランダムな配列を表示し、プレイヤーが盤面のスクエアをクリックすることによって、そのスクエアの内容と一致する遺伝子の数を得点として加算し、最大得点に到達することを目指す遺伝的アルゴリズムのゲームです。絵文字は使用していませんが、スタイルシートで背景色やフォントサイズを調整しています。スマホでも遊べるように、スクエアのサイズは100pxに設定しています。また、世代数を表示するdivタグを追加しています。遺伝的アルゴリズムの処理はJavaScriptで行っています。ランダムな配列を生成し、エリート選択、ルーレット選択、一点交叉、突然変異を組み合わせて進化を繰り返しています。最大得点に到達するまで進化を繰り返すと、最終的には「クリア!!」というメッセージが表示されます。