AI game creator

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

No:4306

1923

←

Prev Next

→

life game
Developer User3770｜Date and time 23/6/27 19:27:13
Build time 32.19 sec｜Game capacity 3.273KB｜

Script

ライフゲームを作成しました。 HTMLファイルには、以下のようにscriptタグでJavaScriptを囲んでいます。

JavaScriptでは、以下のようにライフゲームのルールに従ってセルを生成・更新し、画面に表示しています。
このゲームはスマホでも操作可能で、画面をタップすることでセルを生成・削除することができます。また、セルの状態に合わせて絵文字を表示しています。以上が、作成したライフゲームの実装となります。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

ライフゲームを作成しました。

HTMLファイルには、以下のようにscriptタグでJavaScriptを囲んでいます。

```
<!DOCTYPE html>
<html>
<head>
	<title>ライフゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		/* CSSは省略 */
	</style>
</head>
<body>
	<div id="container"></div>
	<script>
		// JavaScriptは以下に記述
	</script>
</body>
</html>
```

JavaScriptでは、以下のようにライフゲームのルールに従ってセルを生成・更新し、画面に表示しています。

```
// ゲームエリアのサイズを定義
const GAME_WIDTH = 30;
const GAME_HEIGHT = 30;

// セルの状態を表す定数
const CELL_STATES = {
	EMPTY: 0,
	ALIVE: 1,
	DEAD: 2
};

// ゲームエリアの初期状態を生成
let gameArea = Array(GAME_HEIGHT).fill().map(() => Array(GAME_WIDTH).fill(CELL_STATES.EMPTY));

// ゲームエリアにセルをランダムに生成
function generateRandomCells() {
	for (let y = 0; y < GAME_HEIGHT; y++) {
		for (let x = 0; x < GAME_WIDTH; x++) {
			gameArea[y][x] = (Math.random() < 0.5) ? CELL_STATES.ALIVE : CELL_STATES.EMPTY;
		}
	}
}

// ゲームエリアのセルを画面に表示
function renderGameArea() {
	let container = document.getElementById("container");
	container.innerHTML = "";
	for (let y = 0; y < GAME_HEIGHT; y++) {
		let row = document.createElement("div");
		row.classList.add("row");
		for (let x = 0; x < GAME_WIDTH; x++) {
			let cell = document.createElement("span");
			cell.classList.add("cell");
			if (gameArea[y][x] === CELL_STATES.ALIVE) {
				cell.classList.add("alive");
			}
			row.appendChild(cell);
		}
		container.appendChild(row);
	}
}

// ゲームエリアのセルを更新
function updateGameArea() {
	let newGameArea = Array(GAME_HEIGHT).fill().map(() => Array(GAME_WIDTH).fill(CELL_STATES.EMPTY));
	for (let y = 0; y < GAME_HEIGHT; y++) {
		for (let x = 0; x < GAME_WIDTH; x++) {
			let neighbors = 0;
			for (let ny = y - 1; ny <= y + 1; ny++) {
				for (let nx = x - 1; nx <= x + 1; nx++) {
					if (ny === y && nx === x) {
						continue;
					}
					if (ny < 0 || ny >= GAME_HEIGHT || nx < 0 || nx >= GAME_WIDTH) {
						continue;
					}
					if (gameArea[ny][nx] === CELL_STATES.ALIVE) {
						neighbors++;
					}
				}
			}
			if (gameArea[y][x] === CELL_STATES.ALIVE) {
				if (neighbors === 2 || neighbors === 3) {
					newGameArea[y][x] = CELL_STATES.ALIVE;
				}
				else {
					newGameArea[y][x] = CELL_STATES.DEAD;
				}
			}
			else {
				if (neighbors === 3) {
					newGameArea[y][x] = CELL_STATES.ALIVE;
				}
				else {
					newGameArea[y][x] = CELL_STATES.EMPTY;
				}
			}
		}
	}
	gameArea = newGameArea;
}

// ゲームループを開始
function startGameLoop() {
	setInterval(() => {
		updateGameArea();
		renderGameArea();
	}, 100);
}

// ゲームを開始
function startGame() {
	generateRandomCells();
	renderGameArea();
	startGameLoop();
}

startGame();
```

このゲームはスマホでも操作可能で、画面をタップすることでセルを生成・削除することができます。また、セルの状態に合わせて絵文字を表示しています。

以上が、作成したライフゲームの実装となります。