Première création de jeu en JS

**d3LTa7** · 30/08/2018, 16h30

Bonjour...

Suite à 2 mois d'été de bourrage de crane sur JS essentiellement, j'ai décidé de crée quelques chose de moi même car je ne trouve pas vraiment de TP qui accompagnent les cours de base de JS que j'ai pu trouvé sur internet ou ailleurs...

Bref j'ai créé un espèce de jeu de plateau mais j'ai plusieurs souci encore pour mener à bien ce mini projet:

1- J'ai un problème, surement lié au CSS, le plateau à un souci sur la droite
2- il y a des lignes dans le tableau qui ont l'air plus grosse que d'autre(1 sur 2)... Pourtant selon mon code aucune n'est doublé
3- Quand je lance le dé, un point apparait sur la case correspondant au jet du dé, et apparait au deuxième. Comment faire disparaitre le point du jet précédent à chaque nouveau jet de dé ?
4- le point n'est pas centré dans la case et je n'arrive pas à le faire(j'ai essayé justify content: center et align item: center ça ne marche pas :/ )
5- Il doit exister un moyen plus générique de faire ce genre de jeu sans avoir à nommer chaque div et lié celle ci à un tableau etc etc... Je veux bien savoir comment on pourrait faire
Je précise qu'avant de poster j'ai pas mal recherché sur le net et que je me prends la tête depuis quelques heures sur ces différents problèmes.
Merci

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
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="jeu2.css" />
        <title>Game</title>
    </head>
    <body>
        <div id="game"></div>
        <button id='jouer'>Lancer</button>
        <p id="para"></p>
        <div id="plateau">    
            <div class="case01"></div>
            <div class="case02"></div>
            <div class="case03"></div>
            <div class="case04"></div>
            <div class="case05"></div>
            <div class="case06"></div>
            <div class="case07"></div>
            <div class="case08"></div>
            <div class="case09"></div>
            <div class="case10"></div>
            <div class="case11"></div>
            <div class="case12"></div>
        </div>
        <script src="jeu2.js"></script>
    </body>
</html>

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
#plateau{
    display: flex;
    flex-direction: row;
    border-right: 2px solid black;
    margin: 15% 0% 15% 0%;
    padding: 0%;
    resize: none;
}
 
#plateau div:nth-child(odd){
    background-color: aqua;
}
#plateau div:nth-child(even){
    background-color: coral; 
}
.case01, .case02, .case03, .case04, .case05, .case06, .case07, .case08, .case09, .case10, .case11, .case12{ 
    min-width: 100px;
    min-height: 100px;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    border-left: 2px solid black;
}
.selected{}
.selected:after{
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: black;
    margin: auto;
    display: flex;
    align-items: center;
}

Code JavaScript :

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
 
var total = 0
var tableau = []
function mafonction(){
    var lancer = Math.floor(Math.random()*6 +1);
    document.getElementById('para').innerHTML = lancer;
    tableau.push(lancer);
    console.log(tableau);
    total = total + lancer;
    console.log(total);
    var choice = tabTest[total-1];
    choice.className += ' selected'
    console.log(choice);
}
var launch = document.getElementById('jouer');
launch.addEventListener('click', mafonction);
 
var test1 = document.querySelector('.case01');
var test2 = document.querySelector('.case02');
var test3 = document.querySelector('.case03');
var test4 = document.querySelector('.case04');
var test5 = document.querySelector('.case05');
var test6 = document.querySelector('.case06');
var test7 = document.querySelector('.case07');
var test8 = document.querySelector('.case08');
var test9 = document.querySelector('.case09');
var test10 = document.querySelector('.case10');
var test11 = document.querySelector('.case11');
var test12 = document.querySelector('.case12');
var tabTest = [test1, test2, test3, test4, test5, test6, test7, test8, test9, test10, test11, test12];

**Doksuri** · 30/08/2018, 17h32

c'est un bon debut

je serai plutot parti sur une classe 'case' commune (ou tu appliques ton css, et tu fais tes querySelectorAll)
et j'aurai mis des data-*="x" pour passer le numero des cases.
j'aurai mis un tableau js contenant toutes les cases et passer par le data-* pour selectionner la case en question

