logo

SYTEME DE DESIGN

Puissance APuissance 4

 
 
 
 
 
 
 
 
Grille

HTML

copy 
<h3>Puissance A</h3>
<div id="grid">
	<div id="token">
	  <div id="grid_token">&nbsp;</div>
	  <div id="column1">&nbsp;</div>
	  <div id="column2">&nbsp;</div>
	  <div id="column3">&nbsp;</div>
	  <div id="column4">&nbsp;</div>
	  <div id="column5">&nbsp;</div>
	  <div id="column6">&nbsp;</div>
	  <div id="column7">&nbsp;</div>
	</div>
	<div id="grid_img">
    <img src="html/img/puissance4/plateau-puissance4.png" alt="Grille" usemap="#Map"/>
    <map name="Map">  
		<area shape="rect" coords="45,18,118,456" href="javascript:jeux(1);">
        <area shape="rect" coords="118,18,191,456" href="javascript:jeux(2);">
        <area shape="rect" coords="191,18,264,456" href="javascript:jeux(3);">
        <area shape="rect" coords="264,18,337,456" href="javascript:jeux(4);">
        <area shape="rect" coords="337,18,410,456" href="javascript:jeux(5);">
        <area shape="rect" coords="410,18,483,456" href="javascript:jeux(6);">
        <area shape="rect" coords="483,18,556,456" href="javascript:jeux(7);">
	</map>
	</div>
	<div id="bouton">
		<button onClick="action();">Nouveau</button><button><a href="https://fr.wikipedia.org/wiki/Puissance_4" target="_blank">Info</a></button>
	</div>
</div>

CSS

copy 
#grid {
	position: relative;
	display: block;
	width: 600px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
}

#token {
	position: absolute;
	z-index: 1;
	display:flex;
	left: 44px;
	top: 20px;
	width: 510px;
	height: 436px;
	flex-direction:row;
}

#grid_img {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
}

#grid_token {
	position: absolute;
	z-index: 0;
	display: grid;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	grid-template-columns: 73px 73px 73px 73px 73px 73px 73px;
	grid-template-rows: 73px 73px 73px 73px 73px 73px;
}

#column1, #column2, #column3, #column4, #column5, #column6, #column7 {
	position: relative;
	width: 73px;
	height: 100%;
	display: grid;
}

button:focus {
	outline-style:none;
}

#bouton {
	position:relative;
	text-align: center;
}


#bouton button {
    color: #000;
	padding: 0.2rem 1rem;
	border: none;
	border-radius: 20px;
	background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);		
}

#bouton button:hover {
	color: red;
	background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
	background-color: rgba(28, 98, 243, .25);
}

#bouton button:active {
	color: #fff;
	background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .6),
                inset -2px -2px 3px rgba(255, 255, 255, .6);	
}

#bouton button:first-child {
	margin-right: 5rem;
}

#bouton button a {
	color: #000!important;
}

#bouton button a:hover {
	color: red!important;
}


@media (min-width: 320px) {
	
	#grid {
		width: 300px;
		height: 300px;
	}
	
	#token {
		left: 22px;
		top: 10px;		
		width: 251px;
		height: 220px;
	}	
	
	#column1, #column2, #column3, #column4, #column5, #column6, #column7 {
		width: 40px;
	}
	
	#grid_token {
		grid-template-columns: 36px 36px 36px 36px 36px 36px 36px;
		grid-template-rows: 36px 36px 36px 36px 36px 36px;
	}
	
	#page-design h3 {
		width: 50%;
	}	
	
}

@media (min-width: 600px) {
	
	#grid {
		width: 500px;
		height: 500px;
	}
	
	#grid_token {
		grid-template-columns: 60px 60px 60px 60px 60px 60px 60px;
		grid-template-rows: 60px 60px 60px 60px 60px 60px;
	}	
	
	#token {
		left: 40px;
		top: 20px;		
		width: 420px;
		height: 436px;
	}	
	
	#column1, #column2, #column3, #column4, #column5, #column6, #column7 {
		width: 60px;
	}
	
}

@media (min-width: 768px) {
	
	#grid {
		width: 600px;
		height: 600px;
	}
	
	#grid_token {
		grid-template-columns: 73px 73px 73px 73px 73px 73px 73px;
		grid-template-rows: 73px 73px 73px 73px 73px 73px;
	}	
	
	#token {
		width: 510px;
		height: 436px;
	}	

	#column1, #column2, #column3, #column4, #column5, #column6, #column7 {
		width: 73px;
	}
	
	#page-design h3 {
		width: 10%;
	}	
	
}

JAVASCRIPT

copy 
// JavaScript Document

var pos_game = false;
var token_nb = 0;
var toke_color = 'jeton-jaune.png';
var html = "";
var pos_colomn = 0;
var pos_row = Array(0,0,0,0,0,0,0,0);
var grid_value = [
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0]
];


function action() {
	vider();
	pos_game = true;
}

function jeux(cl) {
	
	if (pos_game == true) {
	token_nb++;
	
	var column = document.getElementById("column" + cl);
	
	column.innerHTML = "
Jeton Jaune
";
	
	pos_colomn = 0;
	setTimeout(function() { place_taken(cl, pos_row[cl]); },10);
	}
}

