https://projets-ima.plil.fr/mediawiki/index.php?action=history&feed=atom&title=Index.htmlIndex.html - Historique des versions2026-05-14T11:29:37ZHistorique des versions pour cette page sur le wikiMediaWiki 1.29.2https://projets-ima.plil.fr/mediawiki/index.php?title=Index.html&diff=58496&oldid=prevNmartin2 : 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... »2018-06-12T10:38:36Z<p>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... »</p>
<p><b>Nouvelle page</b></p><div><!DOCTYPE html><br />
<html><br />
<head><br />
<meta charset="utf-8" /><br />
<title>Projet SEEGA</title><br />
<style><br />
* { padding: 0; margin: 0; }<br />
canvas { background: #555; display: block; margin: 0 auto; }<br />
</style><br />
<br />
<br />
<script src="jquery.js"></script><br />
<script type="text/javascript"><br />
window.WebSocket=(window.WebSocket||window.MozWebSocket);<br />
var websocket=new WebSocket('ws://'+location.host+':9000','serial');<br />
var octet, ligne, colonne, debut, premierBit, direction, position;<br />
<br />
websocket.onopen=function(){ $('h1').css('color','green'); sendMessage(0x3F); };<br />
<br />
websocket.onerror=function(){ $('h1').css('color','red'); };<br />
<br />
websocket.onmessage=function(message){<br />
octet = message.data;<br />
premierBit = (octet >> 7);<br />
if (premierBit == 0x01){<br />
colonne = octet & 0x07;<br />
ligne = (octet >> 3) & 0x07;<br />
debut = (octet >> 6) & 0x03;<br />
console.log('A'+ligne+','+colonne);<br />
draw();<br />
<br />
}<br />
else {<br />
position = octet & 0x1F;<br />
direction = (octet>>5) & 0x03;<br />
console.log('B'+direction+','+position);<br />
draw();<br />
}<br />
};<br />
<br />
<br />
function sendMessage(data){<br />
websocket.send(data);<br />
}<br />
<br />
</script><br />
</head><br />
<body onload="draw();"><br />
<br />
<canvas id="myCanvas" width="560" height="560"></canvas><br />
<br />
<br />
<script><br />
var canvas = document.getElementById("myCanvas");<br />
var ctx = canvas.getContext("2d");<br />
var grille = [['v','v','v','v','v'],<br />
['v','v','v','v','v'],<br />
['v','v','v','v','v'],<br />
['v','v','v','v','v'],<br />
['v','v','v','v','v']]; /*grille de jeu*/<br />
<br />
<br />
var refresh = 0x3F;<br />
<br />
var x1,x2,y1,y2;<br />
var echange1=0,echange2=0, est_possible=0;//condition de verification pour le déplacement<br />
var aux;<br />
var cpt_noir=0, cpt_blanc=0; //compteur de pions mangés pour chaque joueur<br />
var fin_departie=0, debut_partie=0, blancs_perdent=0; noirs_perdent=0;<br />
var aQuiLeTour=0; //0 quand cest aux blancs de jouer et 1 pour les noirs<br />
var cpt=0; //compteur de pions créés<br />
var cptG=0;// compeneral de variables recues<br />
var c1, l1, colonne2, ligne2;<br />
<br />
document.addEventListener("mousedown", MouseDownHandler, false); //evenement de clique appuyé<br />
document.addEventListener("mouseup", MouseUpHandler, false);//évènement de clique relaché<br />
function MouseDownHandler(e) {<br />
var relativeX = e.clientX - canvas.offsetLeft; //lecture position du curseur dans la fenètre<br />
var relativeY = e.clientY ;<br />
if(relativeX > 0 && relativeX < canvas.width && relativeY < canvas.height) {<br />
echange1=1;<br />
x1=(relativeX-(relativeX%110))/110; //indices de la case<br />
y1=(relativeY-(relativeY%110))/110;<br />
}<br />
else {echange1=0;}<br />
draw();<br />
}<br />
<br />
function MouseUpHandler(e) {<br />
var relativeX = e.clientX - canvas.offsetLeft; //lecture position du curseur dans la fenètre<br />
var relativeY = e.clientY;<br />
if(relativeX > 0 && relativeX < canvas.width && relativeY < canvas.height) { // on est toujours dans la grille<br />
echange2=1;<br />
x2=(relativeX-(relativeX%110))/110; // indices de la case<br />
y2=(relativeY-(relativeY%110))/110;<br />
}<br />
else {echange2=0;}<br />
draw();<br />
}<br />
<br />
function deplacement_possible() //verifie si le deplacement est possible<br />
{<br />
if (x2>0 && x1==x2-1 && y1==y2){est_possible=1;} //deplacement d'une case vers le bas<br />
if (x2<4 && x1==x2+1 && y1==y2){est_possible=1;} //deplacement d'une case vers le haut<br />
if (y2>0 && x1==x2 && y1==y2-1){est_possible=1;} //deplacement d'une case vers la droite<br />
if (y2<4 && x1==x2 && y1==y2+1){est_possible=1;} //deplacement d'une case vers la gauche<br />
}<br />
<br />
//fonction qui retire un pion en prenant en paramètre les coordonnées de ce dernier<br />
function retire_pion (i, j)<br />
{<br />
if (grille[i][j] == 'n'){cpt_blanc++;} //si le pion mangé est noir on ajoute un point au joueur qui detient les pions blancs<br />
else if (grille[i][j] == 'b'){cpt_noir++;} //inversement si le pion mangé est blanc<br />
grille[i][j] = 'v';<br />
}<br />
<br />
//fonction qui determine si après un déplacement, des pions sont retirés ou non<br />
function qui_mange_qui ()<br />
{<br />
if (grille[x1][y1]=='b'){<br />
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<br />
if(x2>1 && grille[x2-1][y2]=='n' && grille[x2-2][y2]=='b'){if (x2-1!= 2 || y2!=2){retire_pion(x2-1, y2);}}<br />
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<br />
if(y2>1 && grille[x2][y2-1]=='n' && grille[x2][y2-2]=='b'){if (x2!= 2 || y2-1!=2){retire_pion(x2, y2-1);}}<br />
cpt_blanc++;<br />
}<br />
}<br />
<br />
function qui_mange_qui_arduino ()<br />
{<br />
if(aQuiLeTour==1){<br />
if(colonne2<3 && grille[colonne2+1][ligne2]=='b' && grille[colonne2+2][ligne2]=='n'){if(colonne2+1!=2 || ligne2!=2){retire_pion(colonne2+1,ligne2);}}<br />
if(colonne2>1 && grille[colonne2-1][ligne2]=='b' && grille[colonne2-2][ligne2]=='n'){if(colonne2-1!=2 || ligne2!=2){retire_pion(colonne2-1,ligne2);}}<br />
if(ligne2<3 && grille[colonne2][ligne2+1]=='b' && grille[colonne2][ligne2+2]=='n'){if(colonne2!=2 || ligne2+1!=2){retire_pion(colonne2, ligne2+1);}}<br />
if(ligne2>1 && grille[colonne2][ligne2-1]=='b' && grille[colonne2][ligne2-2]=='n'){if(colonne2 !=2 || ligne2-1!=2){retire_pion(colonne2,ligne2-1);}}<br />
cpt_noir++;<br />
}<br />
}<br />
<br />
<br />
function envoie_coord(i, j){<br />
var octl, nature;<br />
if (grille[j][i] == 'n'){nature = 0x02;}<br />
else if (grille[j][i] == 'b'){nature = 0x01;}<br />
else {nature = 0;}<br />
octl = (nature<<6) | (i<<3) | j;<br />
sendMessage(octl);<br />
}<br />
<br />
function envoie_voisins(i, j){<br />
var enCours = 0;<br />
if(i>0){<br />
while(enCours!=5){<br />
envoie_coord(i-1, enCours);<br />
enCours++;<br />
}<br />
enCours=0;<br />
}<br />
while(enCours!=5){<br />
envoie_coord(i, enCours);<br />
enCours++;<br />
}<br />
enCours = 0;<br />
if(i<4){<br />
while(enCours!=5){<br />
envoie_coord(i+1, enCours);<br />
enCours++;<br />
}<br />
}<br />
}<br />
<br />
function placement_pions(){<br />
if (echange1 && aQuiLeTour==0){//c'est a l'équipe blanche de placer deux pions<br />
if (grille[x1][y1]=='v'){//si la case est vide<br />
if(x1!=2 || y1!=2){<br />
grille[x1][y1]='b';<br />
envoie_coord(y1, x1);<br />
cpt++;<br />
}//on la rempli si ce n'est pas la case du milieu<br />
}<br />
}<br />
else if (aQuiLeTour==1){//c'est à l'équipe noire de placer deux pions_noir<br />
if(debut==0x03){<br />
if(grille[colonne][ligne]=='v'){<br />
grille[colonne][ligne]='n';<br />
cpt++;<br />
}<br />
}<br />
}<br />
if (cpt==2 && aQuiLeTour==0){aQuiLeTour=1; cpt=0;}//changement de main<br />
if (cpt==2 && aQuiLeTour==1){aQuiLeTour=0; cpt=0;}<br />
}<br />
<br />
//fonction qui determine quand la partie commence, c'est-à-dire quand il y a une seule case vide (celle du milieu)<br />
function start_game(){<br />
var cpt_vide=0;<br />
for (var i = 0; i<5 ; i++){<br />
for (var j = 0; j<5; j++){<br />
if(grille[i][j]=='v'){cpt_vide++;}<br />
}<br />
}<br />
if (cpt_vide==1){debut_partie=1;}<br />
// if (cpt_vide==25){sendMessage(refresh);}<br />
}<br />
<br />
//fonction qui verifie si un joueur ne possède plus de pions vivants. Dans ce cas, la variable fin de partie est modifiée<br />
function end_game(){<br />
var pions_noirs=0, pions_blancs=0;<br />
for (var i = 0; i<5 ; i++){<br />
for (var j = 0; j<5; j++){<br />
if (grille[i][j]=='n'){pions_noirs++;}<br />
else if (grille[i][j]=='b'){pions_blancs++;}<br />
}<br />
}<br />
//c'est la fin de la partie<br />
if (pions_noirs==0){fin_departie=1; noirs_perdent=1;}//l'équipe noire perd<br />
if (pions_blancs==0){fin_departie=1; blancs_perdent=1;}//L'équipe blanche perd<br />
}<br />
<br />
function draw() {//dessine la grille toutes les 10 millisecondes<br />
// drawing code<br />
if (debut_partie==0){placement_pions();}<br />
start_game();<br />
deplacement_possible();<br />
ctx.clearRect(0, 0, canvas.width, canvas.height); //efface la page précédente<br />
if (echange1==1 && echange2==1 && grille[x2][y2]=='v' && est_possible==1 && debut_partie==1 && aQuiLeTour==0)<br />
{<br />
//Le deplacement est possible, la partie a commencée et c'est au tour de l'odinateur de jouer<br />
qui_mange_qui();//supprime les pions qui sont mangés suite au déplacement<br />
<br />
aux=grille[x1][y1]; //echange de pions<br />
grille[x1][y1]=grille[x2][y2];<br />
grille[x2][y2]=aux;<br />
echange1=0;<br />
echange2=0;<br />
envoie_voisins(y2,x2);//On envoie le voisinnage<br />
aQuiLeTour = 1;//C'est au tour de l'Arduino maintenant<br />
<br />
}<br />
else if (aQuiLeTour==1 && debut_partie==1){ //C'est à l'Arduino de jouer ET la partie a commencé<br />
if(premierBit==0x00){//On recoit un deplacement<br />
c1 = position %5;//On recupere les coordonées de la case<br />
l1 = (position-c1)/5;<br />
//On va maintenant stocker vers ou le pion se déplace<br />
if(direction == 0x00){colonne2 = c1; ligne2 = l1-1;}//Deplacement vers le haut<br />
else if (direction == 0x01){colonne2 = c1; ligne2 = l1+1;}//Deplacement vers le bas<br />
else if (direction == 0x02){colonne2 = c1-1; ligne2 = l1;}//Deplacement vers la gauche<br />
else if (direction == 0x03){colonne2 = c1+1; ligne2 = l1;}//Deplacement vers la droite<br />
console.log('I'+'A'+c1+','+l1);//Pour debug, de ou il part<br />
console.log('I'+'W'+colonne2+','+ligne2);//vers ou il va<br />
qui_mange_qui_arduino();//Verification si des pions sont mangés<br />
//on effectue le deplacement sur la grille<br />
aux = grille[c1][l1];<br />
grille[c1][l1] = grille[colonne2][ligne2];<br />
grille[colonne2][ligne2] = aux;<br />
aQuiLeTour=0;//C'est maintenant au tour de l'ordinateur de jouer<br />
envoie_voisins(ligne2, colonne2);//On envoit le nouveau voisinnage à l'Arduino<br />
}<br />
}<br />
<br />
if (debut_partie==1){end_game();}<br />
for (var i = 0; i<5; i++) // affiche la grille<br />
{<br />
for (var j = 0; j<5; j++)<br />
{<br />
ctx.beginPath(); // debut affichage<br />
ctx.rect(10+110*i, 10+110*j, 100, 100); //affiche carré (coord x, coord y, taille x, taille y)<br />
ctx.fillStyle = "rgba(200,200,200,1)"; // init couleur grise Red=200 Green=200 Blue=200 opacité=1<br />
ctx.fill(); //replissage du caré avec la couleur<br />
ctx.closePath(); // fin affichage<br />
<br />
ctx.beginPath();<br />
ctx.arc(60+110*i, 60+110*j, 25, 0, Math.PI*2, false); //affiche cercle (Pion)<br />
if (grille[i][j] == 'n'){<br />
ctx.fillStyle = "rgba(30,30,30,1)"; //pion noir<br />
}<br />
else if (grille[i][j] == 'b'){<br />
ctx.fillStyle = "rgba(250,250,250,1)"; // pion blanc<br />
}<br />
ctx.fill();<br />
ctx.closePath();<br />
<br />
<br />
}<br />
}<br />
est_possible=0;<br />
if (fin_departie==1 && blancs_perdent){alert("La partie est terminée ! Bravo à l'équipe noire.");}<br />
if (fin_departie==1 && noirs_perdent){alert("La partie est terminée ! Bravo à l'équipe blanche.");}<br />
}<br />
<br />
<br />
</script><br />
<br />
</body><br />
</html></div>Nmartin2