Index.html

De Wiki de Projets IMA
Révision datée du 12 juin 2018 à 10:38 par Nmartin2 (discussion | contributions) (Page créée avec « <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Projet SEEGA</title> <style> * { padding: 0; margin: 0; } canvas { background: #555; di... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)

<!DOCTYPE html> <html> <head>

   <meta charset="utf-8" />
   <title>Projet SEEGA</title>
   <style>
   	* { padding: 0; margin: 0; }
   	canvas { background: #555; display: block; margin: 0 auto; }
   </style>


   <script src="jquery.js"></script>
       <script type="text/javascript">
   window.WebSocket=(window.WebSocket||window.MozWebSocket);
   var websocket=new WebSocket('ws://'+location.host+':9000','serial');
   var octet, ligne, colonne, debut, premierBit, direction, position;
   websocket.onopen=function(){ $('h1').css('color','green'); sendMessage(0x3F); };
   websocket.onerror=function(){ $('h1').css('color','red'); };
   websocket.onmessage=function(message){

octet = message.data; premierBit = (octet >> 7); if (premierBit == 0x01){ colonne = octet & 0x07; ligne = (octet >> 3) & 0x07; debut = (octet >> 6) & 0x03;

   console.log('A'+ligne+','+colonne);

draw();

} else { position = octet & 0x1F; direction = (octet>>5) & 0x03; console.log('B'+direction+','+position); draw(); }

};


   function sendMessage(data){
   websocket.send(data);
   }
   </script>

</head> <body onload="draw();">

<canvas id="myCanvas" width="560" height="560"></canvas>


<script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var grille = [['v','v','v','v','v'],

             ['v','v','v','v','v'],
             ['v','v','v','v','v'],
             ['v','v','v','v','v'],
             ['v','v','v','v','v']]; /*grille de jeu*/


var refresh = 0x3F;

var x1,x2,y1,y2; var echange1=0,echange2=0, est_possible=0;//condition de verification pour le déplacement var aux; var cpt_noir=0, cpt_blanc=0; //compteur de pions mangés pour chaque joueur var fin_departie=0, debut_partie=0, blancs_perdent=0; noirs_perdent=0; var aQuiLeTour=0; //0 quand cest aux blancs de jouer et 1 pour les noirs var cpt=0; //compteur de pions créés var cptG=0;// compeneral de variables recues var c1, l1, colonne2, ligne2;

document.addEventListener("mousedown", MouseDownHandler, false); //evenement de clique appuyé document.addEventListener("mouseup", MouseUpHandler, false);//évènement de clique relaché function MouseDownHandler(e) {

   var relativeX = e.clientX - canvas.offsetLeft;  //lecture position du curseur dans la fenètre
   var relativeY = e.clientY ;
   if(relativeX > 0 && relativeX < canvas.width && relativeY < canvas.height) {
       echange1=1;
       x1=(relativeX-(relativeX%110))/110; //indices de la case
       y1=(relativeY-(relativeY%110))/110;
     }
   else {echange1=0;}
   draw();
   }

function MouseUpHandler(e) {

   var relativeX = e.clientX - canvas.offsetLeft; //lecture position du curseur dans la fenètre
   var relativeY = e.clientY;
   if(relativeX > 0 && relativeX < canvas.width && relativeY < canvas.height) { // on est toujours dans la grille
           echange2=1;
           x2=(relativeX-(relativeX%110))/110; // indices de la case
           y2=(relativeY-(relativeY%110))/110;
         }
         else {echange2=0;}
    draw();

}

function deplacement_possible() //verifie si le deplacement est possible {

 if (x2>0 && x1==x2-1 && y1==y2){est_possible=1;} //deplacement d'une case vers le bas
 if (x2<4 && x1==x2+1 && y1==y2){est_possible=1;} //deplacement d'une case vers le haut
 if (y2>0 && x1==x2 && y1==y2-1){est_possible=1;} //deplacement d'une case vers la droite
 if (y2<4 && x1==x2 && y1==y2+1){est_possible=1;} //deplacement d'une case vers la gauche

}

//fonction qui retire un pion en prenant en paramètre les coordonnées de ce dernier function retire_pion (i, j) {

 if (grille[i][j] == 'n'){cpt_blanc++;} //si le pion mangé est noir on ajoute un point au joueur qui detient les pions blancs
 else if (grille[i][j] == 'b'){cpt_noir++;} //inversement si le pion mangé est blanc
 grille[i][j] = 'v';

}

