logo

SYTEME DE DESIGN

HTML

copy
<div class="titre">
	<table width="244" border="0" align="center" cellpadding="0" cellspacing="2" class="grille">
        <tr>
        <td width="80"><a href="#" onclick="return jeux(1);"><img src="html/img/morpion/blanc.jpg" name="case1" width="80" height="80" id="case1" /></a></td>
        <td width="80"><a href="#" onclick="return jeux(2);"><img src="html/img/morpion/blanc.jpg" alt="" width="80" height="80" id="case2" /></a></td>
        <td width="80"><a href="#" onclick="return jeux(3);"><img src="html/img/morpion/blanc.jpg" alt="" width="80" height="80" id="case3" /></a></td>
      </tr>
      <tr>
        <td><a href="#" onclick="return jeux(4);"><img src="html/img/morpion/blanc.jpg" alt="" width="80" height="80" id="case4" /></a></td>
        <td><a href="#" onclick="return jeux(5);"><img src="html/img/morpion/blanc.jpg" alt="" width="80" height="80" id="case5" /></a></td>
        <td><a href="#" onclick="return jeux(6);"><img src="html/img/morpion/blanc.jpg" alt="" width="80" height="80" id="case6" /></a></td>
      </tr>
      <tr>
        <td><a href="#" onclick="return jeux(7);"><img src="html/img/morpion/blanc.jpg" alt="" width="80" height="80" id="case7" /></a></td>
        <td><a href="#" onclick="return jeux(8);"><img src="html/img/morpion/blanc.jpg" alt="" width="80" height="80" id="case8" /></a></td>
        <td><a href="#" onclick="return jeux(9);"><img src="html/img/morpion/blanc.jpg" alt="" width="80" height="80" id="case9" /></a></td>
      </tr>
  </table>     
      <form id="menu" name="menu" method="post" class="bouton">
        <table width="100%" border="0" cellspacing="0" cellpadding="5">
          <tr>
            <td width="50%" align="center"><input type="button" name="2joueur" id="2joueur" value="1 JOUEUR" onclick="return joueur(1);" /></td>
            <td align="center"><input type="button" name="2joueur" id="2joueur" value="2 JOUEUR" onclick="return joueur(2);" /></td>
          </tr>
        </table>
        <p><br />
        </p>
      </form>	
</div>

CSS

copy
#page-design .titre { 
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 348px!important; 
	height: 506px!important;
	background-image:url("../img/morpion/morpion.jpg"); 
	background-repeat: no-repeat;
}

#page-design .grille {
	position: relative;
	display: block;
	padding-top: 170px!important;
	width: 240px;
	height: 240px;
}

#page-design .bouton {
	position: relative;
	display: block;	
	margin-top: 180px;
}


#page-design .grille tr {
	border-bottom: 1px solid #000;
}

#page-design .grille td {
	border-right: 1px solid #000;
}


#page-design .grille tr:last-child {
	border-bottom:none!important
}

#page-design .grille td:last-child {
	border-right: none;
}

JAVASCRIPT

copy
var j = 0; /*-- Type de jeux 1 ou deux joueur --*/
var n = 0; /*-- niveau du jeux --*/
var p = 0; /*-- position joueur 1 --*/
var g = true; /*-- gamer --*/
var a = 0; /*-- valeur aléatoir --*/
var t = 0; /*-- total valeur entrer --*/
var ps = 0; /*-- dernière zéro dans la file --*/
var grille = new Array(0,0,0,0,0,0,0,0,0,0); /*-- grille de jeux --*/
var angles = new Array(1,3,7,9); /*-- les angles du jeux --*/
var angles1 = new Array(1,9); /*-- les angles  du jeux --*/
var angles2 = new Array(3,7); /*-- les angles du jeux --*/
var tab_valide = [
	[1,2,3],
	[4,5,6],
	[7,8,9],
	[1,4,7],
	[2,5,8],
	[3,6,9],
	[1,5,9],
	[3,5,7]
]; /*-- tablea
u des croisemant valide --*/



function vider() {
	j = 0; n = 0; g = true;	
	grille = [0,0,0,0,0,0,0,0,0,0];
	for (var i = 1; i<10; i++) {
		document.getElementById("case"+i).src = "html/img/morpion/blanc.jpg";
	}
}

function valider() {

	var val = 0;
	
	for (var i=0; i<8; i++) {
		var p1 = tab_valide[i][0]; var p2 = tab_valide[i][1]; var p3 = tab_valide[i][2];
		if (grille[p1] == 2 && grille[p2] == 2 && grille[p3] == 2) {
			val = 2;
		}
		if (grille[p1] == 1 && grille[p2] == 1 && grille[p3] == 1) {
			val = 1;
		}		
	}
	
	if (val > 0) {
			if(val == 1) { setTimeout(gamer1, 100); } else { setTimeout(gamer2, 100); }
	}	

	t = 0;
	ps = 0;

	for (var i=0; i<10; i++) {
		if (grille[i] > 0) { 
			t++; 
		} else { 
			ps = i; 
		}
	}
	

	if (t == 7 && val == 0) { 
		setTimeout(draw, 100);		
	}
	
	if (t == 8 && val == 0) {		
		document.getElementById("case"+ps).src = "html/img/morpion/croix.jpg";
		setTimeout(draw, 100);
	}
	
	if (t == 9 && val == 0) { 
		setTimeout(draw, 100);		
	}	
	
}


