Recréer le jeu Puissance 4 avec HTML CSS et JavaScript

//Références initiales
const container = document.querySelector(".container");
const playerTurn = document.getElementById("playerTurn");
const startScreen = document.querySelector(".startScreen");
const startButton = document.getElementById("start");
const message = document.getElementById("message");
let initialMatrix = [
  [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],
];
let currentPlayer;

//Nombre aléatoire dans une plage
const generateRandomNumber = (min, max) =>
  Math.floor(Math.random() * (max - min)) + min;

//Parcourir le tableau et vérifier les mêmes valeurs
const verifyArray = (arrayElement) => {
  let bool = false;
  let elementCount = 0;
  arrayElement.forEach((element, index) => {
    if (element == currentPlayer) {
      elementCount += 1;
      if (elementCount == 4) {
        bool = true;
      }
    } else {
      elementCount = 0;
    }
  });
  return bool;
};

//Vérifier la fin de jeu (dernière étape)
const gameOverCheck = () => {
  let truthCount = 0;
  for (let innerArray of initialMatrix) {
    if (innerArray.every((val) => val != 0)) {
      truthCount += 1;
    } else {
      return false;
    }
  }
  if (truthCount == 6) {
    message.innerText = "Partie terminée";
    startScreen.classList.remove("hide");
  }
};

//Vérifier les lignes
const checkAdjacentRowValues = (row) => {
  return verifyArray(initialMatrix[row]);
};

//Vérifier les colonnes
const checkAdjacentColumnValues = (column) => {
  let colWinCount = 0,
    colWinBool = false;
  initialMatrix.forEach((element, index) => {
    if (element[column] == currentPlayer) {
      colWinCount += 1;
      if (colWinCount == 4) {
        colWinBool = true;
      }
    } else {
      colWinCount = 0;
    }
  });
  //pas de correspondance
  return colWinBool;
};

//Obtenir les valeurs de la diagonale droite
const getRightDiagonal = (row, column, rowLength, columnLength) => {
  let rowCount = row;
  let columnCount = column;
  let rightDiagonal = [];
  while (rowCount > 0) {
    if (columnCount >= columnLength - 1) {
      break;
    }
    rowCount -= 1;
    columnCount += 1;
    rightDiagonal.unshift(initialMatrix[rowCount][columnCount]);
  }
  rowCount = row;
  columnCount = column;
  while (rowCount < rowLength) {
    if (columnCount < 0) {
      break;
    }
    rightDiagonal.push(initialMatrix[rowCount][columnCount]);
    rowCount += 1;
    columnCount -= 1;
  }
  return rightDiagonal;
};

const getLeftDiagonal = (row, column, rowLength, columnLength) => {
  let rowCount = row;
  let columnCount = column;
  let leftDiagonal = [];
  while (rowCount > 0) {
    if (columnCount <= 0) {
      break;
    }
    rowCount -= 1;
    columnCount -= 1;
    leftDiagonal.unshift(initialMatrix[rowCount][columnCount]);
  }
  rowCount = row;
  columnCount = column;
  while (rowCount < rowLength) {
    if (columnCount >= columnLength) {
      break;
    }
    leftDiagonal.push(initialMatrix[rowCount][columnCount]);
    rowCount += 1;
    columnCount += 1;
  }
  return leftDiagonal;
};

//Vérifier la diagonale
const checkAdjacentDiagonalValues = (row, column) => {
  let diagWinBool = false;
  let tempChecks = {
    leftTop: [],
    rightTop: [],
  };
  let columnLength = initialMatrix[row].length;
  let rowLength = initialMatrix.length;

  //Stockez les tableaux diagonaux gauche et droit
  tempChecks.leftTop = [
    ...getLeftDiagonal(row, column, rowLength, columnLength),
  ];

  tempChecks.rightTop = [
    ...getRightDiagonal(row, column, rowLength, columnLength),
  ];
  //vérifiez les deux tableaux pour les similitudes
  diagWinBool = verifyArray(tempChecks.rightTop);
  if (!diagWinBool) {
    diagWinBool = verifyArray(tempChecks.leftTop);
  }
  return diagWinBool;
};

//Logique de vérification de victoire
const winCheck = (row, column) => {
  //si l'une des fonctions renvoie true, nous retournons true
  return checkAdjacentRowValues(row)
    ? true
    : checkAdjacentColumnValues(column)
    ? true
    : checkAdjacentDiagonalValues(row, column)
    ? true
    : false;
};

//Définit le cercle sur des points exacts
const setPiece = (startCount, colValue) => {
  let rows = document.querySelectorAll(".grid-row");
  //Initialement, il placera les cercles dans la dernière ligne, sinon si aucune place n'est disponible, nous décrémenterons le compte jusqu'à ce que nous trouvions un emplacement vide
  if (initialMatrix[startCount][colValue] != 0) {
    startCount -= 1;
    setPiece(startCount, colValue);
  } else {
    //placer le cercle
    let currentRow = rows[startCount].querySelectorAll(".grid-box");
    currentRow[colValue].classList.add("filled", `player${currentPlayer}`);
    //Mettre à jour la matrice
    initialMatrix[startCount][colValue] = currentPlayer;
    //Vérifier les victoires
    if (winCheck(startCount, colValue)) {
      message.innerHTML = `Joueur<span> ${currentPlayer}</span> gagne`;
      startScreen.classList.remove("hide");
      return false;
    }
  }
  //Vérifier si tout est plein
  gameOverCheck();
};

//Lorsque l'utilisateur clique sur une case
const fillBox = (e) => {
  //obtenir la valeur de la colonne
  let colValue = parseInt(e.target.getAttribute("data-value"));
  //5 parce que nous avons 6 lignes (0-5)
  setPiece(5, colValue);
  currentPlayer = currentPlayer == 1 ? 2 : 1;

  playerTurn.innerHTML = `Tour du joueur <span>${currentPlayer}</span>`;
};

//Créer la matrice
const matrixCreator = () => {
  for (let innerArray in initialMatrix) {
    let outerDiv = document.createElement("div");
    outerDiv.classList.add("grid-row");
    outerDiv.setAttribute("data-value", innerArray);
    for (let j in initialMatrix[innerArray]) {
      //Définir toutes les valeurs de la matrice à 0
      initialMatrix[innerArray][j] = [0];
      let innerDiv = document.createElement("div");
      innerDiv.classList.add("grid-box");
      innerDiv.setAttribute("data-value", j);
      innerDiv.addEventListener("click", (e) => {
        fillBox(e);
      });
      outerDiv.appendChild(innerDiv);
    }
    container.appendChild(outerDiv);
  }
};

//Initialiser le jeu
window.onload = startGame = async () => {
  //Entre 1 et 2
  currentPlayer = generateRandomNumber(1, 3);
  container.innerHTML = "";
  await matrixCreator();
  playerTurn.innerHTML = `Tour du joueur <span>${currentPlayer}</span>`;
};

//démarrer le jeu
startButton.addEventListener("click", () => {
  startScreen.classList.add("hide");
  startGame();
});