Merge branch 'main' of https://git.etud.insa-toulouse.fr/bocquel/Projet_JS
resolution des conflits entre les deux branches ig
BIN
case_0.png
Normal file
After Width: | Height: | Size: 263 B |
BIN
case_1.png
Normal file
After Width: | Height: | Size: 293 B |
BIN
case_2.png
Normal file
After Width: | Height: | Size: 389 B |
BIN
case_3.png
Normal file
After Width: | Height: | Size: 430 B |
BIN
case_4.png
Normal file
After Width: | Height: | Size: 321 B |
BIN
case_5.png
Normal file
After Width: | Height: | Size: 369 B |
BIN
case_6.png
Normal file
After Width: | Height: | Size: 431 B |
BIN
case_7.png
Normal file
After Width: | Height: | Size: 310 B |
BIN
case_8.png
Normal file
After Width: | Height: | Size: 436 B |
BIN
case_9.png
Normal file
After Width: | Height: | Size: 456 B |
BIN
case_flag.png
Normal file
After Width: | Height: | Size: 308 B |
BIN
case_zero.png
Normal file
After Width: | Height: | Size: 263 B |
|
@ -27,20 +27,22 @@
|
|||
<div class="item_nav">
|
||||
Mines restantes:10
|
||||
</div>
|
||||
<div class="item_nav">
|
||||
<button id="options-button" onclick="options()">Options</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div id="jeu">
|
||||
<button id="debut_game" onclick="chrono()">GO!</button>
|
||||
<button id="fin_game" onclick="reset()">CIAO</button>
|
||||
<div id="grille">
|
||||
<script type="text/javascript">grilleButtons(7,7);</script>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- <button id="debut_game" class="game_button" onclick="chrono()">GO!</button>-->
|
||||
<button id="fin_game" class="game_button" onclick="resetJeu()">Abandon</button>
|
||||
|
||||
|
||||
<div id="popup" class="popup">
|
||||
<div class="popup-content">
|
||||
<div id="cookies-popup" class="popup">
|
||||
<div id="cookies-popup-content">
|
||||
<h2>Bonjour !</h2>
|
||||
<p>Voulez vous des cookies?</p>
|
||||
|
||||
|
@ -48,5 +50,25 @@
|
|||
<button id="accept-button">Avec Plaisir!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="options-popup" class="popup">
|
||||
<div id="options-popup-content">
|
||||
<h2>Options</h2>
|
||||
<label for="hauteur">Hauteur:</label>
|
||||
<input type="number" id="hauteur" value="7">
|
||||
<br>
|
||||
<label for="largeur">Largeur:</label>
|
||||
<input type="number" id="largeur" value="7">
|
||||
<br>
|
||||
<label for="number_mines">Nombre de mines:</label>
|
||||
<input type="number" id="number_mines" value="10">
|
||||
<br><br>
|
||||
<button id="save-options">Sauvegarder</button>
|
||||
<button id="close-options">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 - Tous droits réservés - Le Démineur</p>
|
||||
</footer>
|
||||
</html>
|
||||
|
|
319
demineur.js
|
@ -1,14 +1,118 @@
|
|||
class Case {
|
||||
constructor(x, y) {
|
||||
this.posX = x;
|
||||
this.posy = y;
|
||||
this.isMine = false;
|
||||
this.number = 0;
|
||||
this.hidden = true;
|
||||
let grille = [];
|
||||
let hauteur = 7;
|
||||
let largeur = 7;
|
||||
let number_mines = 10 ;
|
||||
let first_click = true ;
|
||||
let arret=0;
|
||||
let cases_restantes = hauteur*largeur - number_mines ;
|
||||
|
||||
function gererOptions() {
|
||||
const newHauteur = parseInt(document.getElementById('hauteur').value);
|
||||
const newLargeur = parseInt(document.getElementById('largeur').value);
|
||||
const newNumberMines = parseInt(document.getElementById('number_mines').value);
|
||||
|
||||
if (newHauteur > 12 || newLargeur > 12) {
|
||||
alert("Les dimensions ne doivent pas dépasser 12x12.");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const maxMines = newHauteur * newLargeur - 1;
|
||||
if (newNumberMines < 1 || newNumberMines > maxMines) {
|
||||
alert(`Le nombre de mines doit être entre 1 et ${maxMines}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
hauteur = newHauteur;
|
||||
largeur = newLargeur;
|
||||
number_mines = newNumberMines;
|
||||
document.getElementById('options-popup').classList.remove('show');
|
||||
resetJeu();
|
||||
}
|
||||
|
||||
function options() {
|
||||
document.getElementById("options-popup").classList.add("show");
|
||||
|
||||
document.getElementById('close-options').addEventListener('click', () => {
|
||||
document.getElementById('options-popup').classList.remove('show');
|
||||
});
|
||||
|
||||
// Ajout de l'écouteur d'événement
|
||||
document.getElementById('save-options').addEventListener('click', gererOptions);
|
||||
}
|
||||
|
||||
// Exemple de suppression de l'écouteur d'événement
|
||||
document.getElementById('save-options').removeEventListener('click', gererOptions);
|
||||
|
||||
|
||||
document.getElementById("fin_game").addEventListener("click", resetJeu) ;
|
||||
|
||||
|
||||
function getRandomInt(maxi) {
|
||||
return Math.floor(Math.random() * maxi);
|
||||
}
|
||||
|
||||
function jeuFini() {
|
||||
for (let i = 0; i < hauteur; i++) {
|
||||
for (let j = 0; j < largeur; j++) {
|
||||
const caseElement = document.getElementById(i + "_" + j);
|
||||
const caseData = grille[i][j];
|
||||
|
||||
if (caseData === 9) { // Case contenant une mine
|
||||
if (!caseElement.classList.contains("buttonFlagged")) {
|
||||
return false; // Une mine n'est pas marquée
|
||||
}
|
||||
} else { // Case ne contenant pas de mine
|
||||
if (!caseElement.classList.contains("buttonRevealed")) {
|
||||
return false; // Une case non-mine n'est pas révélée
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return true; // Toutes les conditions sont remplies
|
||||
}
|
||||
|
||||
function MontrerMines() {
|
||||
for (let i = 0; i < hauteur; i++) {
|
||||
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.classList.add("buttonRevealed");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function creerGrille(haut, larg, mine_nb, x_first, y_first) {
|
||||
grille.length = haut;
|
||||
for (var i = 0; i < haut; i++) {
|
||||
grille[i] = Array(larg);
|
||||
for (var j = 0; j < larg; j++) {
|
||||
grille[i][j] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
for (var k = 0; k < mine_nb; k++) {
|
||||
let new_x = getRandomInt(larg);
|
||||
let new_y = getRandomInt(haut);
|
||||
|
||||
while (grille[new_y][new_x] == 9 || (new_y == y_first && new_x == x_first)) {
|
||||
new_x = getRandomInt(larg);
|
||||
new_y = getRandomInt(haut);
|
||||
}
|
||||
|
||||
grille[new_y][new_x] = 9;
|
||||
for (var m = Math.max(0, new_y - 1); m < Math.min(haut, new_y + 2); m++) {
|
||||
for (var n = Math.max(0, new_x - 1); n < Math.min(larg, new_x + 2); n++) {
|
||||
if (grille[m][n] != 9) {
|
||||
grille[m][n]++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Fonction pour créer un cookie.
|
||||
function setCookie(name, value, days) {
|
||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
||||
|
@ -19,100 +123,179 @@ function getCookie(name) {
|
|||
return document.cookie.split('; ').find(row => row.startsWith(name + '='))?.split('=')[1];
|
||||
}
|
||||
|
||||
|
||||
function sleep(ms){
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
async function chrono(){
|
||||
let k=document.getElementById("temps").value;
|
||||
const myButton = document.getElementById("fin_game");
|
||||
let arret=0;
|
||||
myButton.addEventListener("click",() =>{arret=1;})
|
||||
|
||||
while(arret==!1) {
|
||||
let k=document.getElementById("temps").value;
|
||||
const myButton = document.getElementById("fin_game");
|
||||
arret = 0 ;
|
||||
|
||||
while(arret==!1) {
|
||||
await sleep(1000);
|
||||
if (arret==!1){
|
||||
document.getElementById("temps").value=document.getElementById("temps").value*1+1;
|
||||
document.getElementById("temps").value=document.getElementById("temps").value*1+1;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
async function reset(){
|
||||
|
||||
document.getElementById("temps").value=0;
|
||||
|
||||
}
|
||||
|
||||
function Cookies() {
|
||||
var accept = confirm("Tu veux des cookies ?");
|
||||
if (accept === true) {
|
||||
alert("Bon jeu!");
|
||||
} else {
|
||||
Cookies();
|
||||
}
|
||||
}
|
||||
//Cookies();
|
||||
|
||||
|
||||
let grille = [];
|
||||
let hauteur = 7;
|
||||
let largeur = 7;
|
||||
|
||||
function creerGrille(haut, larg) {
|
||||
grille.length = haut;
|
||||
for (var i=0;i<haut;i++) {
|
||||
grille[i] = Array(larg);
|
||||
for (var j=0;j<larg;j++){
|
||||
grille[i][j] = new Case(j, i);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Fonction pour créer un cookie
|
||||
function setCookie(name, value, days) {
|
||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
||||
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
|
||||
}
|
||||
|
||||
// Fonction pour lire un cookie
|
||||
function getCookie(name) {
|
||||
return document.cookie.split('; ').find(row => row.startsWith(name + '='))?.split('=')[1];
|
||||
}
|
||||
|
||||
|
||||
function cookie(){
|
||||
const popup = document.getElementById('popup');
|
||||
const closePopupButton = document.getElementById('accept-button');
|
||||
|
||||
const popup = document.getElementById('cookies-popup');
|
||||
const close_popup_button = document.getElementById('accept-button');
|
||||
const keep_popup_button = document.getElementById('refuse-button');
|
||||
// Fonction pour afficher la pop-up
|
||||
|
||||
popup.classList.add('show');
|
||||
|
||||
|
||||
keep_popup_button.addEventListener('click', () => {
|
||||
keep_popup_button.style.display = 'none';
|
||||
});
|
||||
|
||||
// Fonction pour fermer la pop-up
|
||||
closePopupButton.addEventListener('click', () => {
|
||||
close_popup_button.addEventListener('click', () => {
|
||||
setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
|
||||
popup.classList.remove('show');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const cookieAccepted = getCookie('cookiesAccepted');
|
||||
|
||||
if (!cookieAccepted){
|
||||
cookie();
|
||||
}
|
||||
function changeImage(mouseEvent) {
|
||||
mouseEvent.target.style.background="url('case_mine.png')" ;
|
||||
|
||||
function selectImage(idCase) {
|
||||
const coords = idCase.split("_") ;
|
||||
const y = parseInt(coords[0]) ;
|
||||
const x = parseInt(coords[1]) ;
|
||||
|
||||
if (first_click) {
|
||||
creerGrille(hauteur,largeur,number_mines,x,y) ;
|
||||
first_click = false ;
|
||||
chrono() ;
|
||||
}
|
||||
|
||||
if (grille[y][x] === 9 && arret == 0) {
|
||||
arret = 1;
|
||||
alert("Vous avez perdu !");
|
||||
MontrerMines();
|
||||
}
|
||||
|
||||
if (grille[y][x] == 0) {
|
||||
for (var m = Math.max(0, y - 1); m < Math.min(hauteur, y + 2); m++) {
|
||||
for (var n = Math.max(0, x - 1); n < Math.min(largeur, x + 2); n++) {
|
||||
const currentCase = document.getElementById(m.toString() + "_" + n.toString()) ;
|
||||
if (!(currentCase.classList.contains("buttonRevealed"))) {
|
||||
changeImage(currentCase) ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return("url('case_" + grille[y][x].toString() + ".png')");
|
||||
}
|
||||
|
||||
|
||||
function grilleButtons(haut, larg) {
|
||||
const divGrille = document.getElementById("grille") ;
|
||||
for (var i=0;i<haut;i++) {
|
||||
for (var j=0;j<larg;j++){
|
||||
|
||||
var newCase = document.createElement("BUTTON") ;
|
||||
newCase.style.gridrow=i.toString() ;
|
||||
newCase.classList.add("button_case") ;
|
||||
newCase.id = i.toString() + "_" + j.toString() ;
|
||||
newCase.style.background="url('case_vide.png')" ;
|
||||
newCase.addEventListener("click", changeImage);
|
||||
divGrille.appendChild(newCase) ;
|
||||
|
||||
function changeImage(targetCase) {
|
||||
if (!(targetCase.classList.contains("buttonFlagged"))) {
|
||||
targetCase.classList.add("buttonRevealed") ;
|
||||
targetCase.style.background= selectImage(targetCase.id) ;
|
||||
|
||||
cases_restantes = cases_restantes - 1 ;
|
||||
|
||||
if (cases_restantes == 0 && arret == 0) {
|
||||
arret = 1 ;
|
||||
alert("Félicitations ! Vous avez gagné !");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function resetJeu() {
|
||||
|
||||
const divJeu = document.getElementById("jeu") ;
|
||||
divJeu.removeChild(divJeu.children[0]) ;
|
||||
grilleButtons(hauteur, largeur) ;
|
||||
cases_restantes = hauteur*largeur - number_mines ;
|
||||
arret = 1 ;
|
||||
first_click = true ;
|
||||
|
||||
document.getElementById("temps").value=0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function changeImageClick(mouseEvent) {
|
||||
if (!(mouseEvent.target.classList.contains("buttonRevealed"))) {
|
||||
changeImage(mouseEvent.target) ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function changeImageFlag(rightClick) {
|
||||
|
||||
rightClick.preventDefault() ;
|
||||
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.classList.remove("buttonFlagged") ;
|
||||
} else {
|
||||
rightClick.target.style.background="url('case_flag.png')" ;
|
||||
rightClick.target.classList.add("buttonFlagged") ;
|
||||
}
|
||||
}
|
||||
|
||||
function grilleButtons(haut, larg) {
|
||||
|
||||
const divJeu = document.getElementById("jeu") ;
|
||||
var divGrille = document.createElement("DIV") ;
|
||||
divGrille.id = "grille";
|
||||
divGrille.style.display = "grid";
|
||||
let taille = "50px " ;
|
||||
let taille_cols = taille.repeat(larg) ;
|
||||
let taille_rows = taille.repeat(haut) ;
|
||||
divGrille.style.gridTemplateColumns = taille_cols ;
|
||||
divGrille.style.gridTemplateRows = taille_rows ;
|
||||
divJeu.appendChild(divGrille) ;
|
||||
|
||||
for (var i=0;i<haut;i++) {
|
||||
for (var j=0;j<larg;j++){
|
||||
var newCase = document.createElement("BUTTON") ;
|
||||
newCase.style.gridRow=(i+1).toString() ;
|
||||
newCase.style.gridColumn = (j+1).toString() ;
|
||||
newCase.classList.add("button_case") ;
|
||||
newCase.id = i.toString() + "_" + j.toString() ;
|
||||
newCase.style.background="url('case_vide.png')" ;
|
||||
newCase.addEventListener("click", changeImageClick);
|
||||
newCase.addEventListener("contextmenu", changeImageFlag);
|
||||
divGrille.appendChild(newCase) ;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
grilleButtons(hauteur,largeur) ;
|
||||
|
|
69
style.css
|
@ -11,34 +11,44 @@
|
|||
}
|
||||
|
||||
#body_demineur{
|
||||
background-color: rgba(128, 128, 128, 0.544);
|
||||
background-color: #007BFF;
|
||||
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
#jeu{
|
||||
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-width: 2px;
|
||||
border-style: double;
|
||||
width: 49%;
|
||||
border-style: double;
|
||||
width: 50%;
|
||||
max-width: 600px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 13px 12px 20px 18px rgba(0, 0, 0, 0.2);
|
||||
padding: 20px;
|
||||
margin: 50px auto auto ;
|
||||
|
||||
}
|
||||
#grille {
|
||||
display: grid;
|
||||
gap: 1px; /* Ajout d'un écart entre les cases pour une meilleure visibilité */
|
||||
}
|
||||
.button_case{
|
||||
width : 50px;
|
||||
height : 50px;
|
||||
border : 0px;
|
||||
|
||||
}
|
||||
|
||||
#grille{
|
||||
display : grid;
|
||||
grid-template-columns : 50px 50px 50px 50px 50px 50px 50px;
|
||||
grid-template-rows : 50px 50px 50px 50px 50px 50px 50px;
|
||||
}
|
||||
|
||||
.item_nav{
|
||||
margin-top: 3px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
@ -55,12 +65,13 @@
|
|||
transition: visibility 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.popup.show {
|
||||
.popup.show{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
|
||||
#cookies-popup-content {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
|
@ -69,16 +80,16 @@
|
|||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#accept-button {
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
#options-popup-content {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
#refuse-button {
|
||||
#accept-button, #refuse-button, #save-options, #close-options {
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
|
@ -89,10 +100,10 @@
|
|||
|
||||
#close-popup:hover {
|
||||
background-color: #0056b3;
|
||||
=======
|
||||
.button_case{
|
||||
width : 50px;
|
||||
height : 50px;
|
||||
border : 0px;
|
||||
>>>>>>> 2a2cf84cf311b49f5c290c8502b43f35efa7ec30
|
||||
}
|
||||
|
||||
#refuse-button:hover,#accept-button:hover, #save-options:hover, #close-options:hover {
|
||||
background-color: #1ecfee;
|
||||
|
||||
}
|
||||
|
||||
|
|