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

«Game of Life» de Conway & # x27;

尊渡假赌尊渡假赌尊渡假赌
Libérer: 2025-02-22 08:49:09
original
384 Les gens l'ont consulté

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):

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;
}
Copier après la connexion

Interface utilisateur:

l'interface utilisateur simple consiste à:

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

HTML Exemple:

<button type="button" value="generate next" id="btnNext">Generate Next</button>
<canvas id="gameboard"></canvas>
Copier après la connexion

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 de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal