mars 29, 2021 / NSI

NSI : projet jeu de la vie

Information MPI

https://prepas.org/index.php?article=42

1. Présentation du jeu de la vie.

Une présentation au collège de France par J-P Delahaye :
https://www.college-de-france.fr/site/alain-prochiantz/symposium-2017-09-06-11h00.htm
un article :
http://www.lifl.fr/~jdelahay/dnalor/Jeudelavie.pdf

2. Le code HTML

<HTML>
	<HEAD>
		<meta charset="utf-8" />
	</HEAD>
	<BODY>

			<canvas id="canvas" width="600px" height="600px"></canvas>
        <form>
            <div>
               <label for="b1">Lancer la simulation en mode pas à pas :</label> 
        <input id="bouton" type="button" value="Ok">
            </div>
            <div>
                <label for="b2">Lancer la simulation en mode automatique :</label> 
        <input id="bouton_auto" type="button" value="Lancer la simulation automatique">
            </div>
            </form>
	</BODY>

</HTML>
<script type="text/javascript" src="prog.js"></script>

3. Le code JS

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var dimension=10;
var plateau=new Array();
var plateau_transitoire=new Array();
canvas.addEventListener("mousedown",changer_case , false);
bouton_r=document.getElementById("bouton");
bouton_r.onclick=evolution;
bouton_auto=document.getElementById("bouton_auto");
bouton_auto.onclick=evolution_auto;


remplir_tableaux();
afficher();

function remplir_tableaux(){
// on ajoute des lignes à nos tableaux
    for (var i=0;i<dimension;i++) {
        plateau[i]=new Array();
        plateau_transitoire[i]=new Array();
        }
// on remplit les 2 tableaux de 0
    for (var i=0;i<dimension;i++) {
        for (var j=0;j<dimension;j++) {
        plateau[j][i]=0;
        plateau_transitoire[i][j]=0;
        }
    }
}

function afficher(){
    var canvas=document.getElementById("canvas");
    var cote=canvas.width/dimension;
    for (var i=0;i<dimension;i++) {
        for (var j=0;j<dimension;j++) {
        if (plateau[j][i]==0) {
            ctx.beginPath();
            ctx.strokeStyle="dark";   
            ctx.lineWidth="2";   
            ctx.rect(i*cote,j*cote,cote,cote);
            ctx.fillStyle="rgb(255,255,255)";
            ctx.fill();
            ctx.stroke();   
        }
        else {
            ctx.beginPath();
            ctx.rect(i*cote,j*cote,cote,cote);
            ctx.fillStyle="rgb(0,0,0)";
            ctx.fill();
        }
        }
    }
}
function changer_case(evt){
    var mousePos = getMousePos(canvas, evt);
    var x=mousePos.x;
    var y=mousePos.y;
    var cote=canvas.width/dimension;
    i=Math.floor(x/cote);
    j=Math.floor(y/cote);
    if (plateau[j][i]==0){
        plateau[j][i]=1;
    }
    else {
        plateau[j][i]=0;
    }
    afficher();
}
function getMousePos(canvas, evt) {
         var rect = canvas.getBoundingClientRect();
         return {
           x: evt.clientX - rect.left,
           y: evt.clientY - rect.top
         };
       }
function compteur(i,j){
    var nb=0;
    for (var x=i-1;x<i+2;x++){
        for (var y=j-1;y<j+2;y++){
            if ((x>=0) && (x<dimension) && (y>=0) && (y<dimension) && !((x==i)&&(y==j))){
                nb+=plateau[y][x];
            }
         }
       }
    return nb;
}

function evolution() {
    mise_a_jour_transition();
     for (var i=0;i<dimension;i++) {
        for (var j=0;j<dimension;j++) {
            c=compteur(i,j);
            if ((plateau[j][i]==0) && (c==3)) {
                plateau_transitoire[j][i]=1;
                }
            if (plateau[j][i]==1) {
                if ((c==2)||(c==3)){
                plateau_transitoire[j][i]=1;
                }
            else {
                plateau_transitoire[j][i]=0;
            }
        }
  }
}
    mise_a_jour_plateau(); 
    afficher();
  
}
function evolution_auto(){
    evolution();
    setInterval(evolution, 1000);
}
function mise_a_jour_transition(){
    for (var i=0;i<dimension;i++) {
        for (var j=0;j<dimension;j++) {
            plateau_transitoire[j][i]=plateau[j][i];
        }
    }
}

function mise_a_jour_plateau(){
    for (var i=0;i<dimension;i++) {
        for (var j=0;j<dimension;j++) {
            plateau[j][i]=plateau_transitoire[j][i];
        }
    }
}

4. Tester la page HTML et analyser le code.

5. Mini Projet pour avant les vacances

Modifier le js et le html pour proposer des améliorations au client :

  • possibilité d’arrêter le mode automatique,
  • possibilité de réinitialiser,
  • possibilité d’insérer automatiquement des formes propres au jeu en les sélectionnant et en les insérant par un simple clic,
  • possibilité de proposer un plateau rempli aléatoirement ( avec la probabilité 0,5 que la cellule soit vivante ou morte ),
  • proposer de choisir ses couleurs,
  • possibilité de sauvegarder ses plateaux sous le format image,
  • possibilité de choisir la taille en cellules du plateau
  • etc …..
  • on pourra aussi améliorer le rendu brut de la page par un peu de css pour les connaisseurs.
    –

CatégoriesNSI