site de Fabien Torre


Source de gol-v2.html

1: <!DOCTYPE html> 2: <html lang="fr"> 3: <head> 4: <meta charset="utf-8" /> 5: <title>Game of life</title> 6: <style> 7: canvas#monde { 8: border: 1px solid #000; 9: } 10: </style> 11: <script> 12: /* Variables globales */ 13: var taille_monde = 100; 14: var zoom = 2; 15: var canvas = null; 16: var context = null; 17: var monde = []; 18: var voisins = []; 19: 20: /* Affichage des individus */ 21: function montre_monde () { 22: for (var col=0 ; col<taille_monde ; col++) { 23: for (var lig=0 ; lig<taille_monde ; lig++) { 24: if (monde[col][lig] == 1) { // naissance 25: context.fillStyle = '#FF0'; 26: } else { // personne 27: context.fillStyle = '#999'; 28: } 29: context.fillRect(zoom*col,zoom*lig,zoom,zoom); 30: } 31: } 32: } 33: 34: /* Compte les voisins de la case (x,y) */ 35: function compte_voisins_de (x,y) { 36: var nb = 0; 37: if ((x>0) && (monde[x-1][y]>0)) { nb++; } 38: if ((y>0) && (monde[x][y-1]>0)) { nb++; } 39: if ((x>0) && (y>0) && (monde[x-1][y-1]>0)) { nb++; } 40: if ((x<taille_monde-1) && (monde[x+1][y]>0)) { nb++; } 41: if ((y<taille_monde-1) && (monde[x][y+1]>0)) { nb++; } 42: if ((x<taille_monde-1) && (y<taille_monde-1) && (monde[x+1][y+1]>0)) { nb++; } 43: if ((x>0) && (y<taille_monde-1) && (monde[x-1][y+1]>0)) { nb++; } 44: if ((x<taille_monde-1) && (y>0) && (monde[x+1][y-1]>0)) { nb++; } 45: return nb; 46: } 47: 48: /* Etablit pour chaque case son nombre de voisins */ 49: function compte_voisins () { 50: for (var col=0 ; col<taille_monde ; col++) { 51: for (var lig=0 ; lig<taille_monde ; lig++) { 52: voisins[col][lig] = compte_voisins_de(col,lig); 53: } 54: } 55: } 56: 57: /* Calcule la génération suivante */ 58: function maj_monde () { 59: for (var col=0 ; col<taille_monde ; col++) { 60: for (var lig=0 ; lig<taille_monde ; lig++) { 61: if (monde[col][lig]>0) { 62: if ((voisins[col][lig] != 2) && (voisins[col][lig] != 3)) { // meurt 63: monde[col][lig] = 0; 64: } else { // reste en vie 65: monde[col][lig] = 1; 66: } 67: } else { // naissance 68: if (voisins[col][lig] == 3) { 69: monde[col][lig] = 1; 70: } 71: } 72: } 73: } 74: compte_voisins(); 75: } 76: 77: /* Fait évoluer le monde de n générations, puis le redessine */ 78: function evolution (n) { 79: for (var i=0 ; i<n ; i++) { 80: maj_monde(); 81: } 82: montre_monde(); 83: } 84: 85: /* Initialisations */ 86: function initialisations () { 87: /* récupération des éléments du canvas et réglage de sa taille */ 88: canvas = document.getElementById("monde"); 89: context = canvas.getContext("2d"); 90: canvas.setAttribute("height",zoom*taille_monde); 91: canvas.setAttribute("width",zoom*taille_monde); 92: for (var col=0 ; col<taille_monde ; col++) { 93: monde[col] = []; 94: voisins[col] = []; 95: for (var lig=0 ; lig<taille_monde ; lig++) { 96: monde[col][lig] = 0; 97: voisins[col][lig] = 0; 98: } 99: } 100: /* pour chaque case, on décide s'il y a un individu ou pas */ 101: var proba = Math.random(); 102: if (proba<0.1) { proba = 0.1; } 103: if (proba>0.9) { proba = 0.9; } 104: for (var col=0 ; col<taille_monde ; col++) { 105: for (var lig=0 ; lig<taille_monde ; lig++) { 106: if (Math.random()>=proba) { 107: monde[col][lig] = 1; 108: } else { 109: monde[col][lig] = 0; 110: } 111: } 112: } 113: compte_voisins(); 114: montre_monde(); 115: setInterval('evolution(11);',1000); 116: } 117: 118: </script> 119: </head> 120: <body onload="initialisations();"> 121: <h1>Jeu de la vie</h1> 122: <canvas id="monde"></canvas> 123: </body> 124: </html>
Fabien Torre Valid HTML5! Valid CSS!
site de Fabien Torre, université de Lille