Jeu de la vie en Javascript

hichams Messages postés 5 Statut Membre -  
hichams Messages postés 5 Statut Membre -
Bonjour,

j'ai essayé de faire le jeu de la vie en Javascript mais je crois que je ne pourrai pas avancer + sans aide.
Je suis parti sur un Jeu de la Vie avec voisinage de Moore (la cellule change selon les 8 autour d'elle).
Code couleur blanc pour les cellules en vie et noir pour les cellules mortes. Et voilà les règles:
- si n (nombre de cellules voisines en vie) <2 ou >3 alors l'état suivant de la cellule est "mort" (cellule noire)
- si n = 2, l'état de la cellule ne changera pas
- si n = 3, l'état suivant de la cellule est "en vie" (cellule blanche)

Comme vous pourrez le constater, seule la cellule ligne 1 colonne 1 fonctionne comme prévu peu importe la taille du tableau.
Je vous partage sans plus attendre mon résultat : 
<!DOCTYPE html>
<html>
<body>
<style>
table {
 height: 300px;
 width: 300px;
 margin: 0; padding: 0;
 border-collapse: collapse;
 }
td { border: 1px solid #A4A4A4;
 border-spacing: 0;
 height: 30px;
 width: 10px;
 margin: 0; padding: 0;
    }
.black  { background: #000000;}
.white { background: #FFFFFF;}
</style>
<input type="button" id="acte" value="start" onclick="controle();" style="position:absolute;margin-top:140px;margin-left:350px;"/>
<script>
var col = 3; row = 3; started = 0;

document.write("<table class='table'>")
for (i=0; i<row; i++) {
   document.write("<tr>");
   for (j=0; j<col; j++) {
     document.write("<td class='black' onclick='swap(this)' id='l" + i + "c" + j +"'></td>");}
    document.write("</tr>");}
document.write("</table>");

function controle(){
 //fonction qui permet de faire une pause
 if (started==1){
  document.getElementById('acte').value="continue";
  started=0;}
    else{
  document.getElementById('acte').value="stop";
  started=1;
  change();}
}
function swap(cell){ 
    if (cell.className == "black"){
        cell.className = "white";}
    else if (cell.className == "white"){
        cell.className = "black";}
}
function change(){
 for (i= 1; i<row-1; i++){
     for (j= 1; j<col-1; j++){
         var n=0;
            for (x= 0; x<3; x++){
             for (y= 0; y<3; y++){
                 if(document.getElementById('l'+x+'c'+y).className == "white"){n++;}
                    //alert(n+'l'+x+'c'+y);
             }
            }
            //alert(n+'l'+i+'c'+j);
        if(document.getElementById('l'+i+'c'+j).className == "white"){n--;}
        if(n<2 || n>3){(document.getElementById('l'+i+'c'+j).className = "black");}
        else if(n==3) {(document.getElementById('l'+i+'c'+j).className = "white");}
        }
 }
    setTimeout('start();',1000);  //se rapelle
}
</script>
</body>
</html>
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Bonjour,

Premier souci: 
setTimeout('start();',1000);  //se rapelle

La fonction "start" n'existe pas dans le code que tu nous montres.

Ensuite... tu gères les cellules "autour" .. mais comment fais tu pour celles qui sont sur les bords ?

0
hichams Messages postés 5 Statut Membre
 
Oui, désolé, j'aurais du enlever cette ligne avant de poster.
Mais je doute qu'il y ait un lien avec le reste.

Celles qui sont au bord ... Je sais pas en fait. Mais même sans les bords, en rajoutant des cases au tableau (en modifiant juste le nombre de colonnes et lignes) il n'y a toujours que la ligne 1 colonne 1 qui respecte les règles et ça me dépasse ... Je bloque totalement.
0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
C'est étrange... quand j'ai testé.. je n'avais que la cellule centrale qui changeait ....
Pense, lorsque tu apportes des modifications à des scripts JS (ou à du css au passage....) à vider le cache de ton navigateur.
En attendant, ajoute des console.log dans ton code pour essayer de voir ce qui s'y passe. ça devrait t'aider à comprendre ce qui bloque dans ton code.
Si tu ne trouves pas, décrit (étape par étape) le fonctionnement du code voulu. Ce n'est qu'après cette phase de réflexion que l'on peut réellement écrire correctement son code et, si besoin, expliquer son besoin aux autres.
0
hichams Messages postés 5 Statut Membre
  
<!DOCTYPE html>
<html>
<body>
<style>
table {
 height: 300px;
 width: 300px;
 margin: 0; padding: 0;
 border-collapse: collapse;
 }
td { border: 1px solid #A4A4A4;
 border-spacing: 0;
 height: 30px;
 width: 10px;
 margin: 0; padding: 0;
    }
.black  { background: #000000;} // couleur cellule morte
.white { background: #FFFFFF;} // couleur cellule vivante
</style>
<input type="button" id="acte" value="start" onclick="controle();" style="position:absolute;margin-top:140px;margin-left:350px;"/>  //bouton start pour lancer
<script>
var col = 3; row = 3; started = 0;

document.write("<table class='table'>")
for (i=0; i<row; i++) {
   document.write("<tr>");
   for (j=0; j<col; j++) {
     document.write("<td class='black' onclick='swap(this)' id='l" + i + "c" + j +"'></td>");}
    document.write("</tr>");}
document.write("</table>");

function controle(){
    //fonction qui est censée permettre de faire une pause
    if (started==1){
       document.getElementById('acte').value="continue";
        started=0;}
    else{
        document.getElementById('acte').value="stop";
        started=1;
        change();}
} //fonction qui ne fonctionne pas, on ne fait qu'appuyer pour voir l'état suivant de l'ensemble des cellules

function swap(cell){ // fonction qui permet de changer la couleur en cliquant sur n'importe quelle cellule pour choisir l'état des cellules au départ (et par la suite si on veut)
    if (cell.className == "black"){
        cell.className = "white";}
    else if (cell.className == "white"){
        cell.className = "black";}
}
function change(){
 for (i= 1; i<row-1; i++){ 
     for (j= 1; j<col-1; j++){ //pour chaque cellule
         var n=0; //initialise le nombre de voisins vivants
            for (x= 0; x<3; x++){
             for (y= 0; y<3; y++){ // pour toutes les cellules dans un rayon de 3 par 3
                 if(document.getElementById('l'+x+'c'+y).className == "white"){n++;} // si la cellule est blanche donc vivante incrémenter le nombre de voisins vivants n
             }
            }
        if(document.getElementById('l'+i+'c'+j).className == "white"){n--;} // si la cellule au milieu est blanche, on soustrait par 1 pour éviter que la cellule centrale comptabilise un voisin
        if(n<2 || n>3){(document.getElementById('l'+i+'c'+j).className = "black");} // on applique les règles sur la case centrale
        else if(n==3) {(document.getElementById('l'+i+'c'+j).className = "white");} // on applique les règles sur la case centrale
        }
 }
}
</script>
</body>
</html>


J'espère que c'est + clair. Désolé mais l'espacement ne fonctionne pas quand je valide...Impossible d'aérer..
0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Pour pouvoir indenter ton code et y mettre la coloration syntaxique... il faut, dans les balises de code, préciser le LANGAGE.
Explications ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Ensuite, quand tu dis :

/fonction qui ne fonctionne pas, on ne fait qu'appuyer pour voir l'état suivant de l'ensemble des cellules

C'est à dire ?
Car là .. le code fait ce qui est écrit.... qu'attends tu exactement comme comportement ?


Ce que je te demande c'est d'expliquer de façon écrite le fonctionnement attendu de ton code (pas des commentaires dans ton code... mais "l’énoncé / l'algo " de ce que tu cherches à faire...

Je te donne le début :
Etape 1 : Je créé un tableau de x cases , y colonnes
Etape 2 : Je clique sur une cellule => ça change sa couleur
Etape 3 : ....
0
hichams Messages postés 5 Statut Membre
 
À la base, j'avais recopié le input d'ailleurs. Il était censé, au départ, lancer le code et ne pas s'arrêter tant qu'on ne clique pas à nouveau sur le bouton (qui sera passé de "start" à "pause"). Mais ce minuscule problème ne me pose pas vraiment problème.

Pour le fonctionnement:
Etape 1 : Je créé un tableau de x cases , y colonnes
Etape 2 : Je clique sur une cellule => ça change sa couleur
Etape 3 : Je parcours chaque cellule du tableau pour pouvoir compter ses voisins "en vie" (avec boucle for)
Etape 4 : Je donne la valeur (noir ou blanc) de la cellule en fonction de ses voisins
Etape 5 : La cellule change de couleur (ou pas) au stade suivant

et ainsi de suite pour chaque case parcourue. J'espère avoir été assez clair.


J'essaye à nouveau de mettre le code parc'que c'est un peu frustrant de le voir aussi illisible: 
<!DOCTYPE html>
<html>
<body>
<style>
table {
height: 300px;
width: 300px;
margin: 0; padding: 0;
border-collapse: collapse;
}
td { border: 1px solid #A4A4A4;
border-spacing: 0;
height: 30px;
width: 10px;
margin: 0; padding: 0;
}
.black { background: #000000;} // couleur cellule morte
.white { background: #FFFFFF;} // couleur cellule vivante
</style>
<input type="button" id="acte" value="start" onclick="controle();" style="position:absolute;margin-top:140px;margin-left:350px;"/> //bouton start pour lancer
<script>
var col = 3; row = 3; started = 0;

document.write("<table class='table'>")
for (i=0; i<row; i++) {
   document.write("<tr>");
for (j=0; j<col; j++) {
   document.write("<td class='black' onclick='swap(this)' id='l" + i + "c" + j +"'></td>");}
   document.write("</tr>");}
   document.write("</table>");

function controle(){
   //fonction qui est censée permettre de faire une pause
   if (started==1){
      document.getElementById('acte').value="continue";
      started=0;}
   else{
      document.getElementById('acte').value="stop";
      started=1;
      change();}
} //fonction qui ne fonctionne pas, on ne fait qu'appuyer pour voir l'état suivant de l'ensemble des cellules

function swap(cell){ // fonction qui permet de changer la couleur en cliquant sur n'importe quelle cellule pour choisir l'état des cellules au départ (et par la suite si on veut)
   if (cell.className == "black"){
      cell.className = "white";}
   else if (cell.className == "white"){
      cell.className = "black";}
}
function change(){
   for (i= 1; i<row-1; i++){ 
      for (j= 1; j<col-1; j++){ //pour chaque cellule
         var n=0; //initialise le nombre de voisins vivants
         for (x= 0; x<3; x++){
               for (y= 0; y<3; y++){ // pour toutes les cellules dans un rayon de 3 par 3
                     if(document.getElementById('l'+x+'c'+y).className == "white"){n++;} // si la cellule est blanche donc vivante incrémenter le nombre de voisins vivants n
               }
         }
         if(document.getElementById('l'+i+'c'+j).className == "white"){n--;} // si la cellule au milieu est 
//blanche, on soustrait par 1 pour éviter que la cellule centrale comptabilise un voisin
         if(n<2 || n>3){(document.getElementById('l'+i+'c'+j).className = "black");} // on applique les règles sur la case centrale
         else if(n==3) {(document.getElementById('l'+i+'c'+j).className = "white");} // on applique les règles sur la case centrale
         }
    }
}
</script>
</body>
</html>
0

Discussions similaires

Règles du jeu JOUR DE PAYE
-AngusYoung -
Rinoura254 -

9 réponses
Quel est le raccourci clavier pour le plein écran ?
Carotte77 -
KhyraRockwell -

19 réponses
Quelle est la durée de vie des télévisions "écrans plats"?
baissaoui -
baissaoui -

0 réponse
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses