Salut à tous. Dans le tutoriel d'aujourd'hui, nous allons apprendre à créer le jeu Puissance 4. Pour créer ce jeu, nous avons besoin de HTML, CSS et JavaScript.
Il s'agit d'un jeu JavaScript de niveau expert
Dans ce jeu, nous attribuons à chaque joueur quelques disques. Le but de ce jeu est de faire tomber les disques dans des espaces vides. Ensuite, les joueurs doivent connecter quatre disques verticalement, horizontalement ou en diagonale. Le premier joueur à le faire gagne. C'est un jeu à deux joueurs. Si tous les espaces vides sont remplis sans que personne ne connecte de disques, alors le jeu est considéré comme terminé.
Avant de commencer à coder, jetons un coup d'œil à la structure du dossier du projet. Le dossier du projet appelé "Puissance 4" contient trois fichiers. Ces fichiers sont index.html, style.css et script.js. Le premier fichier est le document HTML, le deuxième est la feuille de style, et enfin, nous avons le fichier script.
HTML
Nous commençons avec le fichier HTML. Copiez le code ci-dessous et collez-le dans votre document HTML. Appuyez deux fois pour copier le code.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Puissance 4</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Feuille de style -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div id="playerTurn">Texte de démonstration</div>
<div class="container"></div>
<div id="information">
<div class="player-wrappers">
Joueur 1
<div class="player1"></div>
</div>
<div class="player-wrappers">
Joueur 2
<div class="player2"></div>
</div>
</div>
</div>
<div class="startScreen">
<div id="message"></div>
<button id="start">Commencer le jeu</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS
Phase suivante : stylisez ce jeu en utilisant CSS. Pour cela, copiez le code fourni ci-dessous et collez-le dans votre feuille de style. Appuyez deux fois pour copier.
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
background-color: #416cea;
}
.wrapper {
width: 33.75em;
background-color: #ffffff;
position: absolute;
padding: 2em;
transform: translateX(-50%);
left: 50%;
top: 1.25em;
border-radius: 0.5em;
}
.container {
margin: 1.25em auto;
width: 33.75em;
border-radius: 0.6em;
overflow: hidden;
background-color: #416cea;
}
#information {
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
}
.player-wrappers {
display: flex;
align-items: center;
flex-direction: column;
}
.player1:before {
content: "";
display: inline-block;
width: 3.12em;
height: 3.12em;
border-radius: 50%;
background: radial-gradient(#fff04e 1.12em, #ffc400 1.25em);
}
.player2:before {
content: "";
display: inline-block;
width: 3.12em;
height: 3.12em;
border-radius: 50%;
background: radial-gradient(#ff4747 1.12em, #c00303 1.25em);
}
#playerTurn {
margin: 1em 0;
text-align: right;
}
#playerTurn span {
font-weight: 600;
}
.startScreen {
position: absolute;
top: 0;
height: 100vh;
width: 100vw;
background-color: #416cea;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.startScreen button {
background-color: #ffffff;
font-size: 1.4em;
padding: 1em 2em;
border: none;
outline: none;
border-radius: 2em;
cursor: pointer;
}
.grid-row {
margin: 0 auto;
display: flex;
}
.grid-box {
width: 5em;
height: 5em;
display: grid;
place-items: center;
background: radial-gradient(white 1.37em, #416cea 1.43em);
cursor: pointer;
}
.hide {
display: none;
}
#message {
margin-bottom: 1em;
color: #ffffff;
font-size: 1.2em;
}
JavaScript
Ensuite, nous mettons en œuvre la logique et les fonctionnalités de ce jeu en utilisant des étapes simples. Nous le faisons en utilisant JavaScript. Maintenant, copiez le code ci-dessous et collez-le dans un fichier script.
//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();
});
Merci pour votre Lecture
Et voilà, nous avons parcouru ensemble un voyage passionnant à travers le monde de Recréer le jeu Puissance 4 avec HTML CSS et JavaScript. J'espère que vous avez trouvé cette exploration enrichissante et que vous êtes prêts à affronter de nouveaux défis passionnants dans le monde du code.
Si vous avez encore des questions ou si vous avez besoin d'aide pour vos projets, n'hésitez pas à partager vos réflexions dans la section des commentaires ou à nous contacter. Nous sommes toujours là pour vous aider à illuminer votre chemin vers le succès.
N'oubliez pas de partager cet article avec vos amis, et restez connectés à notre blog pour encore plus de contenus captivants, astuces, et aventures dans le monde du code !
Aureur du post
Nous sommes la Coding Team 🚀, une équipe de 3 passionnés basée au Sénégal. Notre mission ? Vous embarquer dans le voyage captivant de la programmation et de la technologie. Prêts à coder avec style ? Rejoignez-nous pour une aventure geek et cool ! …
Enregistrer un commentaire
N'hésitez pas de mentionner votre nom d'utilisateur Telegram à la fin de votre message pour recevoir des cadeaux de la part des modérateurs. Merci de commenter