Module pédagogique · Détail

Défense cellulaire – Conway contre l'invasion

Ce module combine les automates cellulaires, la modélisation d'états et des mécaniques de jeu simples dans un prototype fonctionnel HTML/CSS/JS. L'accent est mis sur la manière dont des règles locales, des structures de données et des extensions progressives aboutissent à une logique de jeu compréhensible.

Durée 180 minutes
Le prototype existant crée un point de départ commun où les états, règles et extensions peuvent être immédiatement suivis. Ainsi, il ne s'agit pas de mettre en place un projet, mais plutôt que la justification ciblée et le test des modifications du code prennent centrage. Codage avec IA
Langue HTML
Test en ligne Demo
Image prévisualisation : Défense cellulaire – Conway contre l'invasion

Format du cours

Prototype First avec Codage par IA

Le module est intégré dans un format Prototype-First : le point de départ est un prototype déjà fonctionnel, qui est développé davantage en étapes claires. Le Codage avec IA-support est intégré didactiquement comme outil pour des modifications ciblées, explications d'erreurs et développement vérifiable du statut actuel du projet.

Développement structuré

Le prototype existant crée un point de départ commun où les états, règles et extensions peuvent être immédiatement suivis. Ainsi, il ne s'agit pas de créer un projet, mais plutôt de raisonner et tester ciblement des modifications de code.

Utilisation didactique de l’IA

Ici, le codage avec IA est compris comme un soutien contextuel qui prend en charge les fichiers, fonctions et objectifs visibles existants. Pour l'enseignement, cela crée un cadre où les prompts, modifications et versions peuvent être reflétés professionnellement et reliés à des résultats testables immédiatement.

Classification didactique

Le module est classé de manière compacte, tant sur le plan professionnel que pratique, pour l’enseignement.

Fixation d'objectifs professionnels

Au centre se trouve la modélisation d’une grille, dont l’état est décrit à l’aide de listes, clés de coordonnées et objets simples. Les règles de Conway mènent aux calculs locaux des voisins et sont reliées aux états du jeu, à l’énergie, au déplacement des adversaires et à la reconnaissance de motifs dans une simulation croissante étape par étape.

Développement des compétences

  • Pensée algorithmique : Comptage des voisins, transitions d’états et règles simples de mouvement sont systématiquement implémentées.
  • Modélisation des données : Grille, noyau, cellules vivantes, adversaires et motifs sont représentés à l’aide de structures de données appropriées.
  • Tests et réflexion : Chaque extension reste liée au comportement visible et peut être immédiatement vérifiée.
  • Travail ultérieur structuré : Le prototype est étendu en jalons clairement définis sans perdre de vue la logique sous-jacente.

Valeur ajoutée pour l’enseignant

  • Le point de départ exécutable réduit les barrières d'entrée et crée de l'espace pour l'analyse, la variation et l'expansion.
  • La séquence des tâches soutient une organisation claire de la leçon avec des résultats intermédiaires vérifiables.
  • Les extensions telles que la bibliothèque de motifs, les vagues d'ennemis ou le chronomètre permettent la différenciation grâce à des objectifs supplémentaires liés au sujet.

Flux de leçon

Les tâches sont présentées dans l'ordre du JSON et organisées didactiquement.

1

L'écran de démarrage et l'état du jeu se complètent mutuellement.

Cette étape introduit un modèle d'état explicite en séparant la préparation, la simulation en cours et la pause. Cela crée une base pour attribuer logiquement plus tard des fonctions telles que les vagues, le chronomètre ou la fin du jeu.

2

Cellules dotées de limites d'énergie

Le placement libre des cellules est limité par un modèle de ressources. Cela clarifie comment les variables pour les valeurs maximales, les remboursements et les règles de réinitialisation sont cohérentement liées à l'interaction en grille.

3

Préparation de la bibliothèque de motifs pour des formes cellulaires stables

