boutons changés en images
This commit is contained in:
parent
d42e1724e8
commit
2dd7af4445
5 changed files with 74 additions and 28 deletions
|
@ -16,7 +16,7 @@
|
||||||
<a href="main.html">Home</a>
|
<a href="main.html">Home</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_nav">
|
<div class="item_nav">
|
||||||
<a href="https://demineur.nhtdev.com/fr/rules">Help</a>
|
<a href="help.html">Help</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item_nav">
|
<div class="item_nav">
|
||||||
|
|
48
demineur.js
48
demineur.js
|
@ -62,7 +62,8 @@ function MontrerMines() { //révèle toutes les mines sur le plateau après un e
|
||||||
for (let j = 0; j < largeur; j++) {
|
for (let j = 0; j < largeur; j++) {
|
||||||
if (grille[i][j] === 9) {
|
if (grille[i][j] === 9) {
|
||||||
const mineCase = document.getElementById(i + "_" + j);
|
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");
|
mineCase.classList.add("buttonRevealed");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -183,13 +184,6 @@ function selectImage(idCase) { //détermine l'image à affecter à la case d'id
|
||||||
chrono() ;
|
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
|
//si la case révélée n'est adjacente à aucune mine, révèle également les cases adjacentes
|
||||||
if (grille[y][x] == 0) {
|
if (grille[y][x] == 0) {
|
||||||
|
@ -203,29 +197,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
|
//renvoie le numéro contenu dans grille à la position de la case
|
||||||
return("url('case_" + grille[y][x].toString() + ".png')");
|
return(grille[y][x].toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function changeImage(caseCible) {
|
function changeImage(caseCible) {
|
||||||
//Change l'image d'une case caseCible et appelle selectImage sur l'id de cette case.
|
//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
|
//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"))) {
|
if (!(caseCible.classList.contains("buttonFlagged"))) {
|
||||||
|
|
||||||
caseCible.classList.add("buttonRevealed") ;
|
caseCible.classList.add("buttonRevealed") ;
|
||||||
caseCible.style.background= selectImage(caseCible.id) ;
|
const nombreCase = selectImage(caseCible.id) ;
|
||||||
|
caseCible.src= "case_" + nombreCase + ".png" ;
|
||||||
|
|
||||||
|
if (nombreCase == "9") { //test de perte
|
||||||
|
|
||||||
|
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 ;
|
cases_restantes = cases_restantes - 1 ;
|
||||||
|
|
||||||
//Test de victoire
|
|
||||||
if (cases_restantes == 0 && arret == 0) {
|
if (cases_restantes == 0 && arret == 0) {
|
||||||
arret = 1 ;
|
arret = 1 ;
|
||||||
const time = document.getElementById("temps").value;
|
const time = document.getElementById("temps").value;
|
||||||
alert(`Félicitations ! Vous avez gagné ! Temps passé : ${time} secondes.`);
|
alert(`Félicitations ! Vous avez gagné ! Temps passé : ${time} secondes.`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -245,10 +254,12 @@ function changeImageFlag(rightClick) {
|
||||||
if (rightClick.target.classList.contains("buttonRevealed")) {
|
if (rightClick.target.classList.contains("buttonRevealed")) {
|
||||||
return 0 ;
|
return 0 ;
|
||||||
} else if (rightClick.target.classList.contains("buttonFlagged")) {
|
} 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") ;
|
rightClick.target.classList.remove("buttonFlagged") ;
|
||||||
} else {
|
} else {
|
||||||
rightClick.target.style.background="url('case_flag.png')" ;
|
rightClick.target.src="case_flag.png" ;
|
||||||
|
rightClick.target.alt = "Flag" ;
|
||||||
rightClick.target.classList.add("buttonFlagged") ;
|
rightClick.target.classList.add("buttonFlagged") ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -270,7 +281,7 @@ function resetJeu() { //supprime la grille actuelle, arrête la partie, recrée
|
||||||
function grilleButtons(haut, larg) {
|
function grilleButtons(haut, larg) {
|
||||||
|
|
||||||
//crée dans la div jeu une div grille de type grid et de dimensions haut par 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") ;
|
const divJeu = document.getElementById("jeu") ;
|
||||||
var divGrille = document.createElement("DIV") ;
|
var divGrille = document.createElement("DIV") ;
|
||||||
|
@ -286,12 +297,13 @@ function grilleButtons(haut, larg) {
|
||||||
for (var i=0;i<haut;i++) { //ajout des cases
|
for (var i=0;i<haut;i++) { //ajout des cases
|
||||||
for (var j=0;j<larg;j++){
|
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.gridRow=(i+1).toString() ;
|
||||||
nouvCase.style.gridColumn = (j+1).toString() ;
|
nouvCase.style.gridColumn = (j+1).toString() ;
|
||||||
nouvCase.classList.add("button_case") ;
|
nouvCase.classList.add("button_case") ;
|
||||||
nouvCase.id = i.toString() + "_" + j.toString() ;
|
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("click", changeImageClick);
|
||||||
nouvCase.addEventListener("contextmenu", changeImageFlag);
|
nouvCase.addEventListener("contextmenu", changeImageFlag);
|
||||||
divGrille.appendChild(nouvCase) ;
|
divGrille.appendChild(nouvCase) ;
|
||||||
|
|
35
help.html
Normal file
35
help.html
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
<!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>Préparez-vous à une expérience de jeu inoubliable ! Cliquez sur le bouton ci-dessous pour commencer votre aventure.</p>
|
||||||
|
<img src="smile.png" alt="Image de bienvenue" class="welcome-image">
|
||||||
|
<button id="play-button">JOUER</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
|
@ -59,8 +59,8 @@ button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/*transition: background-color 0.3s, transform 0.2s;*/
|
/*transition: background-color 0.3s, transform 0.2s;*/
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #d3e017;
|
background-color: #d3e017;
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="emoji-background"></div>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header>
|
<header>
|
||||||
|
@ -26,7 +25,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
document.getElementById('play-button').addEventListener('click', () => {
|
document.getElementById('play-button').addEventListener('click', () => {
|
||||||
window.location.href = 'demineur.html';
|
window.location.href = 'demineur.html';
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue