+ {#if isJapanese}
+
チュートリアル
+
ライフゲームとは
+
+
+ ライフゲームは、1970年にイギリスの数学者ジョン・ホートン・コンウェイが考案した、生命を模した数理モデルです。
+
+ 格子状の盤面は生命が繁殖するフィールドで、黒いマスは生命を表します。
+
+ 生命は細菌のコロニーをイメージして、セル （英語で”細胞”の意味） と呼ばれます。
+
+ セルは、周りに他のセルが丁度いい数いると、お互い助け合って生存できます。
+
+ また、周りのセルと交配して、新しいセルを生み出すこともできます。
+
+ 時間が経つにつれて、セルの分布が複雑に変わってゆく様子を眺めましょう！
+
+
+
ライフゲームの４つのルール
+
+
+ 各セルには「生きたセル（黒）」と「死んだセル（白）」の２つの状態があります。
+
+ セルは周囲8マスの他のセルの状態によって、次の世代の状態が変わります。
+
+
+
+ -
+ 誕生: 死んだセルの周りの生きたセルが３つの場合、そのセルは次の世代で誕生し生きたセルになります。
+
+ -
+ 生存: 生きたセルの周りの生きたセルが２つか３つの場合、そのセルは次の世代も生存します。
+
+ -
+ 過疎: 生きたセルの周りの生きたセルが１つ以下の場合、そのセルは次の世代で過疎により死んだセルになります。
+
+ -
+ 過密: 生きたセルの周りの生きたセルが４つ以上ある場合、そのセルは次の世代で過密により死んだセルになります。
+
+
+
+
+ 
+
+
+
+ このルールは B3/S23 と簡略化して呼ばれます。
+
+ B3は誕生（Born）条件が３つの生きたセル、S23は生存（Survive）条件が２つまたは３つの生きたセルという意味です。
+
+
+
+
+
画面の構成と操作方法
+
+ 
+
+
+
① 画面の構成:
+
+ -
+ 中央の盤面: セルが繁殖するフィールドです。クリックまたはドラッグでセルの状態を変更できます。
+
+ -
+ 右側のコードエディタ: ライフゲームのロジックを制御するJavaScriptコードが表示されています。独自のルールを作成・適用できます。
+
+
+
+
② シミュレーション制御:
+
+ - 世代数: 現在のシミュレーションのステップ数が表示されます。
+ -
+ 速度コントロール（減速/x1/加速）: シミュレーションの進行速度を調整します。
+
+ - 再生/一時停止: シミュレーションを開始・停止します。
+
+
+
③ 盤面の操作:
+
+ -
+ 保存/ロード: 盤面を保存して他のユーザーに公開することや、他のユーザーが作成した盤面を読み込むことが可能です。
+
+ -
+ リセット/ランダム 盤面の状態をリセットしたり、セルをランダムに配置することができます。
+
+
+
+
④ コードエディタの操作:
+
+ - 適用: 編集中のコードをシミュレーションに反映します。
+ -
+ 保存/ロード: 現在適用されているコードを保存して他のユーザーに公開することや、他のユーザーが作成したコードを読み込むことが可能です。
+
+
+
+
⑤ テンプレート/ルール選択:
+
+ -
+ テンプレート: ライフゲームでは面白い振る舞いをする有名なパターンがいくつも見つかっており、テンプレートボタンでは、それらのパターンを盤面に配置することができます。
+
+ -
+ ルール選択: ut.code();のチームが作成したライフゲームのルールで遊べます。
+
+
+
+
⑥ 画面右上のアイコン:
+
+ - リセットアイコン: 編集したコードを初期状態に戻します。
+ - コードアイコン: コードエディタの表示・非表示を切り替えます。
+ - 疑問符アイコン: このヘルプ画面をいつでも再表示できます。
+ - 言語アイコン: 表示言語（日本語/英語）を切り替えます。
+
+
+
+
+
次に何をするかお悩みの方へ
+
ライフコードをより深く楽しむための5つのステップをご紹介します。
+
+ -
+ オリジナルルールで遊ぶ
+
+ まずは、オリジナルのライフゲームで遊んでみましょう。セルをドラッグして配置したり、「ランダム」ボタンを押したりして、セルの動きを観察してください。速さは自由に変えられます。
+
+
+ -
+ 有名なパターンを配置する
+
+ 次に、画面下の「テンプレート」ボタンから、有名なライフゲームのパターンを配置してみましょう。盤面サイズが足りない場合は、右側のコードエディター内の//盤面の大きさ
+ の boardSize
+ を変更してください。緑色に光った「適用」ボタンを押すと編集したコードが反映されます。
+
+
+ -
+ カスタムルールを体験する
+
+ 次に、画面下の「ルール選択」ボタンから、ut.code();
+ のチームが作成したライフゲームのルールを適用して遊んでみましょう。
+
+
+ -
+ コードを編集してルールを変える
+
+ まずは、//セルの色 の "black" や "white" を、"red", "blue", "green", "yellow", "pink",
+ "skyblue" などの他の色に変更し、「適用」ボタンを押してみましょう。
+
次に、//セルの誕生/生存条件 の birthCounts や survivalCounts
+ の中身を変更してみましょう。
+
たとえば、birthCounts = [3]; survivalCounts = [0, 1, 2, 3, 4];
+ にしたらどうなるでしょうか。「ランダム」ボタンを押して、セルの分布がどう変化するか見てみましょう！
+
+
+ -
+ 作品を保存・共有する
+
+ 自分で作った盤面やコードを保存して、他のユーザーに見てもらいましょう。また、他のユーザーが作った盤面やコードを読み込んで遊びましょう。
+
+
+
+
+
+ さあ、あなただけのライフゲームを作って遊びましょう！
+
+ {:else}
+
Tutorial
+
What is Game of Life ?
+
+
+ The Game of Life is a mathematical model simulating life, devised by the British
+ mathematician John Horton Conway in 1970.
+
+ The grid-like board is a field where life propagates, and the black squares represent living
+ entities.
+
+ These entities are called cells, conceived as a colony of bacteria.
+
+ A cell can survive by mutual assistance if a suitable number of other cells are present around
+ it.
+
+ It can also crossbreed with neighboring cells to create new ones.
+
+ Let's observe how the distribution of cells changes and grows more complex over time!
+
+
+
The Four Rules of Life Game
+
+
+ Each cell has two states: "alive (black)" and "dead (white)".
+
+ A cell's state in the next generation changes depending on the state of the other cells in
+ its surrounding 8 squares.
+
+
+
+ -
+ Birth: A dead cell becomes an alive cell in the next generation if it has
+ 3 alive neighbors.
+
+ -
+ Survival: An alive cell survives into the next generation if it has 2 or
+ 3 alive neighbors.
+
+ -
+ Underpopulation: An alive cell dies due to underpopulation in the next generation
+ if it has 1 or fewer alive neighbors.
+
+ -
+ Overpopulation: An alive cell dies due to overpopulation in the next generation
+ if it has 4 or more alive neighbors.
+
+
+
+
+ 
+
+
+
+ This set of rules is often called B3/S23 in shorthand.
+
+ B3 means the Born condition requires 3 alive neighbors, and S23 means the Survive condition
+ requires 2 or 3 alive neighbors.
+
+
+
+
+
Screen Layout and Operation
+
+
+ 
+
+
+
1. Screen Layout
+
+ -
+ Center Board: This is the field where cells propagate. Click or drag to
+ change a cell's state.
+
+ -
+ Right Code Editor: Displays the JavaScript code controlling the Game of
+ Life logic. You can create and apply your own rules.
+
+
+
+
2. Simulation Control:
+
+ - Generation: Shows the current simulation step count.
+ -
+ Speed Control (Decelerate/x1/Accelerate): Adjusts the simulation speed.
+
+ - Play/Pause: Starts or stops the simulation.
+
+
+
3. Board Operations:
+
+ -
+ Save/Load: You can save the board state and share it with other users, or
+ load boards created by others.
+
+ -
+ Reset/Random: You can reset the board state or arrange cells randomly.
+
+
+
+
4. Code Editor Operations:
+
+ -
+ Apply: Applies the code currently being edited to the simulation.
+
+ -
+ Save/Load: You can save the currently applied code and share it with other
+ users, or load code created by others.
+
+
+
+
5. Template/Rule Selection:
+
+ -
+ Template: Several famous patterns exhibiting interesting behavior in the
+ Game of Life have been discovered. The template button allows you to place these patterns
+ on the board.
+
+ -
+ Select Rule: Allows you to play with custom Game of Life rules created by
+ the ut.code(); team.
+
+
+
+
6. Top Right Icons:
+
+ - Reset Icon: Reverts the edited code back to its initial state.
+ - Code Icon: Toggles the display of the code editor.
+ - Questionmark Icon: Reopens this help screen at any time.
+ - Language Icon: Toggles the display language (Japanese/English).
+
+
+
Stuck on What to Do Next?
+
Here are five steps to enjoy Life Code more deeply.
+
+ -
+ Play with the Original Game of Life
+
+ Start by playing with the original Game of Life. Try dragging to place cells or
+ pressing the "Random" button to observe the cell movements. You can change the speed
+ freely.
+
+
+ -
+ Place Famous Patterns
+
+ Next, press the "Template" button at the bottom of the screen to place famous Game of
+ Life patterns. If the board size is insufficient, modify boardSize under
+ //盤面の大きさ in the code editor on the right. Press the green "Apply" button to
+ reflect your edited code.
+
+
+ -
+ Try Custom Rules
+
+ Next, use the "Select Rule" button at the bottom of the screen to apply custom Game of
+ Life rules created by the ut.code(): team.
+
+
+ -
+ Edit the Code and Change the Rules
+
+ First, try changing "black" or "white" under //セルの色 to another color, such as
+ "red", "blue", "green", "yellow", "pink", or "skyblue", and then press the "Apply"
+ button.
+
Next, try changing the contents of birthCounts and survivalCounts under
+ //セルの誕生/生存条件. For example, what happens if you set birthCounts = [3];
+ survivalCounts = [0, 1, 2, 3, 4]; ? Press the "Random" button and see how the cell
+ distribution changes!
+
+
+ -
+ Save and Share Your Creations
+
+ Save your custom boards and code to share them with other users. You can also load and
+ play with boards and code created by other users.
+
+
+
+
+
+ Enjoy creating your own game of life!
+
+ {/if}
+