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.

A voir également:

Rédaction simulation lancé de dé javascript
Windows ne se lance pas - Guide
Qu'est ce qui se lance au démarrage de l'ordinateur - Guide
Telecharger javascript - Télécharger - Langages
Aide a la redaction - Guide
A javascript error occurred in the main process - Forum Matériel & Système

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025 4 741
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/

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.

Réponse 2 / 2

Zero
13 nov. 2018 à 16:17

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.

Discussions similaires

Les meilleurs places bercy / accor hotel arena

Simulation covering

Javascript Arrondi à 2 chiffres après la virgule

Problème avec discord pour le lancer au démarrage

Discord ne s'ouvre pas