pour ton trait a droite, il faut que tu regarde du cote du last-child

pour le deplacement du point : en passant par une classe commune a tes cases, tu peux boucler sur tes cases et supprimer la class selected (pour apres la remettre sur la bonne case)
pour le centrage verticale du point, dans ton .selected:after il suffit de rajouter margin-top:calc(50% - 10px);

edit : ajout du code
j'ai mis un data-key="x" au cas ou t'en aies besoin plus tard

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
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Game</title>
    </head>
    <body>
        <div id="game"></div>
        <button id='jouer'>Lancer</button>
        <p id="para"></p>
        <div id="plateau">
            <div class="case" data-key="0"></div>
            <div class="case" data-key="1"></div>
            <div class="case" data-key="2"></div>
            <div class="case" data-key="3"></div>
            <div class="case" data-key="4"></div>
            <div class="case" data-key="5"></div>
            <div class="case" data-key="6"></div>
            <div class="case" data-key="7"></div>
            <div class="case" data-key="8"></div>
            <div class="case" data-key="9"></div>
            <div class="case" data-key="10"></div>
            <div class="case" data-key="11"></div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

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
#plateau{
    display: flex;
    flex-direction: row;
    border-right: 2px solid black;
    margin: 15% 0 15% 0;
    padding: 0;
    resize: none;
}
 
#plateau div:nth-child(odd){
    background-color: aqua;
}
#plateau div:nth-child(even){
    background-color: coral;
}
.case {
    min-width: 100px;
    min-height: 100px;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    border-left: 2px solid black;
}
.case:last-of-type{
    border-right: 2px solid black;
}
.selected:after{
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: black;
    margin: auto;
    display: flex;
    align-items: center;
    margin-top: calc(50% - 10px);
}

Code js :

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
var total = 0;
var tableau = [];
function mafonction() {
    [].slice.call(document.querySelectorAll('.case')).forEach(function(elem) {
        elem.classList.remove('selected');
    });
    var lancer = Math.floor(Math.random()*6 +1);
    document.getElementById('para').textContent = lancer;
    tableau.push(lancer);
    console.log(tableau);
    total += lancer;
    console.log(total);
    var choice = document.querySelectorAll('.case')[lancer];
    choice.classList.add('selected');
    console.log(choice);
}
var launch = document.getElementById('jouer');
launch.addEventListener('click', mafonction);

Invité · 30/08/2018, 17h54

Bonjour,

1- la plupart de tes questions sont liées au CSS.
Or ici, c'est le forum JavaScript.
Donc...

2- Si tu veux étudier un autre jeu en JS : Pierre feuille ciseaux (démo 1 - démo 2) *.

* (Les scripts des 2 démos sont différents)

**d3LTa7** · 30/08/2018, 18h19

Houaaaa super Doksuri !! Effectivement le rendu est super...

Bon j'ai fait quelques modif pour avoir le résultata que je voulais :

Code :

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

var choice = document.querySelectorAll('.case')[total-1];

Par contre je ne te cache pas qu'en étant débutant, je n'ai pas trop compris la ligne 4 et 5 du JS et donc la ligne 13 et 14 et aussi accessoirement les "data-key"

Comme tu as pu le voir mes codes sont encore un peu pataud et je ne suis pas encore bien à l'aise avec les raccourcis de codes, et je préfère encore bien tout détailler... C'est pour ca que quand je vois que tu as mis une fonction dans ma fonction, je me dis que j'ai du mal a comprendre ce passage là avec toutes ces parenthèses

...

Jreaux62... Oui et non... Même si il y a plus de questions sur le CSS, c'était des questions minime comparer à la vrai demande du système dynamique du jeu, en l’occurrence faire en sorte de bouger le point et faire en sorte que mon code soit plus générique... Le vrai travail était là et donc bien JS... J'aurais pu effectivement faire 2 post pour poser mes questions, diviser en 2 familles, mais bon... Autant faire une pierre 2 coups..
Bref merci pour les exercices je vais aller jeter un oeil

Invité · 30/08/2018, 18h35

