Compare commits
2 commits
d42e1724e8
...
3626a45cc3
| Author | SHA1 | Date | |
|---|---|---|---|
|
3626a45cc3 | ||
|
2dd7af4445 |
6 changed files with 97 additions and 36 deletions
|
|
@ -11,23 +11,29 @@
|
|||
</head>
|
||||
<body id="body_demineur">
|
||||
|
||||
<nav id="nav_demineur">
|
||||
<div class="item_nav">
|
||||
<a href="main.html">Home</a>
|
||||
<nav id="nav_demineur">
|
||||
|
||||
<div class="item_nav">
|
||||
<a href="main.html">Home</a>
|
||||
</div>
|
||||
<div class="item_nav">
|
||||
<a href="https://demineur.nhtdev.com/fr/rules">Help</a>
|
||||
<a href="help.html">Help</a>
|
||||
</div>
|
||||
|
||||
<div class="item_nav">
|
||||
Temps:
|
||||
<input id="temps" type="number" value="0" disabled>
|
||||
Temps:
|
||||
<input id="temps" type="number" value="0" disabled>
|
||||
</div>
|
||||
|
||||
<div class ="item_nav" id="affichage_nombre_mines">
|
||||
Nombre total de mines : 10
|
||||
</div>
|
||||
|
||||
<div class="item_nav">
|
||||
<a id="options-button" href="#" onclick="options()">Options</a>
|
||||
</div>
|
||||
</nav>
|
||||
<a id="options-button" href="#" onclick="options()">Options</a>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
<div id="jeu">
|
||||
|
|
|
|||
61
demineur.js
61
demineur.js
|
|
@ -33,6 +33,7 @@ function gererOptions() {
|
|||
nombre_mines = newNumberMines;
|
||||
|
||||
document.getElementById('options-popup').classList.remove('show');
|
||||
document.getElementById("affichage_nombre_mines").innerText = "Nombre total de mines : " + nombre_mines.toString() ;
|
||||
resetJeu();
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +63,8 @@ function MontrerMines() { //révèle toutes les mines sur le plateau après un e
|
|||
for (let j = 0; j < largeur; j++) {
|
||||
if (grille[i][j] === 9) {
|
||||
const mineCase = document.getElementById(i + "_" + j);
|
||||
mineCase.style.background = "url('case_9.png')";
|
||||
mineCase.src = "case_9.png";
|
||||
mineCase.alt = "Mine" ;
|
||||
mineCase.classList.add("buttonRevealed");
|
||||
}
|
||||
}
|
||||
|
|
@ -183,13 +185,6 @@ function selectImage(idCase) { //détermine l'image à affecter à la case d'id
|
|||
chrono() ;
|
||||
}
|
||||
|
||||
//si la case révélée était une mine, arrête la partie et affiche un message de perte
|
||||
if (grille[y][x] === 9 && arret == 0) {
|
||||
arret = 1;
|
||||
const time = document.getElementById("temps").value;
|
||||
alert(`Vous avez perdu ! Temps passé : ${time} secondes.`);
|
||||
MontrerMines();
|
||||
}
|
||||
|
||||
//si la case révélée n'est adjacente à aucune mine, révèle également les cases adjacentes
|
||||
if (grille[y][x] == 0) {
|
||||
|
|
@ -203,29 +198,44 @@ function selectImage(idCase) { //détermine l'image à affecter à la case d'id
|
|||
}
|
||||
}
|
||||
|
||||
//renvoie le nom de fichier de l'image à afficher dans la case en fonction du contenu de grille à la même position
|
||||
return("url('case_" + grille[y][x].toString() + ".png')");
|
||||
//renvoie le numéro contenu dans grille à la position de la case
|
||||
return(grille[y][x].toString());
|
||||
}
|
||||
|
||||
|
||||
function changeImage(caseCible) {
|
||||
//Change l'image d'une case caseCible et appelle selectImage sur l'id de cette case.
|
||||
//Si la case révélée était une mine, arrête la partie, affiche toutes les mines et un message de perte
|
||||
//Si c'est la dernière case ne contenant pas de mine, arrete la partie et affiche un message de victoire
|
||||
|
||||
if (!(caseCible.classList.contains("buttonFlagged"))) {
|
||||
|
||||
caseCible.classList.add("buttonRevealed") ;
|
||||
caseCible.style.background= selectImage(caseCible.id) ;
|
||||
const nombreCase = selectImage(caseCible.id) ;
|
||||
caseCible.src= "case_" + nombreCase + ".png" ;
|
||||
|
||||
cases_restantes = cases_restantes - 1 ;
|
||||
if (nombreCase == "9") { //test de perte
|
||||
|
||||
//Test de victoire
|
||||
if (cases_restantes == 0 && arret == 0) {
|
||||
arret = 1 ;
|
||||
const time = document.getElementById("temps").value;
|
||||
alert(`Félicitations ! Vous avez gagné ! Temps passé : ${time} secondes.`);
|
||||
caseCible.alt = "Mine" ;
|
||||
if (arret == 0) {
|
||||
arret = 1;
|
||||
const time = document.getElementById("temps").value;
|
||||
alert(`Vous avez perdu ! Temps passé : ${time} secondes.`);
|
||||
MontrerMines();
|
||||
}
|
||||
} else { //sinon, test de victoire
|
||||
|
||||
caseCible.alt = nombreCase ;
|
||||
|
||||
cases_restantes = cases_restantes - 1 ;
|
||||
|
||||
if (cases_restantes == 0 && arret == 0) {
|
||||
arret = 1 ;
|
||||
const time = document.getElementById("temps").value;
|
||||
alert(`Félicitations ! Vous avez gagné ! Temps passé : ${time} secondes.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -245,10 +255,12 @@ function changeImageFlag(rightClick) {
|
|||
if (rightClick.target.classList.contains("buttonRevealed")) {
|
||||
return 0 ;
|
||||
} else if (rightClick.target.classList.contains("buttonFlagged")) {
|
||||
rightClick.target.style.background="url('case_vide.png')" ;
|
||||
rightClick.target.src="case_vide.png" ;
|
||||
rightClick.target.alt = "Case" ;
|
||||
rightClick.target.classList.remove("buttonFlagged") ;
|
||||
} else {
|
||||
rightClick.target.style.background="url('case_flag.png')" ;
|
||||
rightClick.target.src="case_flag.png" ;
|
||||
rightClick.target.alt = "Flag" ;
|
||||
rightClick.target.classList.add("buttonFlagged") ;
|
||||
}
|
||||
}
|
||||
|
|
@ -270,7 +282,7 @@ function resetJeu() { //supprime la grille actuelle, arrête la partie, recrée
|
|||
function grilleButtons(haut, larg) {
|
||||
|
||||
//crée dans la div jeu une div grille de type grid et de dimensions haut par larg
|
||||
//et y ajoute les boutons représentant les cases du jeu de démineur en les liants aux fonctions adéquates
|
||||
//et y ajoute les images représentant les cases du jeu de démineur en les liants aux fonctions adéquates
|
||||
|
||||
const divJeu = document.getElementById("jeu") ;
|
||||
var divGrille = document.createElement("DIV") ;
|
||||
|
|
@ -286,12 +298,13 @@ function grilleButtons(haut, larg) {
|
|||
for (var i=0;i<haut;i++) { //ajout des cases
|
||||
for (var j=0;j<larg;j++){
|
||||
|
||||
var nouvCase = document.createElement("BUTTON") ;
|
||||
var nouvCase = document.createElement("IMG") ;
|
||||
nouvCase.style.gridRow=(i+1).toString() ;
|
||||
nouvCase.style.gridColumn = (j+1).toString() ;
|
||||
nouvCase.classList.add("button_case") ;
|
||||
nouvCase.id = i.toString() + "_" + j.toString() ;
|
||||
nouvCase.style.background="url('case_vide.png')" ;
|
||||
nouvCase.src="case_vide.png" ;
|
||||
nouvCase.alt = "Case";
|
||||
nouvCase.addEventListener("click", changeImageClick);
|
||||
nouvCase.addEventListener("contextmenu", changeImageFlag);
|
||||
divGrille.appendChild(nouvCase) ;
|
||||
|
|
|
|||
42
help.html
Normal file
42
help.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>Démineur - Help</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<img src="logo.png" alt="Logo du Démineur" class="logo">
|
||||
<h1>Comment jouer au démineur ?</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>Pour gagner, vous devrez révéler toutes les cases ne contenant pas de mine.</p>
|
||||
<img src="case_9.png" alt="Image de bienvenue" class="welcome-image">
|
||||
<p>Vous pouvez révéler une case encore cachée simplement en faisant un clic gauche dessus avec votre curseur.</p>
|
||||
<img src="case_vide.png" alt="Image de bienvenue" class="welcome-image">
|
||||
<p>Si vous pensez qu'une case contient une mine, faites un clic droit dessus pour y placer un drapeau. Vous ne pourrea ainsi plus la révéler par erreur.</p>
|
||||
<img src="case_flag.png" alt="Image de bienvenue" class="welcome-image">
|
||||
<p>Le nombre de mines contenues dans la grille et le temps que vous avez passé dans la partie en cours sont affichés en haut de l'écran.</p> <br/>
|
||||
<p>Cliquez sur le bouton "Options" pour ajuster la difficulté du jeu en modifiant les dimensions de la grille et le nombre de mines</p> <br/>
|
||||
<p>Voilà, vous savez tout ! Cliquez sur le bouton ci-dessous pour vous lancer :</p>
|
||||
<button id="play-button">RETOUR AU JEU</button>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2024 Démineur. Tous droits réservés.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
document.getElementById('play-button').addEventListener('click', () => {
|
||||
window.location.href = 'demineur.html';
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2
main.css
2
main.css
|
|
@ -58,9 +58,9 @@ button {
|
|||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
/*transition: background-color 0.3s, transform 0.2s;*/
|
||||
|
||||
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #d3e017;
|
||||
transform: scale(1.1);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div class="emoji-background"></div>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
|
|
@ -26,7 +25,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
<script type="text/javascript">
|
||||
document.getElementById('play-button').addEventListener('click', () => {
|
||||
window.location.href = 'demineur.html';
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
transition: background-color 0.7s, color 0.3s;
|
||||
}
|
||||
|
||||
|
||||
#nav_demineur a:hover {
|
||||
background-color: #0039b33b; /* Couleur de fond au survol */
|
||||
color: #fff; /* Couleur du texte au survol */
|
||||
|
|
|
|||
Loading…
Reference in a new issue