From 76af0d7849fc262b2f9f446757d942f0c59920c3 Mon Sep 17 00:00:00 2001 From: fofana Date: Fri, 6 Jan 2023 18:06:32 +0100 Subject: [PATCH] oui --- Puissance4.html | 169 ++++++++++++++++++++-------------------- Puissance4.js | 200 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 282 insertions(+), 87 deletions(-) diff --git a/Puissance4.html b/Puissance4.html index f11f364..e353341 100644 --- a/Puissance4.html +++ b/Puissance4.html @@ -1,84 +1,85 @@ - - - - - - - - - Puissance 4 - - - -
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - - \ No newline at end of file +''' + + + + + + + + Puissance 4 + + + +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +''' \ No newline at end of file diff --git a/Puissance4.js b/Puissance4.js index cb13c0c..5a570de 100644 --- a/Puissance4.js +++ b/Puissance4.js @@ -1,17 +1,211 @@ var currentRow = 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){ const cell = e.target.closest('td'); if (!cell) {return;} const row = cell.parentElement; currentRow = row.rowIndex; currentColumn = cell.cellIndex; - test(); + nbOfPlay++; + PlaceCoin(); + CheckIfWin(); }); +//to remove 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. \ No newline at end of file