Envoyé par d3LTa7

...Même si il y a plus de questions sur le CSS, c'était des questions minime comparer à la vrai demande du système dynamique du jeu...

Justement.
C'était inutile d’embrouiller la discussion avec les questions CSS sur le forum JavaScript.

Il faut les poster sur le bon forum.

**Doksuri** · 31/08/2018, 08h21

Envoyé par d3LTa7

je n'ai pas trop compris la ligne 4 et 5 du JS et donc la ligne 13 et 14 et aussi accessoirement les "data-key"

la ligne 4 sont un raccourcis pour boucler sur les elements du query selector. le [].slice.call() permet de transformer le retour du call() en un tableau, ce qui me permet de boucler dessus avec un foreach.
ca m'evite de passer par des variables temporaires juste pour une boucle.

apres pour les lignes 5 et 14, il suffit de lire l'anglais

elem.classList.remove('selected');
"dans ma variable 'elem', selectionne la liste des classes, et supprime la class 'selected' " (pour la ligne 14, 'add' => ajoute) developer.mozilla.org/en-US/docs/Web/API/Element/classList

pour le data-key (en l'occurence data-*) ca permet de passer des information avec ton element developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Invité · 31/08/2018, 08h53

Bonjour,

Code :

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

1
2
3
    [].slice.call(document.querySelectorAll('.case')).forEach(function(elem) {
        elem.classList.remove('selected');
    });

@Doksuri :
c'est un peu "violent" pour un débutant, non ?

(j'avoue que j'ai moi aussi du mal à comprendre... et du coup, je ne saurais pas le ré-utiliser dans un autre script)

Pourrais-tu montrer la "traduction basique" (avec variables temporaires si nécessaire !) de cette suite d'instructions ?
(à des fins pédagogiques...)

**Doksuri** · 31/08/2018, 09h19

Code javascript :

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

1
2
3
[].slice.call(document.querySelectorAll('.case')).forEach(function(elem) {
        elem.classList.remove('selected');
    });

est la meme chose que

Code javascript :

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

1
2
3
4
var elems = document.querySelectorAll('.case');
for(var i=0; i<elems.length; i++) {
        elems[i].classList.remove('selected');
    };

j'aurai aussi pu ecrire directement

Code javascript :

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

document.querySelectorAll('.case').forEach(function(elem) { elem.classList.remove('selected'); });

=> c'est un vieux reflex que j'ai d'utiliser le [].slice.call() car il m'est deja arrive de ne pas recuperer un tableau lors du querySelectorAll(), et du coup ne pas pouvoir faire un forEach
=> c'est une securite pour etre sur de recuperer un tableau

**Watilin** · 31/08/2018, 10h35

Envoyé par Doksuri

=> c'est un vieux reflex que j'ai d'utiliser le [].slice.call()

Comme tu le dis, c’est un vieux réflexe et tu peux commencer à le remplacer par Array.from qui fait la même chose en plus clair.

car il m'est deja arrive de ne pas recuperer un tableau lors du querySelectorAll()

En fait, ce n’est jamais un tableau, c’est une NodeList, elle n’a pas les méthodes de Array.prototype.

et du coup ne pas pouvoir faire un forEach

Et sinon il y a la boucle for/of qui permet d’itérer sur la liste sans même avoir besoin de la convertir en tableau

Code :

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

1
2
3
for (let elem of document.querySelectorAll('.case')) {
  elem.classList.remove('selected');
}

**d3LTa7** · 03/09/2018, 12h07

Envoyé par jreaux62

c'est un peu "violent" pour un débutant, non ?

(j'avoue que j'ai moi aussi du mal à comprendre... et du coup, je ne saurais pas le ré-utiliser dans un autre script)

Pourrais-tu montrer la "traduction basique" (avec variables temporaires si nécessaire !) de cette suite d'instructions ?
(à des fins pédagogiques...)

Haha merci =)

Merci à tous pour vos réponses !! Ça pique dès le lundi matin !! J'vais essayé de bien comprendre...

Première création de jeu en JS

JavaScript

Discussions similaires

Partager

Partager