https://github.com/okamyuji/conway-game
A full-stack implementation of Conway's Game of Life using Spring Boot and HTML5 Canvas, featuring user management, game state persistence, and interactive grid manipulation with classic patterns support.
https://github.com/okamyuji/conway-game
cellular-automaton conway-game-of-life game-of-life html5-canvas java javascript postgresql security spring-boot-3
Last synced: 3 months ago
JSON representation
A full-stack implementation of Conway's Game of Life using Spring Boot and HTML5 Canvas, featuring user management, game state persistence, and interactive grid manipulation with classic patterns support.
- Host: GitHub
- URL: https://github.com/okamyuji/conway-game
- Owner: okamyuji
- Created: 2025-01-13T05:17:11.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-13T20:16:10.000Z (5 months ago)
- Last Synced: 2025-01-29T03:56:20.549Z (5 months ago)
- Topics: cellular-automaton, conway-game-of-life, game-of-life, html5-canvas, java, javascript, postgresql, security, spring-boot-3
- Language: Java
- Homepage:
- Size: 55.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Conway's Game of Life
このプロジェクトは、John Conway氏が考案したライフゲーム（Conway's Game of Life）のWeb実装版です
生命の誕生、進化、死滅のプロセスをシミュレートする0プレイヤーゲームです
## 🎮 ゲームの概要
ライフゲームは、以下のシンプルなルールに従って、セルの生死が決定される「セルオートマトン」の一種です
### ルール
1. **誕生**: 死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代で誕生
2. **生存**: 生きているセルに隣接する生きたセルが2つか3つあれば、次の世代でも生存
3. **過疎**: 生きているセルに隣接する生きたセルが1つ以下の場合、過疎により死滅
4. **過密**: 生きているセルに隣接する生きたセルが4つ以上の場合、過密により死滅
### 特徴
- グリッドの端はループしており、画面の左端と右端、上端と下端がつながっています
- 30x30のグリッドサイズで実装されています
- ゲームの状態を保存し、後で再開することができます
## 🕹 操作方法
### 基本操作
- **セルのクリック**: クリックしたセルの状態を切り替え（生存⇔死滅）
- **Start**: シミュレーションを開始
- **Stop**: シミュレーションを停止
- **Clear**: グリッドをクリアし、全てのセルを死滅状態に
- **Random**: ランダムにセルを配置（約30%の確率で生存セルを配置）
### ゲームの保存と読み込み
1. 保存したい状態でシミュレーションを停止
2. 保存名を入力
3. Saveボタンをクリック
4. 保存したゲームは画面下部のリストに表示され、Loadボタンで読み込み可能
### ボタンの状態
- シミュレーション実行中は、Start、Clear、Random、Saveボタンが無効
- セルが1つも生存していない場合、Clearボタンが無効
- 保存名が入力されていない場合、Saveボタンが無効
- シミュレーション停止中は、Stopボタンが非表示
## 🛠 技術スタック
- **フロントエンド**:
- HTML5 Canvas
- JavaScript (ES6+)
- CSS3
- **バックエンド**:
- Spring Boot 3.4.1
- Spring Security
- Spring Data JPA
- **データベース**:
- PostgreSQL
- **ビルドツール**:
- Maven
## 🚀 セットアップ方法
1. 必要条件:
- Java 21
- Maven
- PostgreSQL
2. データベースの準備:
```sql
CREATE DATABASE conway_game;
```
3. アプリケーションの起動:
```bash
mvn spring-boot:run
```
4. ブラウザでアクセス:
```shell
http://localhost:8080
```
## 👥 ユーザー管理
- 初回起動時に管理者アカウントが自動作成されます
- ユーザー名: admin
- パスワード: admin
- 管理者は他のユーザーの作成、編集、削除が可能
- ユーザーアカウントには有効期限を設定可能
## 🔒 セキュリティ
- Spring Securityによる認証・認可
- パスワードはBCryptでハッシュ化
- CSRF対策実装済み
- セッション管理による安全な認証
## 🎨 推奨パターン
ライフゲームには、特徴的な振る舞いを示す様々なパターンが存在します。以下のパターンは、ゲームの基本的な法則を理解するのに最適な入門用パターンです
1. **ブリンカー（点滅）**
```shell
■■■
```
- 最もシンプルな振動子（オシレーター）パターン
- 3つのセルが縦横に交互に切り替わり続けます
- 2世代周期で元の状態に戻ります
- 振動子の基本的な性質を理解するのに最適です
2. **グライダー（滑空機）**
```shell
□■□
□□■
■■■
```
- 最も基本的な移動パターン（スペースシップ）
- 4世代かけて1マス斜めに移動します
- 移動中にパターンが変化しながらも、元の形に戻ります
- 無限グリッドでは永遠に同じ方向に進み続けます
- パターンの移動と変形の関係を理解するのに役立ちます
3. **ビーコン（信号機）**
```shell
■■□□
■■□□
□□■■
□□■■
```
- 2x2の正方形が2つ向かい合ったパターン
- 2世代周期で内側の角が点滅します
- 安定した構造（2x2の正方形）と振動部分が共存する例
- より複雑なパターンの構成要素としても使われます
4. **ブロック（静止）**
```shell
■■
■■
```
- 最もシンプルな静止パターン（スティルライフ）
- 世代が変わっても形が変化しない安定構造
- 他のパターンと組み合わせて使用されることが多い基本要素
5. **船（軽量級宇宙船/LWSS）**
```shell
□■■■■
■□□□■
□□□□■
■□□■□
```
- グライダーより大きな移動パターン
- 4世代周期で水平に移動します
- より複雑なスペースシップの基本形
- 他のパターンと相互作用する際の振る舞いが興味深い
### パターンの応用
これらの基本パターンを組み合わせることで、より複雑で興味深い振る舞いを作り出すことができます：
- **信号機と反射板**
ビーコンの周りにブロックを配置することで、信号の伝播を制御できます
- **グライダーガン**
複数のパターンを組み合わせて、定期的にグライダーを生成する装置を作れます
- **グライダーの衝突**
2つのグライダーを衝突させることで、様々な新しいパターンが生成されます
### 実験のヒント
1. まずは基本パターンの振る舞いをじっくり観察しましょう
2. パターン同士の距離を変えながら相互作用を観察してみましょう
3. 基本パターンに少しだけセルを追加/削除して、どう変化するか試してみましょう
4. 独自のパターンを作り出す際は、これらの基本パターンを参考にしてみましょう
これらのパターンを理解し、実験することで、ライフゲームの奥深さと創造性を体験することができます。