JavaScriptでライフゲームを作る方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでライフゲームを作る方法について現役エンジニアが解説しています。ライフゲームとは生命の誕生、進化、死をコンピュータ上で再現するシミュレーションするゲームです。HTMLのテーブルで升目を作成し、JavaScriptで操作してライフゲームを作成してみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでライフゲームを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでライフゲームを作る方法について詳しく説明していくね！
お願いします！
ライフゲームとは
ライフゲームとは生命の誕生、進化、死をコンピュータ上で再現するシミュレーション するゲームです。
単純なルールをもとに升目上に配置した点が現れたり消えたりすることで生命の生き死にを表現します。
マス目上の生命は単純なルールに沿って表示したり消えたりするだけなのですが、点で表現された生命が複雑な動きをすることもあり、とても奥の深いゲームです。
さらにライフゲームはチューリング完全であるため、現代のコンピュータに実現可能な計算はライフゲームでも可能という特徴があります。
ライフゲームの仕様
ライフゲームは２次元のマス目(セル)上に点で生命を表現します。生命が生きているとき点が表示され、死んでいるときは点が消えます。
生命は以下の4つのルールによって生き死にを繰り返していきます。
- 死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代が誕生する。
- 生きているセルに隣接する生きたセルが2つか3つならば、次の世代でも生存する。
- 生きているセルに隣接する生きたセルが1つ以下ならば、過疎により死滅する。
- 生きているセルに隣接する生きたセルが4つ以上ならば、過密により死滅する。
ライフゲームを作る方法
以下の手順でライフゲームを作っていきましょう。
- 生命が生存するためのマス目を作る。
- セルに初期状態の生命を配置するための仕組みを作る。
- 時間が進むごとに生命の生存ルールに沿って生命の生死状態を更新する。
では次では実際にプログラムを書いてみましょう。
実際に書いてみよう
以下のようにHTML, CSS, JavaScriptのコードを用意しました。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Life Game</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="buttons">
<button id="next">進める</button>
</div>
<div class="gird">
<table class="cells" border="1">
</table>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
CSS
table {
border: solid 1px #000000;
border-collapse: collapse;
}
tr {
height: 13px;
}
td {
width: 10px;
}
td.alive {
background-color: black;
}
td.death {
background-color: white;
}
JavaScript
'use strict';
const GRID_WIDTH = 16;
const GRID_HEIGHT = 16;
var cells = [];
// 細胞クラス
class Cell {
constructor(isAlive) {
this.isAlive = isAlive
}
}
main();
// エントリポイント
function main() {
// 次へボタン
$('#next').on('click', function() {
stepCellState();
});
// エリア描画
drawArea();
// セルの初期状態作成
createCells(cells);
updateCell();
// クリックしたセルの生存を反転させる
$('td').on('click', function() {
var x = $(this).attr('x');
var y = $(this).attr('y');
cells[y][x].isAlive = cells[y][x].isAlive ? false : true;
updateCell();
});
}
// セルの状態作成
function createCells(cells) {
for (var y = 0; y < GRID_HEIGHT; y++) {
var cellRow = [];
for (var x = 0; x < GRID_WIDTH; x++) {
var cell = new Cell(false);
cellRow.push(cell);
}
cells.push(cellRow);
}
}
// エリアの描画
function drawArea() {
$('table.cells').empty();
for (var y = 0; y < GRID_HEIGHT; y++) {
var row = $('<tr>');
for (var x = 0; x < GRID_WIDTH; x++) {
var col = $('<td x=' + x + ' y=' + y + '>');
row.append(col);
}
$('table.cells').append(row);
}
}
// セルの表示を更新
function updateCell() {
for (var y = 0; y < GRID_HEIGHT; y++) {
for (var x = 0; x < GRID_WIDTH; x++) {
var elem = $('td[x= '+ x + '][y=' + y + ']');
if (cells[y][x].isAlive) {
elem.removeClass("death");
elem.addClass("alive");
} else {
elem.removeClass("alive");
elem.addClass("death");
}
}
}
}
// セルの状態を進める
function stepCellState() {
console.log("next");
var nextStepSell = []; // 次ターンのセル状態
createCells(nextStepSell);
for (var y = 0; y < GRID_HEIGHT; y++) {
for (var x = 0; x < GRID_WIDTH; x++) {
nextStepSell[y][x].isAlive = checkCellAlive(x, y);
}
}
cells = nextStepSell;
updateCell();
}
// セルの生死の判断を行う
function checkCellAlive(x, y) {
var result = false;
// 周りにいくつ生きているセルが居るか判定
var aliveCount = 0;
// 左上
if (x > 0 && y > 0 && cells[y-1][x-1].isAlive) {
aliveCount++;
}
// 左
if (x > 0 && cells[y][x-1].isAlive) {
aliveCount++;
}
// 左下
if (x > 0 && y <= GRID_HEIGHT - 2 && cells[y+1][x-1].isAlive) {
aliveCount++;
}
// 下
if (y <= GRID_HEIGHT - 2 && cells[y+1][x].isAlive) {
aliveCount++;
}
// 右下
if (x <= GRID_WIDTH - 2 && y <= GRID_HEIGHT - 2 && cells[y+1][x+1].isAlive) {
aliveCount++;
}
// 右
if (x <= GRID_WIDTH - 2 && cells[y][x+1].isAlive) {
aliveCount++;
}
// 右上
if (x <= GRID_WIDTH - 2 && y > 0 && cells[y-1][x+1].isAlive) {
aliveCount++;
}
// 上
if (y > 0 && cells[y-1][x].isAlive) {
aliveCount++;
}
if (!cells[y, x].isAlive && aliveCount == 3) {
// 誕生判定
result = true;
} else if (cells[y, x].isAlive && aliveCount == 3 || aliveCount == 4) {
// 生存判定
result = true;
} else if (cells[y, x].isAlive && aliveCount <= 1) {
// 過疎判定
result = false;
} else if (cells[y, x].isAlive && aliveCount >= 4) {
// 過密判定
result = true;
}
return result;
}
HTMLファイルではマス目を表示するためのtableを配置してあります。JavaScriptでマス目の配置、マス目ごとの生存状態を管理を行っています。
進めるボタンを配置し、ボタンを押すと時間が進んでいきます。
ボタンを押すとcheckCellAlive関数によってすべてのセルの次ターンでの生存状態が更新されます。
ライフゲームでは以下のルールによってセルの生存状態が決まります。
- 誕生: 死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代が誕生する。
- 生存: 生きているセルに隣接する生きたセルが2つか3つならば、次の世代でも生存する。
- 過疎: 生きているセルに隣接する生きたセルが1つ以下ならば、過疎により死滅する。
- 過密: 生きているセルに隣接する生きたセルが4つ以上ならば、過密により死滅する。
セルをクリックするとセルの生存状態を切り替えることができるので、いろいろな生命のパターンを作って動かしてみましょう。
まとめ
今回のJavaScriptによるライフゲームの作り方はいかがでしたでしょうか。
このようにゲームを作成すると各ロジックの考え方、設計、実装の方法を沢山学ぶことが出来ます。学習にあたって既存のゲームをコピーしてみるというのはとてもいい学習方法です。
筆者プロフィール
| 黒木一志（くろきかずし）
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
