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

No:958

149

←

Prev Next

→

life game
Developer User3180｜Date and time 23/6/17 23:09:33
Build time 53.726 sec｜Game capacity 4.192KB｜

Script

ライフゲーム

生きているセルをクリックすると、死んでいるセルになります。死んでいるセルをクリックすると、生きているセルになります。

開始ボタンを押すと、セルの状態が一定時間ごとに更新されます。セルの生死は以下のルールに従います。

生きているセルの周囲に2つまたは3つの生きているセルがある場合、そのセルは生きたまま。
生きているセルの周囲に2つ未満または4つ以上の生きているセルがある場合、そのセルは死んでしまう。
死んでいるセルの周囲にちょうど3つの生きているセルがある場合、そのセルは生き返る。

楽しんでください！

←

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: 3vw;
			text-align: center;
			background-color: #f8f8f8;
		}
		
		.grid {
			display: inline-block;
			margin: 2vw;
			border: 1px solid #ccc;
			box-shadow: 0 0 1vw #ddd;
			background-color: white;
		}
		
		.cell {
			display: inline-block;
			width: 1.5vw;
			height: 1.5vw;
			border: 1px solid #ccc;
			background-color: #f8f8f8;
		}
		
		.play {
			margin-top: 2vw;
		}
		
		.button {
			display: inline-block;
			padding: 1vw 2vw;
			background-color: #F5A623;
			border-radius: 5px;
			color: white;
			font-size: 2vw;
			cursor: pointer;
		}
		
		.button:hover {
			background-color: #E3910D;
		}
	</style>
	<script>
		var rows = 30;
		var cols = 30;
		var grid = new Array(rows);
		var intervalID;
		var playing = false;
		
		function createGrid() {
			var gridContainer = document.getElementById("gridContainer");
			for (var row = 0; row < rows; row++) {
				grid[row] = new Array(cols);
				for (var col = 0; col < cols; col++) {
					var cell = document.createElement("div");
					cell.classList.add("cell");
					cell.setAttribute("id", row + "_" + col);
					cell.setAttribute("onclick", "toggleLife(this)");
					gridContainer.appendChild(cell);
					grid[row][col] = false;
				}
				gridContainer.appendChild(document.createElement("br"));
			}
		}
		
		function toggleLife(cell) {
			var id = cell.getAttribute("id").split("_");
			var row = Number(id[0]);
			var col = Number(id[1]);
			if (grid[row][col]) {
				cell.style.backgroundColor = "#f8f8f8";
			} else {
				cell.style.backgroundColor = "#3ED0F5";
			}
			grid[row][col] = !grid[row][col];
		}
		
		function play() {
			playing = !playing;
			if (playing) {
				document.getElementById("playButton").innerHTML = "一時停止";
				intervalID = setInterval(nextGeneration, 500);
			} else {
				document.getElementById("playButton").innerHTML = "開始";
				clearInterval(intervalID);
			}
		}
		
		function nextGeneration() {
			var newGrid = new Array(rows);
			for (var row = 0; row < rows; row++) {
				newGrid[row] = new Array(cols);
				for (var col = 0; col < cols; col++) {
					newGrid[row][col] = false;
					var count = countNeighbors(row, col);
					if (grid[row][col]) {
						if (count === 2 || count === 3) {
							newGrid[row][col] = true;
						}
					} else {
						if (count === 3) {
							newGrid[row][col] = true;
						}
					}
					var cell = document.getElementById(row + "_" + col);
					if (newGrid[row][col]) {
						cell.style.backgroundColor = "#3ED0F5";
					} else {
						cell.style.backgroundColor = "#f8f8f8";
					}
				}
			}
			grid = newGrid;
		}
		
		function countNeighbors(row, col) {
			var count = 0;
			for (var i = -1; i <= 1; i++) {
				for (var j = -1; j <= 1; j++) {
					if (!(i === 0 && j === 0)) {
						var r = row + i;
						var c = col + j;
						if (r >= 0 && r < rows && c >= 0 && c < cols) {
							if (grid[r][c]) {
								count++;
							}
						}
					}
				}
			}
			return count;
		}
		
		window.onload = createGrid;
	</script>
</head>
<body>
	<h1>ライフゲーム</h1>
	<div class="gridContainer" id="gridContainer"></div>
	<div class="play">
		<button class="button" id="playButton" onclick="play()">開始</button>
	</div>
	<p>生きているセルをクリックすると、死んでいるセルになります。死んでいるセルをクリックすると、生きているセルになります。</p>
	<p>開始ボタンを押すと、セルの状態が一定時間ごとに更新されます。セルの生死は以下のルールに従います。</p>
	<ul>
		<li>生きているセルの周囲に2つまたは3つの生きているセルがある場合、そのセルは生きたまま。</li>
		<li>生きているセルの周囲に2つ未満または4つ以上の生きているセルがある場合、そのセルは死んでしまう。</li>
		<li>死んでいるセルの周囲にちょうど3つの生きているセルがある場合、そのセルは生き返る。</li>
	</ul>
	<p>楽しんでください！</p>
</body>
</html>