https://github.com/ytak-sagit/game-of-life-react

コンウェイのライフゲームをReactで実装
https://github.com/ytak-sagit/game-of-life-react

biome bun game-of-life react typescript vite

Last synced: 17 days ago
JSON representation

コンウェイのライフゲームをReactで実装

• Host: GitHub
• URL: https://github.com/ytak-sagit/game-of-life-react
• Owner: ytak-sagit
• License: apache-2.0
• Created: 2024-07-27T06:15:10.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-11-16T11:07:24.000Z (about 2 months ago)
• Last Synced: 2024-11-16T12:17:50.197Z (about 2 months ago)
• Topics: biome, bun, game-of-life, react, typescript, vite
• Language: TypeScript
• Homepage: https://ytak-sagit.github.io/game-of-life-react/
• Size: 160 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# game-of-life-react

[![Apache-2.0 License](https://img.shields.io/github/license/ytak-sagit/game-of-life-react)](https://github.com/ytak-sagit/game-of-life-react/blob/master/LICENSE)

コンウェイのライフゲーム（Conway's Game of Life）を React で実装した、Single Page Application（SPA）です。

## 🔧技術スタック一覧



  

  

  

  

  

  

  

  

  

  

  



## 📂ディレクトリ構成

`/app/src/` 配下は、[bulletproof-react](https://github.com/alan2207/bulletproof-react/tree/master) の考え方に基づくディレクトリ構成を採用しています。

- ただし、テストコードは現状、`/app/tests/` 配下で分けて管理しています（テスト用の `tsconfig.json` を分けるため）。

## 🌐アプリケーションのURL

GitHub Pages にアプリケーションをデプロイして公開しています。興味のある方はアクセスして、遊んでみてください。

- https://ytak-sagit.github.io/game-of-life-react/

### 遊び方

- 画面の初期表示時は、セルがランダムに配置されます。

- セルの描画領域（シャーレ）のサイズは「縦128セル x 横128セル」で固定です。

- 各セルをクリックすることで、セルの生死状態を切り替えることができます。

  - 「生存」セルは ![#00ff2a](https://placehold.co/12x12/00ff2a/00ff2a.png) 、「死滅」セルは ![#333333](https://placehold.co/12x12/333333/333333.png) で表現しています。

- [Start]ボタンを押すと、ライフゲームのルールに基づくセルの生死判定と次世代セルの描画を自動で行います。

  - 自動処理中は、[Stop]ボタンを押す以外の操作は行えません。

- [Stop]ボタンを押すと、生死判定および自動描画が停止します。

- [Next]ボタンを押すと、1世代分だけセルの生死判定と描画を行います。

- 現在の世代数は、画面上の `Generation is #N` の部分で確認できます（`N` が世代数）。

- [Reset]ボタンを押すと、世代数とシャーレ上のセルの生死状態をリセットします。

  - 世代数は0に、セルはすべて「死滅」状態にします。

- 特定のパターンを選択してシャーレ上に描画できます（初期値は「ランダム」）。

  - 世代数の右横のプルダウンリストから、描画したいパターンを選択してください。

  - 選択後、世代数とシャーレ上のセルの生死状態をリセットした後で、パターンを描画します。

### 制限事項

- セルの生死状態をドラッグ操作によって変更することはできません。

- [Start]ボタン押下時の自動描画のスピードは固定です。変更することはできません。

### その他

- ダークモード・ライトモードでの表示に対応しています。