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つ以上ならば、過密により死滅する。
セルをクリックするとセルの生存状態を切り替えることができるので、いろいろな生命のパターンを作って動かしてみましょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
今回のJavaScriptによるライフゲームの作り方はいかがでしたでしょうか。
このようにゲームを作成すると各ロジックの考え方、設計、実装の方法を沢山学ぶことが出来ます。学習にあたって既存のゲームをコピーしてみるというのはとてもいい学習方法です。
筆者プロフィール
| 黒木一志（くろきかずし）
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