La bibliothèque de motifs convertit les formes cellulaires telles que le bloc, le tub, le bateau ou l'abeille en une structure de données explicite. Cette étape relie les motifs visuels aux grilles 0/1 et prépare des blocs de construction réutilisables pour la logique ultérieure de placement et de reconnaissance.

4

Insérer les motifs cellulaires terminés avec un clic

Les motifs préparés sont convertis en une action de grille vérifiée. Les limites, les cases occupées, le noyau, les ennemis et les coûts énergétiques montrent clairement comment les entrées sont validées avant tout changement d'état.

5

Élargir les données des ennemis et préparer les vagues

Les ennemis évoluent des placeholders fixes vers des objets structurés avec des propriétés telles que la vie, la vitesse ou le symbole. Une fonction vague prépare des situations de jeu répétables et renforce la compréhension des listes d'objets créés.

6

Déplacer les ennemis vers le noyau

Le mouvement des ennemis introduit une logique cible simple sur le raster. Par tour, une coordonnée est modifiée afin que la distance au noyau diminue et que la simulation devienne plus dynamique.

7

Reconnaître un bloc 2x2 comme motif bouclier

Le scanner évolue du simple retour d'information général à une reconnaissance ciblée de motifs. Le bloc stable 2x2 convient pour approfondir les relations voisines et parcourir systématiquement le raster.

8

Reconnaître la ligne de trois comme motif impulsion

La reconnaissance des motifs s'étend aux lignes horizontales et verticales. Comparer plusieurs types de motifs permet de distinguer les procédures similaires et rend la logique du scanner plus différenciée.

9

Marquer les motifs comme cellules défensives

Les motifs reconnus reçoivent une représentation visible propre sans remplacer l'évolution normale des cellules. Cela renforce la séparation entre état de base et état dérivé.

10

Implémenter des attaques simples des tours

Les motifs marqués comme défensifs reçoivent leurs effets dans le système de jeu pour la première fois. Une portée et une règle de dommage délibérément simples montrent comment une structure reconnue devient une action algorithmique.

11

Gagner de l'énergie via les motifs défensifs actifs

Le système d'énergie est lié à la réussite des défenses. Cela crée un retour d'information compréhensible impliquant placement, effet, impact et retour limité d'énergie.

12

Ajouter les dégâts au noyau et la fin du jeu

Le noyau reçoit des points de vie et ainsi une condition de perte claire. Cette étape clarifie comment les collisions ou l'atteinte d'un ennemi se traduisent en dégâts, distance et arrêt de la simulation.

13

Afficher les points et le progrès des vagues

Les points et le progrès des vagues ajoutent un feedback visible sur les actions réussies. La difficulté croissante après chaque vague mène à une logique de progression simple.

14

Ajouter des rounds automatiques avec un chronomètre

L'évolution manuelle est étendue par un mécanisme de démarrage/arrêt avec un rythme fixe. Cela rend la différence entre le contrôle pas à pas et la simulation automatisée professionnellement visible.

15

Améliorer la difficulté, les animations et la vue mobile

La conclusion regroupe les réglages fins de fonctionnement, les retours visuels et l'affichage sur des écrans étroits. La fonctionnalité professionnelle réside dans le fait de considérer la qualité technique et l'ergonomie comme partie d'un projet achevé.

Extrait de code

Le fragment montre le noyau professionnel du composant : à partir des règles locales du voisinage, on crée l'état suivant de la grille cellulaire.

 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 compterVoisinsVivants(x, y) {
  let count = 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;
}
Les règles de cellule, les motifs et les états du jeu sont progressivement reliés pour former une simulation compréhensible.

Ce module fournit une structure claire des tâches pour l'organisation des leçons, l'analyse du code et la vérification des résultats. Il est possible de différencier grâce à des extensions telles qu'une bibliothèque de motifs, les vagues d'ennemis, un chronomètre ou des améliorations d'affichage.

Demander un accès démo et tester le module dans votre propre contexte de cours.

Inscrivez-vous maintenant et testez-le gratuitement