fofana/Projet_Web
3
2
Fork 0
Code Issues Pull requests Releases Wiki Activity

oui

Browse source
This commit is contained in:
El Haji Fofana 2023-01-06 18:06:32 +01:00
parent 2c5888d64c
commit 76af0d7849
2 changed files with 282 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

169
Puissance4.html
View file

@ -1,84 +1,85 @@
<!DOCTYPE HTML> ''' <!DOCTYPE HTML>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Puissance4.css" type="text/css"> <link rel="stylesheet" href="Puissance4.css" type="text/css">
<script type="text/javascript" src="Puissance4.js" defer></script> <script type="text/javascript" src="Puissance4.js" defer></script>
<html> <html>
<head> <head>
<title>Puissance 4</title> <title>Puissance 4</title>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="Page1.html">Home</a> <a href="Page1.html">Home</a>
<a href="Puissance4.html">Puissance 4</a> <a href="Puissance4.html">Puissance 4</a>
<a href="Morpion.html">Morpion</a> <a href="Morpion.html">Morpion</a>
<a href="Snake.html">Snake</a> <a href="Snake.html">Snake</a>
<a href="JustePrix.html">Juste Prix</a> <a href="JustePrix.html">Juste Prix</a>
</nav> </nav>
</header> </header>
<main> <main>
<section> <section>
<table id="Board"> <table id="Board">
<tr> <tr>
<td></td> <td id="td00"></td>
<td></td> <td id="td01"></td>
<td></td> <td id="td02"></td>
<td></td> <td id="td03"></td>
<td></td> <td id="td04"></td>
<td></td> <td id="td05"></td>
<td></td> <td id="td06"></td>
</tr> </tr>
<tr> <tr>
<td></td> <td id="td10"></td>
<td></td> <td id="td11"></td>
<td></td> <td id="td12"></td>
<td></td> <td id="td13"></td>
<td></td> <td id="td14"></td>
<td></td> <td id="td15"></td>
<td></td> <td id="td16"></td>
</tr> </tr>
<tr> <tr>
<td></td> <td id="td20"></td>
<td></td> <td id="td21"></td>
<td></td> <td id="td22"></td>
<td></td> <td id="td23"></td>
<td></td> <td id="td24"></td>
<td></td> <td id="td25"></td>
<td></td> <td id="td26"></td>
</tr> </tr>
<tr> <tr>
<td></td> <td id="td30"></td>
<td></td> <td id="td31"></td>
<td></td> <td id="td32"></td>
<td></td> <td id="td33"></td>
<td></td> <td id="td34"></td>
<td></td> <td id="td35"></td>
<td></td> <td id="td36"></td>
</tr> </tr>
<tr> <tr>
<td></td> <td id="td40"></td>
<td></td> <td id="td41"></td>
<td></td> <td id="td42"></td>
<td></td> <td id="td43"></td>
<td></td> <td id="td44"></td>
<td></td> <td id="td45"></td>
<td></td> <td id="td46"></td>
</tr> </tr>
<tr> <tr>
<td></td> <td id="td50"></td>
<td></td> <td id="td51"></td>
<td></td> <td id="td52"></td>
<td></td> <td id="td53"></td>
<td></td> <td id="td54"></td>
<td></td> <td id="td55"></td>
<td></td> <td id="td56"></td>
</tr> </tr>
</table> </table>
</section> </section>
</main> </main>
<footer>&copy; Copyright 2022 by Sahel Olivan. All Rights Reserved.</footer> <footer>&copy; Copyright 2022 by Sahel Olivan. All Rights Reserved.</footer>
</body> </body>
</html> </html>
'''

200
Puissance4.js
View file

