Eğitim Teknolojileri (EdTech)

LifeGrid: Conway'in Yaşam Oyunu Simülatörü

warningProblem

"Show HN: Stacked Game of Life"

psychologyPotansiyel Çözüm

Conway'in Yaşam Oyunu'nu interaktif, görsel ve öğretici bir platformda sunan bir SaaS uygulaması. Kullanıcılar, oyunu çalıştırmak, farklı başlangıç desenleri oluşturmak, analiz etmek ve hatta kendi karmaşık yaşam oyunları topluluklarını yönetmek için gelişmiş araçlara sahip olacaklar. Uygulama, teorik bilgisayar bilimi ve yapay yaşam üzerine ilgi duyanlar için bir öğrenme ve deney alanı sunmayı hedefler.

groupHedef Kitle

Bilgisayar bilimleri öğrencileri, programlamaya ilgi duyanlar, yapay yaşam ve otomat teorisi meraklıları, matematik ve fizik alanında çalışan araştırmacılar. Bu kitle genellikle 18-35 yaş aralığında, teknolojiye yatkın ve öğrenmeye istekli bireylerden oluşur. Harcama güçleri öğrencilik ve erken kariyer dönemlerine göre değişkenlik gösterse de, eğitimsel araçlara ve ilgi alanlarına yatırım yapmaya eğilimlidirler.

paymentsGelir Modeli

Freemium modeli. Temel simülasyon ve desen yükleme özellikleri ücretsizdir. 'Pro' sürümü (aylık/yıllık abonelik - örn: 5$/ay veya 50$/yıl) daha büyük ızgaralar, gelişmiş analiz araçları (örn: desen sınıflandırması, ömür boyu hesaplama), desen kütüphanesine erişim ve özel projeler için API erişimi sunar.

Aksiyon Planı

Etkileşimli Conway'in Yaşam Oyunu ızgarası (başlatma, durdurma, adım adım ilerletme)

Farklı başlangıç desenleri yükleme ve kaydetme özelliği

Oyun hızı ve boyutunu ayarlama seçenekleri

Temel analiz araçları (canlı hücre sayısı, nesiller)

Pazar Analizi

8.3Puan

Kaynak: Hacker Newsopen_in_new

AI Prompt

Create a single-page, client-side rendered (SPA) web application using HTML, CSS, and JavaScript. The application should implement Conway's Game of Life.

Core Functionality:
1. **Grid Representation**: A 2D grid (e.g., using a `<canvas>` element for performance) representing the cells. Each cell can be 'alive' or 'dead'.
2. **Game Logic**: Implement the rules of Conway's Game of Life:
* Any live cell with fewer than two live neighbours dies (underpopulation).
* Any live cell with two or three live neighbours lives on to the next generation.
* Any live cell with more than three live neighbours dies (overpopulation).
* Any dead cell with exactly three live neighbours becomes a live cell (reproduction).
3. **User Controls**:
* **Start/Stop Button**: To begin and pause the simulation.
* **Step Button**: To advance the simulation by one generation.
* **Clear Button**: To reset the grid to all dead cells.
* **Randomize Button**: To fill the grid with a random pattern of live/dead cells.
* **Grid Size Input**: Allow the user to specify the width and height of the grid (e.g., using number inputs).
* **Speed Control**: A slider or input to control the simulation speed (delay between generations).
4. **Interaction**: Allow users to click on individual cells in the grid to toggle their state (alive/dead) before starting the simulation or when paused.
5. **Visuals**: Ensure clear visual distinction between live and dead cells. Use CSS for styling the overall page layout, controls, and potentially a border for the grid container.

Technical Requirements:
* **SPA**: The entire application should run in the browser without page reloads.
* **Vanilla JavaScript**: Use plain JavaScript, no external frameworks or libraries (like React, Vue, jQuery, etc.).
* **Canvas API**: Use the HTML5 Canvas API for efficient rendering of the grid.
* **Responsive Design**: Basic responsiveness to fit different screen sizes is a plus, but the core functionality is priority.
* **Code Structure**: Organize the JavaScript code logically, perhaps using functions or a simple object-oriented approach for clarity.

**HTML Structure**:
* A container for the game controls (buttons, inputs, slider).
* A `<canvas>` element for the game grid.

**CSS Styling**:
* Basic styling for the page, buttons, inputs, and canvas container.
* Clear visual difference for live/dead cells when rendered on canvas.

**JavaScript Logic**:
* Functions for initializing the grid, updating cell states based on rules, rendering the grid on canvas, handling user input, and managing the simulation loop (using `requestAnimationFrame` or `setInterval`).
* Event listeners for all user interactions.