//fonction qui determine si après un déplacement, des pions sont retirés ou non function qui_mange_qui () { if (grille[x1][y1]=='b'){

 if(x2<3 && grille[x2+1][y2]=='n' && grille[x2+2][y2]=='b'){if (x2+1!= 2 || y2!=2){retire_pion(x2+1, y2);}} //le pion est encerclé en haut et en bas
 if(x2>1 && grille[x2-1][y2]=='n' && grille[x2-2][y2]=='b'){if (x2-1!= 2 || y2!=2){retire_pion(x2-1, y2);}}
 if(y2<3 && grille[x2][y2+1]=='n' && grille[x2][y2+2]=='b'){if (x2!= 2 || y2+1!=2){retire_pion(x2, y2+1);}} //le pion est encerclé à gauche et à droite
 if(y2>1 && grille[x2][y2-1]=='n' && grille[x2][y2-2]=='b'){if (x2!= 2 || y2-1!=2){retire_pion(x2, y2-1);}}
 cpt_blanc++;

} }

function qui_mange_qui_arduino () { if(aQuiLeTour==1){

 if(colonne2<3 && grille[colonne2+1][ligne2]=='b' && grille[colonne2+2][ligne2]=='n'){if(colonne2+1!=2 || ligne2!=2){retire_pion(colonne2+1,ligne2);}}
 if(colonne2>1 && grille[colonne2-1][ligne2]=='b' && grille[colonne2-2][ligne2]=='n'){if(colonne2-1!=2 || ligne2!=2){retire_pion(colonne2-1,ligne2);}}
 if(ligne2<3 && grille[colonne2][ligne2+1]=='b' && grille[colonne2][ligne2+2]=='n'){if(colonne2!=2 || ligne2+1!=2){retire_pion(colonne2, ligne2+1);}}
 if(ligne2>1 && grille[colonne2][ligne2-1]=='b' && grille[colonne2][ligne2-2]=='n'){if(colonne2 !=2 || ligne2-1!=2){retire_pion(colonne2,ligne2-1);}}
 cpt_noir++;

} }


function envoie_coord(i, j){ var octl, nature; if (grille[j][i] == 'n'){nature = 0x02;}

           else if (grille[j][i] == 'b'){nature = 0x01;}
           else {nature = 0;}
 	octl = (nature<<6) | (i<<3) | j;
 	sendMessage(octl);

}

function envoie_voisins(i, j){ var enCours = 0; if(i>0){ while(enCours!=5){ envoie_coord(i-1, enCours); enCours++; } enCours=0; } while(enCours!=5){ envoie_coord(i, enCours); enCours++; } enCours = 0; if(i<4){ while(enCours!=5){ envoie_coord(i+1, enCours); enCours++; } } }

function placement_pions(){

 if (echange1 && aQuiLeTour==0){//c'est a l'équipe blanche de placer deux pions
   if (grille[x1][y1]=='v'){//si la case est vide
       if(x1!=2 || y1!=2){
         grille[x1][y1]='b';
         envoie_coord(y1, x1);
         cpt++;
       }//on la rempli si ce n'est pas la case du milieu
   }
 }
 else if (aQuiLeTour==1){//c'est à l'équipe noire de placer deux pions_noir
 	if(debut==0x03){
 		if(grille[colonne][ligne]=='v'){
 			grille[colonne][ligne]='n';
 			cpt++;
 			}

}

 }
 if (cpt==2 && aQuiLeTour==0){aQuiLeTour=1; cpt=0;}//changement de main
 if (cpt==2 && aQuiLeTour==1){aQuiLeTour=0; cpt=0;}

}

//fonction qui determine quand la partie commence, c'est-à-dire quand il y a une seule case vide (celle du milieu) function start_game(){

 var cpt_vide=0;
 for (var i = 0; i<5 ; i++){
   for (var j = 0; j<5; j++){
     if(grille[i][j]=='v'){cpt_vide++;}
   }
 }
 if (cpt_vide==1){debut_partie=1;}

// if (cpt_vide==25){sendMessage(refresh);} }