@ -1,17 +1,211 @@
var currentRow = 0; var currentRow = 0;
var currentColumn = 0; var currentColumn = 0;
var nbOfPlay = 0;
var columnFill0 = 5;
var columnFill1 = 5;
var columnFill2 = 5;
var columnFill3 = 5;
var columnFill4 = 5;
var columnFill5 = 5;
var columnFill6 = 5;
var currentPosition = [0,0];
var countYellow = 0;
var countRed = 0;
const tbody = document.querySelector('#Board'); //update currentRow, currentColumn, nbOfPlay and calls for placeCoin, everytime we press a cell
const tbody = document.querySelector('#Board');
tbody.addEventListener('click', function (e){ tbody.addEventListener('click', function (e){
const cell = e.target.closest('td'); const cell = e.target.closest('td');
if (!cell) {return;} if (!cell) {return;}
const row = cell.parentElement; const row = cell.parentElement;
currentRow = row.rowIndex; currentRow = row.rowIndex;
currentColumn = cell.cellIndex; currentColumn = cell.cellIndex;
test(); nbOfPlay++;
PlaceCoin();
CheckIfWin();
}); });
//to remove
function test(){ function test(){
console.log(currentRow, currentColumn); console.log(currentRow, currentColumn, nbOfPlay, currentPosition);
} }
//place a coin on the board accordingly to the rules
//variable columnFill = nb of cell free of a coin in this column (max = 0(start at 5))
//place coin at colomnFill + 1 and update columnFill
//place coin : change background-color : pair nbOfPlay : red, odd nbOfPlay : yellow
//if columnFill > 5 then catch error and alert(column is already filled) and don't count the play
//also calls for CheckIfWin after each play
function PlaceCoin(){
try{
switch (currentColumn) {
case 0:
currentPosition = [columnFill0,currentColumn];
if (nbOfPlay % 2 == 0){
document.getElementById('td'+columnFill0+currentColumn).style.backgroundColor = "red";
columnFill0--;
}
else{
document.getElementById('td'+columnFill0+currentColumn).style.backgroundColor = "yellow";
columnFill0--;
}
break;
case 1:
currentPosition = [columnFill1,currentColumn];
if (nbOfPlay % 2 == 0){
document.getElementById('td'+columnFill1+currentColumn).style.backgroundColor = "red";
columnFill1--;
}
else{
document.getElementById('td'+columnFill1+currentColumn).style.backgroundColor = "yellow";
columnFill1--;
}
break;
case 2:
currentPosition = [columnFill2,currentColumn];
if (nbOfPlay % 2 == 0){
document.getElementById('td'+columnFill2+currentColumn).style.backgroundColor = "red";
columnFill2--;
}
else{
document.getElementById('td'+columnFill2+currentColumn).style.backgroundColor = "yellow";
columnFill2--;
}
break;
case 3:
currentPosition = [columnFill3,currentColumn];
if (nbOfPlay % 2 == 0){
document.getElementById('td'+columnFill3+currentColumn).style.backgroundColor = "red";
columnFill3--;
}
else{
document.getElementById('td'+columnFill3+currentColumn).style.backgroundColor = "yellow";
columnFill3--;
}
break;
case 4:
currentPosition = [columnFill4,currentColumn];
if (nbOfPlay % 2 == 0){
document.getElementById('td'+columnFill4+currentColumn).style.backgroundColor = "red";
columnFill4--;
}
else{
document.getElementById('td'+columnFill4+currentColumn).style.backgroundColor = "yellow";
columnFill4--;
}
break;
case 5:
currentPosition = [columnFill5,currentColumn];
if (nbOfPlay % 2 == 0){
document.getElementById('td'+columnFill5+currentColumn).style.backgroundColor = "red";
columnFill5--;
}
else{
document.getElementById('td'+columnFill5+currentColumn).style.backgroundColor = "yellow";
columnFill5--;
}
break;
case 6:
currentPosition = [columnFill6,currentColumn];
if (nbOfPlay % 2 == 0){
document.getElementById('td'+columnFill6+currentColumn).style.backgroundColor = "red";
columnFill6--;
}
else{
document.getElementById('td'+columnFill6+currentColumn).style.backgroundColor = "yellow";
columnFill6--;
}
break;
}
}
catch{
nbOfPlay--;
currentPosition[0] = 0;
}
}
let moves = 0;
function CheckIfWin() {
moves++
if (moves < 7){
// Check if the current player has won
// Check for horizontal win
for (let row = 0; row < 6; row++) {
for (let col = 0; col < 4; col++) {
const cell1 = getComputedStyle(document.getElementById(`td${row}${col}`)).backgroundColor;
const cell2 = getComputedStyle(document.getElementById(`td${row}${col + 1}`)).backgroundColor;
const cell3 = getComputedStyle(document.getElementById(`td${row}${col + 2}`)).backgroundColor;
const cell4 = getComputedStyle(document.getElementById(`td${row}${col + 3}`)).backgroundColor;
if (cell1 === cell2 && cell2 === cell3 && cell3 === cell4 && cell1 !== "rgb(255, 255, 255)") {
// Display winning message
alert(`Player ${cell1} wins!`);
return;
}
}
}
// Check for vertical win
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 7; col++) {
const cell1 = getComputedStyle(document.getElementById(`td${row}${col}`)).backgroundColor;
const cell2 = getComputedStyle(document.getElementById(`td${row + 1}${col}`)).backgroundColor;
const cell3 = getComputedStyle(document.getElementById(`td${row + 2}${col}`)).backgroundColor;
const cell4 = getComputedStyle(document.getElementById(`td${row + 3}${col}`)).backgroundColor;
if (cell1 === cell2 && cell2 === cell3 && cell3 === cell4 && cell1 !== "rgb(255, 255, 255)") {
// Display winning message
alert(`Player ${cell1} wins!`);
return;
}
}
}
// Check for diagonal win (top left to bottom right)
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 4; col++) {
const cell1 = getComputedStyle(document.getElementById(`td${row}${col}`)).backgroundColor;
const cell2 = getComputedStyle(document.getElementById(`td${row + 1}${col + 1}`)).backgroundColor;
const cell3 = getComputedStyle(document.getElementById(`td${row + 2}${col + 2}`)).backgroundColor;
const cell4 = getComputedStyle(document.getElementById(`td${row + 3}${col + 3}`)).backgroundColor;
if (cell1 === cell2 && cell2 === cell3 && cell3 === cell4 && cell1 !== "rgb(255, 255, 255)") {
// Display winning message
alert(`Player ${cell1} wins!`);
return;
}
}
}
// Check for diagonal win (top right to bottom left)
for (let row = 0; row < 3; row++) {
for (let col = 3; col < 7; col++) {
const cell1 = getComputedStyle(document.getElementById(`td${row}${col}`)).backgroundColor;
const cell2 = getComputedStyle(document.getElementById(`td${row + 1}${col - 1}`)).backgroundColor;
const cell3 = getComputedStyle(document.getElementById(`td${row + 2}${col - 2}`)).backgroundColor;
const cell4 = getComputedStyle(document.getElementById(`td${row + 3}${col - 3}`)).backgroundColor;
if (cell1 === cell2 && cell2 === cell3 && cell3 === cell4 && cell1 !== "rgb(255, 255, 255)") {
// Display winning message
alert(`Player ${cell1} wins!`);
return;
}
}
}
}
else if (moves > 42){
alert("it's a tie!")
}
return;
}
//il faudrait que je mette un autre message d'érreur que leode rgb de la couleur.