function place_taken(cl, rw) { // Mise en place des jeton
	
	pos_game = false;
	document.getElementById("token" + token_nb).style = "padding-top: " + pos_colomn + "px";
	
	pos_colomn = pos_colomn + 2;
	
	var Lscreen = screen.width;
	var max = 365;
	var tail = 73;
	
	
	if (Lscreen < 380) {
		tail = 36;
		max = 190;
	}
	
	if (Lscreen > 380 && Lscreen < 768) {
		max = 300;
		tail = 60;
	}
	
	if (Lscreen > 768) {	
		max = 365;
		tail = 73;
	}
	
	
	
	
	if (pos_colomn < (max - (rw * tail))) {
	var t = setTimeout(function() { place_taken(cl, rw); },10);
	} else {
		clearTimeout(t);
		var column = document.getElementById("column" + cl);
		
		
		column.innerHTML = "";
		var grid = document.getElementById("grid_token");
		html = grid.innerHTML;	

		html = html + "
Jeton Jaune
";
		grid.innerHTML = html;
		document.getElementById("token" + token_nb).style = "grid-column: " + cl +"; grid-row: " + (6 - rw) + ";";
		var audio = new Audio("html/mp3/0945.mp3");
		audio.play();
		pos_row[cl]++;
		if (toke_color == 'jeton-jaune.png') { 
			toke_color = 'jeton-rouge.png'; 
			grid_value[cl][6 - rw] = 1; 
		} else { 
			toke_color = 'jeton-jaune.png'; 
			grid_value[cl][6 - rw] = 2; 
		}
		
		control(); // controle du gagnant
	}

	
}


function control() {
	
	for (var y=1; y < 7; y++) { // Controle horizontal
		for (var x=1; x < 5; x++) {
			
		if ( grid_value[x][y] == 1 && grid_value[x+1][y] == 1 && grid_value[x+2][y] == 1 && grid_value[x+3][y] == 1) {
			setTimeout(function() { place_taken(cl, pos_row[cl]); },10);
			var t = setTimeout(function() { message(1); },10);
			break;
		}
		if ( grid_value[x][y] == 2 && grid_value[x+1][y] == 2 && grid_value[x+2][y] == 2 && grid_value[x+3][y] == 2) {
			setTimeout(function() { place_taken(cl, pos_row[cl]); },10);
			var t = setTimeout(function() { message(2); },10);
			break;
		}
	
		}
	}
	
	
	for (var y=1; y < 4; y++) { // Control verticale
		for (var x=1; x < 8; x++) {
			
		if ( grid_value[x][y] == 1 && grid_value[x][y+1] == 1 && grid_value[x][y+2] == 1 && grid_value[x][y+3] == 1) {
			setTimeout(function() { place_taken(cl, pos_row[cl]); },10);
			var t = setTimeout(function() { message(1); },10);
			break;
		}
		if ( grid_value[x][y] == 2 && grid_value[x][y+1] == 2 && grid_value[x][y+2] == 2 && grid_value[x][y+3] == 2) {
			setTimeout(function() { place_taken(cl, pos_row[cl]); },10);
			var t = setTimeout(function() { message(2); },10);
			break;
		}						
	
		}
	}
	
	for (var y=1; y < 4; y++) { // Controle en diagonale
		for (var x=1; x < 5; x++) {
			
			if ( grid_value[x+3][y] == 1 && grid_value[x+2][y+1] == 1 && grid_value[x+1][y+2] == 1 && grid_value[x][y+3] == 1) {
				setTimeout(function() { place_taken(cl, pos_row[cl]); },10);
				var t = setTimeout(function() { message(1); },10);
				break;
			}
			
			if ( grid_value[x+3][y] == 2 && grid_value[x+2][y+1] == 2 && grid_value[x+1][y+2] == 2 && grid_value[x][y+3] == 2) {
				setTimeout(function() { place_taken(cl, pos_row[cl]); },10);
				var t = setTimeout(function() { message(2); },10);
				break;
			}			
			
		}
	}
	
	var total = 0;
	for (var y=1; y < 7; y++) { // Controle mach nul
		for (var x=1; x < 8; x++) {
			if (grid_value[x][y] > 0) { total++; }
		}
	}
	
	if (total == 42) {
		var t = setTimeout(function() { message(3); },10);
	}
	
	pos_game = true;
}

function message(n) {
	if (n == 1) { 
		alert("Le joueur 1 a gagné !"); vider(); pos_game = true; 
	} else if (n == 2) { 
		alert("Le joueur 2 a gagné !"); vider(); pos_game = true; 
	} else if (n == 3) {
		alert("Mach nul !"); vider(); pos_game = true;
	}
	
}

function vider() {
	var grid = document.getElementById("grid_token");
	grid.innerHTML = "";
	for (var cl = 1; cl < 8; cl++) {
		var column = document.getElementById("column" + cl);
		column.innerHTML = "";
	}
	
	pos_game = false;
	token_nb = 0;
	toke_color = 'jeton-jaune.png';
	html = "";
	pos_colomn = 0;
	pos_row = Array(0,0,0,0,0,0,0,0);
	grid_value = [
		[0,0,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0]
	];
	
	
}


function ecrire_area() {
	var Lscreen = screen.width;
	
	if (Lscreen < 380) {
		
		for (var x=0; x < 8; x++) {
			document.write("");
		}
		
	}
	
	if (Lscreen > 380 && Lscreen < 768) {
		
		for (var x=0; x < 8; x++) {
			document.write("");
		}	
		
	} 
	
	if (Lscreen > 768) {
		
		for (var x=0; x < 8; x++) {
			document.write("");
		}
		
	}

}