Rédaction simulation lancé de dé javascript

Fermé
claracaillot Messages postés 2 Date d'inscription dimanche 11 novembre 2018 Statut Membre Dernière intervention 11 novembre 2018 - 11 nov. 2018 à 23:30
 Zero - 13 nov. 2018 à 16:17
Bonjour,

Je dois réaliser une simulation d'un lancé de dé en Javascript mais je n'y arrive pas. Je suis censée créer un bouton sur ma page relié à une image de chacune des faces du dé qui, quand on appuie dessus, montre la face correspondant au chiffre tiré entre 1 et 6. Il faut donc que je rajoute une page css mais je ne sais pas comment procéder. La page html doit également comporter un fond de couleur.

Par conséquent, si quelqu'un pouvait réaliser ce programme cela me serait d'une grande aide.

Merci d'avance.

2 réponses

jordane45 Messages postés 38320 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 novembre 2024 4 707
11 nov. 2018 à 23:41
Bonjour,

Tu t'es trompé de forum..... on ne fera pas le boulot à ta place !

Ici... tu viens nous montrer ce que tu as commencé à faire et en expliquant sur quoi tu bloques exactement... et là on verra si on peut (veut...) t'aider.

Pour rappel :
https://www.commentcamarche.net/infos/25899-demander-de-l-aide-pour-vos-exercices-sur-ccm/
1
claracaillot Messages postés 2 Date d'inscription dimanche 11 novembre 2018 Statut Membre Dernière intervention 11 novembre 2018
11 nov. 2018 à 23:44
merci beaucoup de me l'avoir dit j'éviterai ainsi de faire la même erreur à l'avenir.
0
Hello !

J'ai fait un petit bout de code avec animation pour t'aiguiller, à toi d'adapter selon tes besoins.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="row">
    <div class="col-lg-12" style="margin-top: 10px">
      <div class="col-lg-2">
        <div id="dice" style="width: 200px; height: 200px; border: 1px solid; text-align: center;"></div>
      </div>
      <div class="col-lg-2">
        <button id="btn-dice" type="button" class="btn btn-info">Lancer le dé</button>
      </div>
    </div>
  </div>
<script>
  $(document).ready(function() {
    $('#btn-dice').click(function() {
      var i = 0;
      timer = setInterval(function(){
        var roll_dice = rand(1,6);
        $('#dice').html('<span style="font-size: 8em;">'+roll_dice+'</span>');
        i++;
        if(i == 30) {
         clearInterval(timer);
        }
      }, 100);
    });
  });
  function rand(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>



Explication :

Quand on clique sur le bouton, ça lance un intervalle qui va afficher un nombre en 1 et 6. Au bout du 30 ème affichage, le dé se stoppe.

Tu peux changer cette valeur pour ton animation.

Cdt.
0