<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="lifegame.css">
<script type="text/javascript" src="lifegame.js"></script>
</head>
<body>
<script type="text/javascript">
game = LifeGameApp.appendLifeGameWithRecreatorAfterLastScriptNode(30, 30);
//game = LifeGameApp.appendLifeGameAfterLastScriptNode(30, 30); //再作成ボタン無しの場合
// 初期配置(必要なら)
game.model.put(10, 10,
["** ",
" **",
" * "
]);
// 開始(最初からスタートさせるなら)
game.control.start();
</script>
...
</body>
</html>
すべてはLifeGameAppの中に定義してあります。主にLifeGameApp.GameWithRecreator、LifeGameApp.Game、LifeGameApp.Model、LifeGameApp.View、LifeGameApp.Controlといったクラスによって構成されています。
(LifeGameApp.)GameWithRecreatorクラスは上の再作成バーとGameを含みます。Recreateボタンを押すと、Gameオブジェクトを完全に作り直します。
GameクラスはModel, View, Controlを含み、それぞれが連携するようにします。
Modelクラスはwidth*heightの配列です(this.cells)。内容が変化したときにthis.funcUpdateを呼ぶようになっています。
Viewクラスはテーブルでセルの状態を表示します。コンストラクタでtable、tr、tdを生成します。update(cells)でセルの状態に合わせてtdのclassNameを書き換えます(実際の見え方はcssの定義によります)。マウスによるセルの編集が出来るように、イベントリスナーを登録するメソッドを持ちます。
Controlクラスはスタート/ストップボタンやクリアボタンをユーザーに提供します。タイマーによって定期的にModelのstepを呼び出す処理も今のところControlが行っています(本来GameやModelが行うべきかもしれません。ボタン類を表示しないようにしたい場合を考えると特に。でもGameやModelがやるのも何か嫌なので、「時間進行役」みたいな意味のクラスを作るべきかも)。