Puissance A

HTML
copyPuissance A
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 = "
";
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 + "
";
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("");
}
}
}