JavaScriptでライフゲーム作った
こんばんは。
前回の更新から一週間経たずにまた更新です。実際短期間な。
タイトルにもある通り、JSでライフゲーム作りました。
コーディング欲が満たされてとても良いです。
縦横の長さを指定してボタンを押すと始まります。
停止ボタンを押すと止まります。そのうち再開ボタンつけたいです。
300x300まで動くことを確認済みです。1000x1000投げたら落ちました。
とある方が10万x10万とか投げてサーバに負担を与えようとしていましたが、ローカル実行なので自分の首締めるだけです。
圧倒的な自信がある方やマゾヒスト以外はやめましょう。
興味のある方は以下のURLへアクセスしてください。
ライフゲーム -roadagain.org-
今回の苦労話
- HTML5のcanvasタグを初めて触りました。絵とか図形とか描けて便利です。
- JSLintがいちいちうるさい。他人のコーディング規約を守らされるのとても辛いです。インクリメント使わせて。
- Bracketsのライブプレビューがちょくちょく接続エラー吐きました。でもその後10秒くらいで何故か繋がる不思議。
- 配列のコピーにconcatを使いましたが、シャローコピーだったので世代を進めるときおかしな挙動してました。
ちなみにソースコードはこんな感じです。
変数名おかしかったりしますがご容赦下さい。
var play; function initcell(width, height) { 'use strict'; var elem = document.getElementById('cell'); elem.width = width * 10; elem.height = height * 10; } function drawcell(x, y, cellstate) { 'use strict'; var cellbox = document.getElementById('cell').getContext('2d'); cellbox.fillStyle = cellstate === true ? 'Lime' : 'Black'; cellbox.fillRect(x * 10 - 10, y * 10 - 10, 10, 10); } function next(x, y, cell) { 'use strict'; var cnt, i, j; cnt = 0; for (i = -1; i <= 1; i += 1) { for (j = -1; j <= 1; j += 1) { if (cell[x + i][y + j] === true) { cnt += 1; } } } if (cell[x][y] === true) { cnt -= 1; } if (cnt === 3 && cell[x][y] === false) { drawcell(x, y, true); return true; } else if ((cnt < 2 || 3 < cnt) && cell[x][y] === true) { drawcell(x, y, false); return false; } else { return cell[x][y]; } } function stopgameoflife() { 'use strict'; window.clearInterval(play); } function gameoflife() { 'use strict'; var width = Math.floor(document.format.width.valueAsNumber), height = Math.floor(document.format.height.valueAsNumber), cell, i, j; stopgameoflife(); cell = []; for (i = 0; i < width + 2; i += 1) { cell[i] = []; cell[i][0] = cell[i][height + 1] = false; } for (j = 0; j < height + 2; j += 1) { cell[0][j] = cell[width + 1][j] = false; } for (i = 1; i <= width; i += 1) { for (j = 1; j <= height; j += 1) { cell[i][j] = (Math.random() >= 0.5); } } initcell(width, height); for (i = 1; i <= width; i += 1) { for (j = 1; j <= height; j += 1) { drawcell(i, j, cell[i][j]); } } play = window.setInterval(function () { var tmp, i, j; tmp = []; for (i = 0; i < width + 2; i += 1) { tmp[i] = []; for (j = 0; j < height + 2; j += 1) { tmp[i][j] = cell[i][j]; } } for (i = 1; i <= width; i += 1) { for (j = 1; j <= height; j += 1) { tmp[i][j] = next(i, j, cell); } } for (i = 1; i <= width; i += 1) { for (j = 1; j <= height; j += 1) { cell[i][j] = tmp[i][j]; } } }, 100); }