Première création de jeu en JS
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:
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:
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:
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]; |
