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

No:1474

319

←

Prev Next

→

Either the mountains or the sea will take you to t..ALL
Developer sayaensm｜Date and time 23/6/18 17:11:19
Build time 58.285 sec｜Game capacity 4.606KB｜

Script

以下は、山と海から選んで進むライフゲームです。スマホ対応しています。

山と海どちらを選んでも火の中に連れていかれる

ゲームの概要：コンウェイのライフゲームを実装しました。スタートボタンを押すと、ランダムに一部のセルが黒く表示されます。セルは4つのルールに基づき、一定のループごとに白くなり、黒くなります。このゲームは、どちらを選んでも最終的に消滅します。

←

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>
		body {
			background-color: #87CEEB;
			font-size: 30px;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		#container {
			width: 100%;
			height: 100%;
		}
		#grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
			grid-template-rows: repeat(auto-fill, minmax(10px, 1fr));
			width: 70%;
			height: 70%;
			margin: auto auto;
			border: 2px solid black;
			border-radius: 10px;
		}
		.cell {
			background-color: white;
			border: 1px solid #87CEEB;
			border-radius: 5px;
		}
		.btn {
			background-color: white;
			color: #87CEEB;
			border: 2px solid #87CEEB;
			border-radius: 20px;
			font-size: 20px;
			padding: 10px;
			margin: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>山と海どちらを選んでも火の中に連れていかれる</h1>
	<div id="container">
		<div id="grid"></div>
		<button class="btn" onclick="startGame()">スタート</button>
		<button class="btn" onclick="stopGame()">ストップ</button>
	</div>
	<script>
		const numRows = 50;
		const numCols = 50;
		let grid = createGrid();
		let interval;

// ボタンクリックでゲームを開始する。ランダムにセルを生き返らせる。
		function startGame() {
			if (!interval) {
				interval = setInterval(runGame, 100);
				for (let row = 0; row < numRows; row++) {
					for (let col = 0; col < numCols; col++) {
						let rand = Math.floor(Math.random() * 2);
						grid[row][col] = rand;
						let cell = document.getElementById(row + "-" + col);
						if (rand === 1) {
							cell.style.backgroundColor = "black";
						} else {
							cell.style.backgroundColor = "white";
						}
					}
				}
			}
		}

// ゲームを停止する
		function stopGame() {
			clearInterval(interval);
			interval = null;
		}

// 50x50のグリッドを作成する
		function createGrid() {
			let grid = new Array(numRows);
			for (let row = 0; row < numRows; row++) {
				grid[row] = new Array(numCols);
				for (let col = 0; col < numCols; col++) {
					grid[row][col] = 0;
				}
			}
			createCells(grid);
			return grid;
		}

// グリッド上のセルを作成する
		function createCells(grid) {
			const gridElement = document.getElementById('grid');
			gridElement.style.gridTemplateColumns = `repeat(${numCols}, 1fr)`;
			gridElement.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;
			for (let row = 0; row < numRows; row++) {
				for (let col = 0; col < numCols; col++) {
					const cell = document.createElement('div');
					cell.setAttribute('id', `${row}-${col}`);
					cell.classList.add('cell');
					cell.addEventListener('click', () => {
						cell.style.backgroundColor = (cell.style.backgroundColor === 'white') ? 'black' : 'white';
						grid[row][col] = (grid[row][col] === 1) ? 0 : 1;
					});
					gridElement.appendChild(cell);
				}
			}
		}

// ゲームを進行させる
		function runGame() {
			let newGrid = createGrid();
			for (let row = 0; row < numRows; row++) {
				for (let col = 0; col < numCols; col++) {
					let numNeighbors = countNeighbors(grid, row, col);
					if (grid[row][col] === 1) {
						if (numNeighbors < 2 || numNeighbors > 3) {
							newGrid[row][col] = 0;
							let cell = document.getElementById(row + "-" + col);
							cell.style.backgroundColor = "white";
						} else {
							newGrid[row][col] = 1;
						}
					} else {
						if (numNeighbors === 3) {
							newGrid[row][col] = 1;
							let cell = document.getElementById(row + "-" + col);
							cell.style.backgroundColor = "black";
						} else {
							newGrid[row][col] = 0;
						}
					}
				}
			}
			grid = newGrid;
		}

// セルの周りにある生きたセルの数を返す
		function countNeighbors(grid, x, y) {
			let sum = 0;
			for (let i = -1; i < 2; i++) {
				for (let j = -1; j < 2; j++) {
					let row = (x + i + numRows) % numRows;
					let col = (y + j + numCols) % numCols;
					sum += grid[row][col];
				}
			}
			sum -= grid[x][y];
			return sum;
		}
	</script>
</body>
</html>

ゲームの概要： コンウェイのライフゲームを実装しました。スタートボタンを押すと、ランダムに一部のセルが黒く表示されます。 セルは4つのルールに基づき、一定のループごとに白くなり、黒くなります。 このゲームは、どちらを選んでも最終的に消滅します。