Jeux bombe en Jquery

**khansaa5chafi** · 07/09/2017, 13h04

Bonjour tt le monde , je suis débutante en Jquery ,donc j'ai essayé de créer un jeu bombe pour bien pratiquer Jquery.
Voila une image qui montre :
Nom : Jeu-Bombe.jpg
Affichages : 694
Taille : 82,6 Ko

Nom : Jeu-Bombe.jpg
Affichages : 694
Taille : 82,6 Ko

tout marche bien ,
1-le click sur les cases pour afficher le contenu ,
2-si je click sur une case qui contient bombe , le jeu affiche un message qui dit que j'ai perdu ,
3-le je se répète si je clique sur répéter , etc...

le problème est :
si quelqu'un a gagné ça veut dire qu'il a cliqué sur tout les case propre (qui ne contient pas de bombe) , alors comment détecter ça afin d'afficher un message qui dit "bravo" par exemple.

et voila mon code html , css , Jquery:

1-html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jeux</title>
    <link href="css/style.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css' />
</head>
 
<body> 
    <div class="all-cases">
        <div class="case">1<a>O</a></div>
        <div class="case">2<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case">1<a>O</a></div>
        <div class="case">1<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
 
        <div class="case">1<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case">3<a>O</a></div>
        <div class="case">2<a>O</a></div>
        <div class="case">2<a>O</a></div>
        <div class="case">1<a>O</a></div>
 
        <div class="case">3<a>O</a></div>
        <div class="case">3<a>O</a></div>
        <div class="case">3<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case">2<a>O</a></div>
        <div class="case">1<a>O</a></div>
 
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case">3<a>O</a></div>
        <div class="case">3<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case">2<a>O</a></div>
 
        <div class="case">3<a>O</a></div>
        <div class="case">4<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case">3<a>O</a></div>
        <div class="case">3<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
 
        <div class="case">1<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case">3<a>O</a></div>
        <div class="case"><img src="img/bomb.png" /><a>O</a></div>
        <div class="case">2<a>O</a></div>
        <div class="case">1<a>O</a></div>
    </div>
    <div class="encore"><a>Répeter</a></div>
 
    <script src="js/jQuery-2.1.4.min.js"></script>
    <script src="js/khansaa.js"></script>
 
 
</body>
</html>

2-css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
.all-cases {
    border:1px solid #074261;
    overflow:hidden;
    padding:3px 0 0 3px;
    width:203px;
    margin:auto;
    margin-top:100px;
 
}
 
.case {
    position:relative;
    width:30px;
    height:30px;
    border:1px solid #074261;
    float:left;
    margin-right:3px;
    margin-bottom:3px;
    text-align:center;
    padding-top:4px;
}
 
.case a {
    position:absolute;
    background-color:#99b2be;
    text-decoration:none;
    color:#d0dde4;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    padding-top:3px;
    font-weight:bold;
    cursor:pointer;
}
 
.case img {
    width:auto;
    height:auto;
}
 
.loser {
    margin:auto;
    width:200px;
    text-align:center;
}
 
.loser h2 {
    width:auto;
}
 
.encore a {
    display:block;
    padding:5px 15px;
    text-align:center;
    text-decoration:none;
    background-color:#18668f;
    color:#fff;
    margin:auto;
    margin-top:10px;
    width:203px;
    cursor:pointer;
    opacity:0;
}
 
.encore a:hover{
    background-color:#4694bd;
}

3-Jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('.case a').click(function () {
        var box = $(this).parent();
        $(this).hide();
        if (box.find('img').length) {
            $('.all-cases').append('<div class="loser"><img src="img/smile.png" /><h2>You Lose!</h2></div>');
            $('.case a').hide();
            $('.encore a').css("opacity","1");
        }    
    });
    $('.encore a').click(function () {
        $('.case a').show();
        $('.all-cases').find('.loser').remove();
        $('.encore a').css("opacity", "0");
    });

**Toufik83** · 07/09/2017, 14h41

si tu connais déjà le nombre de bombes cachées dans le jeu, tu peux déclarer une variable X, et a chaque fois que l'utilisateur clique sur une case, tu incrémente cette variable (+1)..., finalement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
var compteur=0,nbr$('.case').length;
$('.case a').click(function(e) {
  e.preventDefault();
  var box = $(this).parent();
  $(this).hide();
  if (box.find('img').length) {
    $('.all-cases').append('<div class="loser"><img src="http://zupimages.net/up/17/36/ehtz.png" /><h2>You Lose!</h2></div>');
    $('.case a').hide();
    $('.encore a').css("opacity", "1");
compteur=0;// réinitialiser le compteur
  }
  else {
  	compteur++;
    if(nbr-compteur==11){
    alert('bravo');
    }
  }
});

**khansaa5chafi** · 07/09/2017, 16h15

Toufik83 , Merci beaucoup , le problème est maintenant résolu grâce a votre aide ,
je vous remercie infiniment .

**Toufik83** · 07/09/2017, 18h32

avec plaisir, j'ai juste des remarques concernant la génération des bombes dans le jeu ainsi que le clique 2 fois sur un élément (.case).
1- la génération des bombes doit être dynamique et pas statique.
je veux dire qu'il faut créer une fonction jQuery qui génère les bombes ("<img src="img/bomb.png" />") aléatoirement...
2- si l'utilisateur clique sur une .case qui est déjà affichée et qui ne contient pas de bombe, la variable compteur va s'incrémenter en +1, alors qu'il le faut pas. (a rectifier dans le code)

Jeux bombe en Jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager