je suis en spé isn et l'on doit réaliser un code JavaScript en trois pages :
- une .js
- une .html
- un .css
On doit donc réaliser un petit jeu de hasard.
Nous on a choisi un jeu avec 5 lancers de dés (1 à 6), chaque valeur de dé est égal à un nombre de point :
- Quand l'on fait 1 par exemple on a 2 points.
On a réussi à réaliser un code qui nous permet de voir le résultat des lancers des 5 dés avec des actions clics. Mais l'on arrive pas à mettre le nombre de points total obtenu ...
Si quelqu'un pourrait m'expliquer ?
Voici le code Js :
var gain;
gain = gain*1;
gain = 0;
var setupEvents = function () {
// identifier le lancer
var lancer=document.getElementById('lancer');
// on associe l'action du click au lancer (On fait pareil pour les 6 lancer).
lancer.addEventListener("click", action);
var lancer2=document.getElementById('lancer2');
lancer2.addEventListener("click", action2);
var lancer3=document.getElementById('lancer3');
lancer3.addEventListener("click", action3);
var lancer4=document.getElementById('lancer4');
lancer4.addEventListener("click", action4);
var lancer5=document.getElementById('lancer5');
lancer5.addEventListener("click", action5);
var total=document.getElementById('total');
total.addEventListener("click", action6);
}
window.addEventListener("load", setupEvents);
// On crée la variable min et max qui vont encadrer les lancé du dé pour obtenir un résultat entre 1 et 6.
var min = 1 ;
var max = 7 ;
var action = function(){
// On lance le dé est on obtient un nombre au hasard entre 1 et 6.
var nombre = Math.floor(Math.random()*(max-min))+ min;
// Quand on va cliquer sur résultat, un nombre au hasard sera écrit.
action = document.getElementById('Resultat');
Resultat.innerHTML="Resultat = "+nombre;
// Le clique écrira un nombre sur un fond blanc avec un chiffre écrit en rouge en caractère monospace.
action.style.backgroundColor = "white";
action.style.color = "red" ;
action.style.fontFamily = "monospace"
/*
if(nombre==1){
gain=gain+2;
}
if(nombre==2){
gain=gain+1;
}
if(nombre==3){
gain=gain-1;
}
if(nombre==4){
gain=gain*0;
}
if(nombre==5){
gain=gain+2;
}
if(nombre==6){
gain=gain+6;
}*/
}
// on réalise la même chose qu'au lancé un pour les autres lancer
var action2 = function() {
var nombre = Math.floor(Math.random()*(max-min))+ min;
action2 = document.getElementById('Resultat2');
Resultat2.innerHTML="Resultat = "+nombre;
action2.style.backgroundColor = "white";
action2.style.color = "red" ;
action2.style.fontFamily = "monospace"
}
var action3 = function() {
var nombre = Math.floor(Math.random()*(max-min))+ min;
action3 = document.getElementById('Resultat3');
Resultat3.innerHTML="Resultat = "+nombre;
action3.style.backgroundColor = "white";
action3.style.color = "red" ;
action3.style.fontFamily = "monospace"
}
var action4 = function() {
var nombre = Math.floor(Math.random()*(max-min))+ min;
action4 = document.getElementById('Resultat4');
Resultat4.innerHTML="Resultat = "+nombre;
action4.style.backgroundColor = "white";
action4.style.color = "red" ;
action4.style.fontFamily = "monospace"
}
var action5 = function() {
var nombre = Math.floor(Math.random()*(max-min))+ min;
action5 = document.getElementById('Resultat5');
Resultat5.innerHTML="Resultat = "+nombre;
action5.style.backgroundColor = "white";
action5.style.color = "red" ;
action5.style.fontFamily = "monospace"
}
var total = function() {
total = document.getElementById('total1');
total1.innerHTML="Resultat = "+gain;
action5.style.backgroundColor = "white";
action5.style.color = "red" ;
action5.style.fontFamily = "monospace"
}Voici le html :
</head>
<link href="Jeudedé.css" rel="stylesheet" type="text/css" media="screen"/>
<title>Jeu de dé</title>
<script type="text/javascript" src="Jeudedé.js">
</script>
<body>
<img alt="Des rouge" src="http://idata.over-blog.com/3/39/16/67/DOSSIER-W-W/21110-DE-ROUGE-JEU.gif" ></img> </br>
<h1> Bonjour! Veux-tu jouer au dé risqué? </h1> </br>
<h2>
Les régles sont simples: </br> </br>
Si le dé tombe sur 1, tu gagnes 2 points. </br>
Si le dé tombe sur 2, tu gagnes 1 point. </br>
Si le dé tombe sur 3, tu perds 1 point. </br>
Si le dé tombe sur 4, tu perds tous tes points. </br>
Si le dé tombe sur 5, tu perds 2 points. </br>
Si le dé tombe sur 6, tu gagnes 6 points! </br>
</h2>
<p>
Cliquez sur 'Lancer n°..!' pour commencer à jouer :)
<div id="lancer" class="white"> Lancer n°1 ! </div>
<div id="Resultat" class="red"> Le résultat du premier lancé est : </div> </br>
<div id="lancer2" class="white"> Lancer n°2 ! </div>
<div id="Resultat2" class="red"> Le résultat du deuxieme lancé est: </div> </br>
<div id="lancer3" class="white"> Lancer n°3 ! </div>
<div id="Resultat3" class="red"> Le résultat du troisième lancé est: </div> </br>
<div id="lancer4" class="white"> Lancer n°4 ! </div>
<div id="Resultat4" class="red"> Le résultat du quatrième lancé est: </div> </br>
<div id="lancer5" class="white"> Lancer n°5 ! </div>
<div id="Resultat5" class="red"> Le résultat du cinquième lancé est: </div> </br>
<div id="total" class="white"> Total : </div>
<div id="total1" class="red"> Vous avez: </div>
</p>
</body>
</html>body{
background-image : url("http://img0.gtsstatic.com/wallpapers/b5fce2e942681fe8da2d3da89c485f81_large.jpeg") ;
font-family : Trebuchet;
text-align : center;
position: absolute ;
}
h1{
color : red;
font-family : Arial Narrow;
text-decoration : underline;
text-align : center;
}
h2{
color : white;
font-family : Arial Narrow;
text-align : center;
}
p{
color : white;
text-align : center;
font-family : Arial Narrow;
font-size : 20px;
font-style : italic;
}
div{
color : white
}
img{
width:200px;
vertical-align:text-top;
margin:10px;
padding:2px;
border:thin solid black;
}
