dans mon jeu il faut trouvé une casse en particulier celle-ci une fois découverte est de couleur verte et vous gagnez la partie. si vous avez gagnée les cliques dans le jeu ne son plus permis.
les casses de couleur rouge sont le nombre d'essais que vous avez utilisé et affiche un nombre qui indique la distance ou se situe la casse a découvrir
voici une photo du rendu final que j'aimerais avoir.
https://ibb.co/9vX00dG
Premier problème.
il me reste à indiquer dans la case que je clique l'écart maximum (de lignes ou de la colonne) par rapport à la cible(casse vert)
comme on peut voir sur l'image les casses de couleur rouge ont un chiffre 1 et 3 pour dire la distance que la casse verte ce situ
deuxième problème
si la cible est atteinte (casse verte) empêcher tout nouveau clic
voici mon
Code JavaScript :
Code : Tout sélectionner
let jeuModulePattern = (function () {
// déclarer les variables du module
let eTr;
let eTd;
let randomY;
let randomX;
let eNbCoups = 0;
let oCibleDansGrille = {
// fonction au chargement de la page
// =================================
initialiserPage: function () {
// - initialiser le jeu
oCibleDansGrille.initialiserJeu();
//recuperation de l'id bouton nouvejeu
let nouveauJeu = document.getElementById("nouveauJeu");
nouveauJeu.addEventListener("click", function () {
oCibleDansGrille.initialiserJeu();
});
},
// fonction d'initialisation d'un nouveau jeu
// ==========================================
initialiserJeu: function () {
//Reset la grille avec les nouvelles valeur.
document.getElementById("grille").innerHTML = "";
//Reset le nombre de coups.
eNbCoups = document.getElementById("nbCoups").innerHTML = 0;
//recuperation des valeur input html nlignes et nbColonnes
let axeX = document.querySelector("input[name=nbLignes]").value;
let axeY = document.querySelector("input[name=nbColonnes]").value;
// donne un possition aléatoire selon la position X Y
randomY = Math.floor(Math.random() * axeY);
randomX = Math.floor(Math.random() * axeX);
//Recuperation de l'id grille
let eGrille = document.getElementById("grille");
//creation des TR dans le dom via le nombre entré dans le nbLignes(axeY)
for (var i = 0; i < axeY; i++) {
eTr = document.createElement("tr");
eGrille.appendChild(eTr).setAttribute("data-c", [i]);
//creation des TD dans le dom via le nombre entré dans le nbColonnes(axeX)
for (var j = 0; j < axeX; j++) {
eTd = document.createElement("td");
eTr.appendChild(eTd).setAttribute("data-l", [j]);
//apelle la fonction jouer
eTd.addEventListener("click", function (evt) {
oCibleDansGrille.jouer(evt);
});
}
}
},
// fonction de traitement d'un clic sur une case
// =============================================
jouer: function (evt) {
//recupere la colonne et sa valeur.
let bonneReponceColonne = evt.target.parentNode.getAttributeNode("data-c")
.value;
//recupere la ligne et sa valeur.
let bonneReponceLigne = evt.target.getAttributeNode("data-l").value;
//verification si le nombre randomY et randomX sont egale aux bonnereponses
if (bonneReponceColonne == randomY && bonneReponceLigne == randomX) {
evt.target.classList.add("ok");
} else {
evt.target.classList.add("ko");
}
document.getElementById("nbCoups").innerHTML = eNbCoups += 1;
},
};
return oCibleDansGrille;
})();
voici mon
Code HTML :
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>TP2, partie 1 avec un module pattern</title>
<style>
body {
margin: 40px auto;
width: 80%;
font-family: Arial, sans-serif;
}
label {
margin-right: 20px;
}
label:nth-of-type(2) {
margin-left: 40px;
}
input {
padding: 0 5px;
line-height: 28px;
font-size: 16px;
font-family: Arial, sans-serif;
}
input[type="button"] {
display: block;
margin: 20px 0;
padding: 5px 20px;
}
#nbCoups {
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
}
.cliquable {
cursor: pointer;
}
td {
width: 40px;
height: 40px;
border: 3px solid #000;
}
.ok {
background-color: limegreen;
}
.ko {
background-color: salmon;
}
</style>
<script src="jeuModulePattern.js"></script>
<script>
window.addEventListener("load", function () {
jeuModulePattern.initialiserPage();
});
</script>
</head>
<body bgcolor="lightblue">
<form name="frm">
<label>Nombre de lignes</label
><input
name="nbLignes"
id="nbLignes"
type="number"
value="10"
min="2"
max="20"
/>
<label>Nombre de colonnes</label
><input
name="nbColonnes"
id="nbColonnes"
type="number"
value="10"
min="2"
max="20"
/>
<input
type="button"
id="nouveauJeu"
name="nouveauJeu"
value="Nouveau jeu"
/>
</form>
<section>
<h2>Trouvez la cible</h2>
<p>Nombre de coups joués : <span id="nbCoups"></span></p>
<table id="grille">
<!-- exemple de structure de grille à générer dans le module pattern,
chaque ligne tr a un dataset "l" qui contient le numéro de ligne,
chaque cellule td a un dataset "c" qui contient le numéro de colonne:
<tr data-l=1><td data-c=1></td><td data-c=2></td><td data-c=3></td></tr>
<tr data-l=2><td data-c=1></td><td data-c=2></td><td data-c=3></td></tr>
<tr data-l=3><td data-c=1></td><td data-c=2></td><td data-c=3></td></tr>
-->
</table>
</section>
</body>
</html>
