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(""); } } }