//fonction qui verifie si un joueur ne possède plus de pions vivants. Dans ce cas, la variable fin de partie est modifiée function end_game(){

 var pions_noirs=0, pions_blancs=0;
 for (var i = 0; i<5 ; i++){
   for (var j = 0; j<5; j++){
     if (grille[i][j]=='n'){pions_noirs++;}
     else if (grille[i][j]=='b'){pions_blancs++;}
   }
 }
 //c'est la fin de la partie
 if (pions_noirs==0){fin_departie=1; noirs_perdent=1;}//l'équipe noire perd
 if (pions_blancs==0){fin_departie=1; blancs_perdent=1;}//L'équipe blanche perd

}

function draw() {//dessine la grille toutes les 10 millisecondes

   // drawing code
   if (debut_partie==0){placement_pions();}
   start_game();
   deplacement_possible();
   ctx.clearRect(0, 0, canvas.width, canvas.height); //efface la page précédente
   if (echange1==1 && echange2==1 && grille[x2][y2]=='v' && est_possible==1 && debut_partie==1 && aQuiLeTour==0)
   {
     //Le deplacement est possible, la partie a commencée et c'est au tour de l'odinateur de jouer
     qui_mange_qui();//supprime les pions qui sont mangés suite au déplacement
     aux=grille[x1][y1]; //echange de pions
     grille[x1][y1]=grille[x2][y2];
     grille[x2][y2]=aux;
     echange1=0;
     echange2=0;
     envoie_voisins(y2,x2);//On envoie le voisinnage
     aQuiLeTour = 1;//C'est au tour de l'Arduino maintenant
   }
   else if (aQuiLeTour==1 && debut_partie==1){ //C'est à l'Arduino de jouer ET la partie a commencé

if(premierBit==0x00){//On recoit un deplacement c1 = position %5;//On recupere les coordonées de la case l1 = (position-c1)/5;

           //On va maintenant stocker vers ou le pion se déplace
       		if(direction == 0x00){colonne2 = c1; ligne2 = l1-1;}//Deplacement vers le haut
       		else if (direction == 0x01){colonne2 = c1; ligne2 = l1+1;}//Deplacement vers le bas
       		else if (direction == 0x02){colonne2 = c1-1; ligne2 = l1;}//Deplacement vers la gauche
       		else if (direction == 0x03){colonne2 = c1+1; ligne2 = l1;}//Deplacement vers la droite
       		console.log('I'+'A'+c1+','+l1);//Pour debug, de ou il part
           console.log('I'+'W'+colonne2+','+ligne2);//vers ou il va
       		qui_mange_qui_arduino();//Verification si des pions sont mangés
           //on effectue le deplacement sur la grille
           aux = grille[c1][l1];
       		grille[c1][l1] = grille[colonne2][ligne2];
       		grille[colonne2][ligne2] = aux;
       		aQuiLeTour=0;//C'est maintenant au tour de l'ordinateur de jouer
       		envoie_voisins(ligne2, colonne2);//On envoit le nouveau voisinnage à l'Arduino
       }
    }
   if (debut_partie==1){end_game();}
   for (var i = 0; i<5; i++) // affiche la grille
   {
     for (var j = 0; j<5; j++)
     {
       ctx.beginPath(); // debut affichage
       ctx.rect(10+110*i, 10+110*j, 100, 100); //affiche carré (coord x, coord y, taille x, taille y)
       ctx.fillStyle = "rgba(200,200,200,1)"; // init couleur grise Red=200 Green=200 Blue=200 opacité=1
       ctx.fill(); //replissage du caré avec la couleur
       ctx.closePath(); // fin affichage
       ctx.beginPath();
       ctx.arc(60+110*i, 60+110*j, 25, 0, Math.PI*2, false); //affiche cercle (Pion)
       if (grille[i][j] == 'n'){
         ctx.fillStyle = "rgba(30,30,30,1)"; //pion noir
       }
       else if (grille[i][j] == 'b'){
         ctx.fillStyle = "rgba(250,250,250,1)"; // pion blanc
       }
       ctx.fill();
       ctx.closePath();


     }
   }
   est_possible=0;
   if (fin_departie==1 && blancs_perdent){alert("La partie est terminée ! Bravo à l'équipe noire.");}
   if (fin_departie==1 && noirs_perdent){alert("La partie est terminée ! Bravo à l'équipe blanche.");}

}


</script>

</body> </html>