function gamer1() {
	window.alert("Le joueur 1 à gagné !");
	vider();
}

function gamer2() {
	window.alert("Le joueur 2 à gagné !");
	vider();
}


function draw() {
	window.alert("Match nul, bien jouer !");
	vider();
}


function ordinateur() {
	ord = 0;
	var text_grille = grille.toString();

	// --- jeux 0 --*/
	if (n == 0) {
		if (text_grille === "0,0,0,0,0,1,0,0,0,0") {	
			a = Math.floor(Math.random() * (4 - 0)) + 0;
			ord = angles[a];
		} else {
			ord = 5;
		}
	}
	
	// --- jeux 1 --*/
	if (n == 1) {
		if (text_grille === "0,0,0,1,0,1,0,2,0,0" || text_grille === "0,0,0,2,0,1,0,1,0,0" || text_grille === "0,0,0,1,0,2,0,1,0,0") {
			a = Math.floor(Math.random() * (2 - 0)) + 0;
			ord = angles1[a];
		}
		if (text_grille === "0,1,0,0,0,1,0,0,0,2" || text_grille === "0,2,0,0,0,1,0,0,0,1" || text_grille === "0,1,0,0,0,2,0,0,0,1") {
			a = Math.floor(Math.random() * (2 - 0)) + 0;
			ord = angles2[a];
		}
		if (text_grille === "0,0,1,0,0,2,0,0,1,0" || text_grille === "0,0,0,0,1,2,1,0,0,0") {
			a = Math.floor(Math.random() * (4 - 0)) + 0;
			ord = angles[a];
		}
		
		
		
		
		if (text_grille === "0,0,0,1,1,2,0,0,0,0" || text_grille === "0,0,1,0,0,2,0,1,0,0" || text_grille === "0,0,1,0,1,2,0,0,0,0") {
			ord = 1;
		}
		if (text_grille === "0,0,1,0,0,2,0,0,0,1" || text_grille === "0,0,1,0,0,2,1,0,0,0" || text_grille === "0,1,0,0,0,2,1,0,0,0") {
			ord = 3;
		}		
		if (text_grille === "0,1,0,0,0,2,0,0,1,0" || text_grille === "0,0,0,0,1,2,0,0,0,1" || text_grille === "0,0,0,0,1,2,0,0,1,0") {
			ord = 7;
		}			
		if (text_grille === "0,0,0,1,0,2,0,0,1,0" || text_grille === "0,0,0,0,0,2,1,0,1,0" || text_grille === "0,0,0,0,0,2,1,0,0,0") {
			ord = 9;
		}		
		
		
		
	}
		
	// --- jeux x --*/
	for (var i=0; i<8; i++) {
		var p1 = tab_valide[i][0]; var p2 = tab_valide[i][1]; var p3 = tab_valide[i][2];
		if (grille[p1] == 0 && grille[p2] == 2 && grille[p3] == 2) {
			ord = p1;
		}
		if (grille[p1] == 2 && grille[p2] == 0 && grille[p3] == 2) {
			ord = p2;
		}
		if (grille[p1] == 2 && grille[p2] == 2 && grille[p3] == 0) {
			ord = p3;
		}
	}
	

	if (ord == 0) { // Si jeux 1 et jeux x ne donne rien
		for (var i=0; i<8; i++) {
			var p1 = tab_valide[i][0]; var p2 = tab_valide[i][1]; var p3 = tab_valide[i][2];
			if (grille[p1] == 0 && grille[p2] == 1 && grille[p3] == 1) {
				ord = p1;
			}
			if (grille[p1] == 1 && grille[p2] == 0 && grille[p3] == 1) {
				ord = p2;
			}
			if (grille[p1] == 1 && grille[p2] == 1 && grille[p3] == 0) {
				ord = p3;
			}
		}		
	}
	
	n++;
	
	return ord;
}

function joueur(n) {
	vider();
	j = n;
}

function jeux(c) {
	
	// Jeux contre l'ordinateur
	if (j == 1) {		
		// JOUEUR 1
		if (grille[c] == 0) {
				document.getElementById("case"+c).src = "html/img/morpion/croix.jpg";
				grille[c] = 1; p = c;
		}
		// FIN JOUEUR 1
		
		// ORDINATEUR
		c = ordinateur();
		if (grille[c] == 0) {
				document.getElementById("case"+c).src = "html/img/morpion/rond.jpg";
				grille[c] = 2;
		}
		// FIN ORDINATEUR
		
		setTimeout(valider, 100);
	}
	
	// Jeux à deux joueur
	if (j == 2) {						
		if (grille[c] == 0) {
			if (g == true) {
				document.getElementById("case"+c).src = "html/img/morpion/croix.jpg";
				grille[c] = 1; g = false; valider();
			} else {
				document.getElementById("case"+c).src = "html/img/morpion/rond.jpg";
				grille[c] = 2; g = true; valider();
			}
		}
	}
	
}