0
LienLe jeu de la vie.

Type : Site Web - Posté le
Le jeu de la vie.

Bien l'bonjour !

Aujourd'hui, nouvel article, nouveau site, nouveau jeu ! Je vous présente "Le jeu de la vie".
Au premier abord, le nom du jeu peut faire prétentieux, mais pas du tout, c'est enfaite un principe de jeu très intéressant.

Avant de commencer à parler du jeu à proprement parler, je souhaiterais juste expliquer comment j'ai eu l'idée de développer ce jeu.
C’est très simple, je suis un vidéaste très intéressant sur Youtube.
De son pseudo "ScienceEtonnante", il partage des vidéos de vulgarisation autour de la science.
C'est donc grâce à l'une de ses vidéos ( Ci-dessous ), dans laquelle il parle de ce fameux jeu, que j'ai eu l'idée de le développer en version Web.



Pour essayer d'expliquer simplement le fonctionnement de ce jeu, commençons par les bases ( Pour jouer sur le site ).
Le jeu se joue sur une grille de carrés blancs, comme ci-dessous.



Sur cette grille, vous allez pouvoir ajouter des carrés noirs ( En cliquant sur les carrés blancs ).
Une fois que vous considérez avoir assez de points ( Vous pouvez essayer de dessiner une forme par exemple ), vous allez pouvoir réellement voir le jeu en action en lançant la simulation.
Pour cela, rien de plus simple, vous n'avez qu’à cliquer sur le bouton "Play".



C'est là que la partie vraiment intéressante commence.
Après avoir cliqué sur le bouton, une série de -Ce que je vais appeler des générations- va se lancer ( Infinies en soi ).
A chaque génération, le site va évoluer selon trois règles extrêmement simples :
- Si un carré blanc est entouré de trois autres carrés noirs, alors il devient noir.
- Si un carré blanc est entouré de deux autres carrés blancs, alors il reste blanc.
- Si un carré noir est entouré de moins de deux carrés blancs ou plus de trois carrés noirs, alors il devient blanc.

En gardant ces règles en tête, regardez maintenant l'évolution que prend le jeu, c'est dingue !



Je trouve vraiment ça ouf, mais ça, ce n'est que le début. Voici du coup, quelques configurations que j'ai essayé suivant la vidéo de ScienceEtonnante ( Que je vous invite à essayer par vous-même ).







Des exemples comme cela, vous pouvez en trouver plein d'autres sur Google !
J'ai aussi ajouté un bouton permettant de générer des carrés de manière aléatoire.



Bref, le principe est vraiment intéressant. Maintenant, je vais vous expliquer un peu les différents boutons disponibles sur le site.



Sur le screen ci-dessus, on remarque trois "scrollbars" ( Un en haut, un à gauche, un à droite ) :
- Celui du haut permet de définir la quantité de carrés affichés sur le site ( Attention, plus vous augmentez la quantité, plus le site risque de laguer ).
- Celui de gauche vous permet de gérer le nombre de carrés noirs / blancs lorsque vous cliquez sur le bouton pour la génération aléatoire.
- Celui de droite permet de changer la vitesse entre chaque génération ( Attention aussi, plus vous l'augmentez, plus vous risquez de laguer ).

Pour terminer, les quelques boutons du site non cités :
- L'icône du nuage vous permet de sauvegarder localement une configuration de carrés de départ.
- L'icône de la gomme vous permet de vider la zone des carrés.
- Et le dernier vous permet de retrouver et charger toutes les configurations que vous avez pu enregistrer.

Voilà qui termine la présentation de ce site que j'ai vraiment adoré développer.
D'ailleurs, sur ce projet, j'ai eu l'occasion d'utiliser Canvas, que j'ai déjà utilisé dans d'autres projets :
- https://www.luluwebmaster.fr/creation-40/un-debut-de-jeu-en-canvas-deuxieme-test-canvas.htm
- https://www.luluwebmaster.fr/creation-47/premiers-tests-de-minis-jeux-en-canvas-r-html.htm
- https://www.luluwebmaster.fr/creation-54/lulu-io-le-nouveau-agar-io.htm

Pour conclure en beauté cet article, voici un screen d'exemple faisable avec le jeu de la vie ( Basé encore une fois seulement sur les trois règles citées plus haut ) !
Note : Le jeu n'a pas été optimisé pour des structures aussi grosses.



Allez, sur ce à très vite pour un prochain projet !

Poster un commentaire