1 minutes
Un Jeu Que Vous Pouvez Creer En Quinze Minutes Avec HTML CSS et Javascript
Dernière mise à jour: 10 avril, 2022Créez un jeu en seulement 15 minutes avec tous les outils que vous connaissez probablement déjà. Tout le code nécessaire pour que ce jeu soit opérationnel est dans le post, mais il y a beaucoup de place pour l'amélioration. Relevez le défi en créant le jeu vous-même et en l'améliorant.
§Description du Projet
Nous allons créer un jeu de mémoire simple où vous pourrez vous améliorer de nombreuses façons si vous le souhaitez à l'avenir. C'est très facile à créer et une bonne pratique de vos compétences Javascript. Fondamentalement, vous essayez de trouver les photos correspondantes et de gagner. Ne vous inquiétez pas si vous n'êtes qu'un débutant, le code est assez facile à comprendre pour vous. HTML et CSS sont très basiques. Dans la partie javascript, j'ai essayé d'expliquer le code dans les commentaires.
Je n'ai mis en œuvre aucune logique pour réellement gagner le jeu, garder un score ou redémarrer le jeu.
§La Configuration HTML Simple
Comme je l'ai dit précédemment, la configuration HTML est très basique.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
<title>Memory Game</title>
</head>
<body>
<h1>Find the matching pics</h1>
<div class="board-container">
{# Notre tableau apparaîtra ici #}
</div>
</body>
</html>
Tous les CSS nécessaires que j'ai utilisés :
/* /style.css */
body {
background-color: azure;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.board-container {
background-color: rgb(65, 78, 78);
width: 600px;
height: 600px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-gap:10px;
padding: 20px;
border-radius: 20px;
}
.board-container > * {
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
§Et Javascript Pour La Logique Nécessaire
Tout d'abord, récupérez toutes les images que vous souhaitez utiliser dans votre jeu. Si vous ne voulez pas chercher un tas d'images ici sont les miennes (je veux dire celles que j'ai trouvées en ligne qui étaient gratuites ).
// /main.js
// La logique pour randomiser le tableau d'images
const shuffle = (objects) => {
for (let i = objects.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = objects[i];
objects[i] = objects[j];
objects[j] = temp;
}
}
window.onload = async () => {
// obtenez le conteneur de planche
let boardContainer = await document.querySelector('.board-container');
// doubler la taille de mon tableau et randomiser le contenu
const doubleAndRender = async (objects, objectsLength) => {
for (let i = 0; i < objectsLength; i++){
objects.push({"id":19+i, "src": `${i+1}.png`})
}
// mélanger mon tableau un tas de fois
// pas vraiment nécessaire de le faire 3 fois :)
await shuffle(objects);
await shuffle(objects);
await shuffle(objects);
for(let i = 0; i < objects.length; i++){
let div = document.createElement("div");
div.style.background = "red";
// donnez le numéro png comme classe à utiliser plus tard
div.classList.add("grid-item", `${objects[i]["id"]}.png`)
// id obtiendra le numéro du png sans l'extension ".png"
div.setAttribute("id", `${objects[i]["id"]}`)
boardContainer.appendChild(div)
};
};
await shuffle(objects);
await doubleAndRender(objects, 18);
}
Et c'est là que la magie opère. La logique peut être trouvée dans les commentaires ci-dessous.
// gardez une trace du nombre d'images ouvertes à faire correspondre
let num = 0;
// première image cliquée
var target1;
// deuxième image cliqué
var target2;
window.addEventListener('click', (e) => {
// J'ai numéroté mes pngs pour les utiliser facilement ici (1.png, 2.png, etc.)
// et avec pngNum je garde une trace des pngs
let pngNum;
// Nous vérifions 3 cas différents :
// est-ce un grid-item
// n'est-il pas "active"
// a-t-il plusieurs classes
if(e.target.classList.contains("grid-item") && e.target.classList[1] && !e.target.classList.contains("active")){
// le numéro du png pour correspondance plus tard
if(e.target.classList[1].split(".")[0] <= 18){
pngNum = e.target.classList[1].split(".")[0];
} else {
pngNum = e.target.classList[1].split(".")[0] - 18;
}
// s'il n'y a pas d'image ouverte "active"
if(num === 0){
target1 = e.target;
// créer l'image sur le grid-item sur lequel on a cliqué
let image = document.createElement("img");
image.src = `pngs/${pngNum}.png`
image.style.maxWidth= '64px';
target1.appendChild(image)
// Incrémenter le nombre d'images actives à faire correspondre
num += 1;
// quand il y a déjà une image active
} else if(num == 1){
if(target1 !== e.target){
target2 = e.target;
let image = document.createElement("img");
image.src = `pngs/${pngNum}.png`
image.style.maxWidth= '64px';
target2.appendChild(image)
num += 1;
}
// lorsque deux images sont ouvertes/révélées
} else if(num == 2){
// If both ids are higher than the number of pngs there can't be a match
if(parseInt(target1.id) > 18 && (parseInt(target2.id) > 18)) {
num = 0;
target1.removeChild(target1.childNodes[0]);
target2.removeChild(target2.childNodes[0]);
}
// Si les deux ids sont supérieurs au nombre de png, il ne peut y avoir de correspondance
else if (parseInt(target1.id) <= 18 && (parseInt(target2.id) <= 18)){
console.log("both low, not a match");
num = 0;
target1.removeChild(target1.childNodes[0]);
target2.removeChild(target2.childNodes[0]);
}
// commencer à rechercher une correspondance
else {
if(parseInt(target1.id) > 18) {
// logique de correspondance
if(parseInt(target1.id) - 18 == parseInt(target2.id)){
// Add active so they won't be mixed with the unmatched ones
target1.classList.add("active")
target2.classList.add("active")
// Ajouter de la couleur ainsi qu'un indicateur
target1.style.background = "white";
target2.style.background = "white";
// le nombre d'images ouvertes à faire correspondre doit être 0
num = 0;
}else {
// Pas de correspondance
target1.removeChild(target1.childNodes[0]);
target2.removeChild(target2.childNodes[0]);
num = 0
}
}else if(parseInt(target2.id) > 18) {
if(parseInt(target2.id) - 18 == parseInt(target1.id)){
target1.classList.add("active")
target2.classList.add("active")
target1.style.background = "white";
target2.style.background = "white";
num = 0;
} else {
target1.removeChild(target1.childNodes[0]);
target2.removeChild(target2.childNodes[0]);
num = 0;
}
}
}
}
}
})
§Prochaines Étapes et Améliorations Possibles
Ce projet n'est même pas près d'être terminé. La bonne chose à ce sujet est que cela signifie qu'il y a place à l'amélioration que vous pouvez faire vous-même pour l'améliorer. Peut-être ajouter une animation flip, implémenter une meilleure logique pour rendre les images en cartes, permettre aux gens de créer leurs propres jeux avec leurs propres images... Il y a tellement de choses qui peuvent être ajoutées à ce jeu.
Comme vous pouvez le voir, ce jeu n'a pas du tout été difficile à créer. Il y a tellement de choses que vous pouvez créer avec HTML, CSS et javascript de base. Ce n'était qu'un exemple rapide du genre de choses que vous pouvez créer en utilisant simplement vos connaissances de base en développement Web.
Ilker AkbiyikTable Des Matières
Articles Similaires
