Index.html
<!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>
