Lesson module · Detail

Cell Defense – Conway against the Invasion

This module combines cell automata, state modeling, and simple game mechanics in a functional HTML/CSS/JS prototype. The focus is on how local rules, data structures, and step-by-step extensions lead to understandable game logic.

Time 180 minutes

The existing prototype creates a common starting point where states, rules, and extensions can be immediately followed. This way, it's not about setting up a project, but rather the targeted justification and testing of code changes take center stage. AI Coding

Language HTML

Online testing Demo

Preview image: Cell Defense – Conway against the Invasion

Course format

Prototype First with AI Coding

The module is embedded in a Prototype-First format: The starting point is an already functional prototype, which is further developed in clear development steps. The AI Coding-support is didactically integrated as a tool for targeted changes, error explanation, and verifiable further development of the existing project status.

Structured development

The existing prototype creates a common starting point where states, rules, and extensions can be immediately followed up on. This way, it's not about setting up a project, but rather about targeted reasoning and testing of code changes.

Didactically embedded AI usage

Here, KI-Coding is understood as context-dependent support that picks up existing files, functions, and visible goals. For teaching, this creates a framework where prompts, changes, and versions can be reflected in a professional manner and connected with immediately testable results.

Didactic classification

The module is compactly classified both professionally and practically for teaching.

Professional goal setting

At the center is the modeling of a grid, whose state is described using lists, coordinate keys, and simple objects. The Conway rules lead to local neighborhood calculations and are connected with game states, energy, opponent movement, and pattern recognition in a step-by-step growing simulation.

Competence development

Algorithmic thinking: Neighborhood counting, state transitions, and simple movement rules are systematically implemented.
Data modeling: Grid, core, living cells, opponents, and patterns are represented using suitable data structures.
Testing and reflection: Each extension remains bound to visible behavior and can be immediately checked.
Structured further work: The prototype is extended in clearly defined milestones without losing sight of the underlying logic.

Teacher's added value

The executable starting point reduces barriers to entry and creates space for analysis, variation, and expansion.
The task sequence supports a clear lesson organization with verifiable intermediate results.
Extensions such as the pattern library, enemy waves, or timer enable differentiation through additional goals that are linked to the subject matter.

Lesson flow

The tasks are presented in the order of the JSON and didactically ordered.

Start screen and game state complement each other

This step introduces an explicit state model by separating preparation, running simulation, and pause from each other. This creates a foundation for later functions such as waves, timer, and game end to be logically assigned.

Cells set with energy limits

The free placement of cells is limited by a resource model. This makes it clear how variables for maximum values, reimbursement, and reset rules are consistently connected with raster interaction.

Preparing the pattern library for stable cell forms

The pattern library converts cell forms such as block, tub, boat, and beehive into an explicit data structure. The step connects visual patterns with 0/1-rasters and prepares reusable building blocks for later placement and recognition logic.

Insert finished cell patterns with a click

The prepared patterns are converted into a checked raster action. Limits, occupied fields, core, enemies, and energy costs clearly show how inputs are validated before state changes.

Expand enemy data and prepare waves

Enemies are developed from fixed placeholders to structured objects with properties such as life, speed, or symbol. A wave function prepares repeatable game situations and strengthens the understanding of created object lists.

Move enemies towards core

Enemy movement introduces a simple target logic on the raster. Per round, a coordinate is changed so that the distance to the core decreases and the simulation becomes more dynamic.

Recognize 2x2-block as shield pattern

The scanner is expanded from general feedback to targeted pattern recognition. The stable 2x2-block is suitable for deepening neighborhood relationships and systematic raster traversal.

Recognize 3-line as impulse pattern

Pattern recognition is extended by horizontal and vertical lines. Comparing multiple pattern types supports distinguishing similar test procedures and makes the scanner logic more differentiated.

Mark patterns as defense cells

Recognized patterns receive a visible own representation without replacing normal cell evolution. This sharpens the separation between basic state and derived state.

Implement simple tower attacks

The marked defense patterns receive effects in the game system for the first time. A deliberately simple range and damage rule shows how a recognized structure becomes an algorithmic action.

Earn energy through active defense patterns

The energy system is linked to successful defense with this. This creates a comprehensible feedback loop of placement, effect, hit, and limited energy return.

Core damage and game over are added

The core receives life points and thus a clear loss condition. The step makes it clear how collisions or enemy target achievement translate into damage, distance, and simulation stop.

Show points and wave progress

Points and wave progress add visible feedback on successful actions. The increasing difficulty after completed waves leads to simple progression logic.

Add automatic rounds with a timer

The manual evolution is expanded by a start-stop mechanism with a fixed rhythm. This makes the difference between single-step control and automated simulation professionally visible.

Improve difficulty, animation, and mobile view

The conclusion bundles fine-tuning of operation, visual feedback, and display on narrow screens. The professional function lies in considering technical quality and usability as part of a completed project.

Code snippet

The fragment shows the professional core of the component: From local neighborhood rules, the next state of the cell grid is created.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function lebendeNachbarnZaehlen(x, y) {
  let anzahl = 0;
  for (let dy = -1; dy <= 1; dy = dy + 1) {
    for (let dx = -1; dx <= 1; dx = dx + 1) {
      if (dx !== 0 || dy !== 0) {
        if (istLebendig(x + dx, y + dy)) {
          anzahl = anzahl + 1;
        }
      }
    }
  }
  return anzahl;
}
function evolutionAusfuehren() {
  const naechsteZellen = [];
  for (let y = 0; y < hoehe; y = y + 1) {
    for (let x = 0; x < breite; x = x + 1) {
      const nachbarn = lebendeNachbarnZaehlen(x, y);
      const lebendig = istLebendig(x, y);
      if (lebendig && (nachbarn === 2 || nachbarn === 3)) naechsteZellen.push(schluessel(x, y));
      if (!lebendig && nachbarn === 3) naechsteZellen.push(schluessel(x, y));
    }
  }
  lebendeZellen = naechsteZellen;
}

Cell rules, patterns, and game states are gradually connected to form a comprehensible simulation.

This module provides a clear task structure for lesson organization, code analysis, and result verification. Differentiation is possible through extensions such as pattern library, enemy waves, timer, or display improvements.

Request a demo access and test the module in your own course context.