Maison >interface Web >js tutoriel >«Game of Life» de Conway & # x27;

«Game of Life» de Conway & # x27;

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌original
2025-02-22 08:49:09391parcourir

Cet article explore "Game of Life" de John Conway, un automate cellulaire classique, et montre comment implémenter une version minimaliste utilisant HTML, CSS et JavaScript au sein d'un navigateur Web. Traditionnellement un exercice de programmation, cette approche tire parti des capacités de navigateur modernes pour une expérience rationalisée.

Concepts de base:

Le jeu de la vie simule les formulaires de vie sur une grille. Chaque cellule est soit "vivante" (peuplée) ou "morte" (vide). L'état de la prochaine génération est déterminé par des règles simples basées sur les voisins de chaque cellule:

  • Naissance: Une cellule morte avec exactement trois voisins vivants deviennent vivants.
  • survie: Une cellule vivante avec deux ou trois voisins vivants survit.
  • MORT: Une cellule vivante avec moins de deux ou plus de trois voisins en direct meurt.

Cela conduit à divers résultats: extinction, populations stables, schémas oscillants ou évolution imprévisible.

Implémentation:

Une implémentation Web de base utilise une toile HTML pour afficher la grille. Un bouton déclenche le calcul et l'affichage de la prochaine génération. La logique de base implique d'itréger la grille, de compter les voisins et d'appliquer les règles pour déterminer l'état suivant de chaque cellule. Le code utilise des tableaux JavaScript pour gérer les états cellulaires.

Conway's “Game of Life”

Exemple d'extrait de code (javascript):

<code class="language-javascript">adjacent = countAdjacent(i, j);
switch (generationThis[i][j]) {
  case 0: // Dead cell
       if (adjacent == 3) {
         generationNext[i][j] = 1; // Birth
       }
       break;
  case 1: // Live cell
       if (adjacent == 2 || adjacent == 3) {
         generationNext[i][j] = 1; // Survival
       }
       break;
}</code>

Interface utilisateur:

l'interface utilisateur simple consiste à:

  • a <canvas></canvas> élément pour rendre la grille.
  • un bouton ("générer suivant") pour passer à la génération suivante.

HTML Exemple:

<code class="language-html"><button type="button" value="generate next" id="btnNext">Generate Next</button>
<canvas id="gameboard"></canvas></code>

Le code JavaScript gère la logique du jeu, y compris l'initialisation de la grille (génération de graines), le calcul des générations suivantes et la mise à jour de l'affichage du canevas. La détection des états stables (extinction, état d'équilibre, oscillation) peut être mise en œuvre en comparant les générations successives.

Exploration plus approfondie:

Bien que cet article présente une version minimaliste, des implémentations plus complexes pourraient incorporer des fonctionnalités telles que la saisie de l'utilisateur pour la configuration initiale du réseau, plusieurs formulaires de vie et des règles plus sophistiquées. La simplicité de Game of Life dément sa complexité surprenante et continue de fasciner les programmeurs et les mathématiciens.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn