Bloquer un résultat en cliquant sur la div

**d3LTa7** · 18/09/2018, 15h36

bonjour !!

je suis sur un nouveau projet assez banal qui est ce lui de créer un jeu sur le 4 2 1 !!

Je suis plutôt bien parti, mais je cherche un système qui puisse bloqué un résultat sans empêcher la fonction de continuer son rôle...
Ou alors il faudrait faire 3 fonctions est bloqué la fonction lié à une div (en cliquant sur la div par exemple)...

En résumé, si une personne fait 4 5 3 avec la fonction appelé au début, j'aimerais pouvoir bloqué le 4 et que la fonction puisse changer le 5 et le 3... Un système de "hold"

Voici mes codes
HTML

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
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="421.css" />
        <title>421</title>
    </head>
    <body>
        <h1>4 2 1</h1>
        <div id="bouton">
            <button id="lancer">Jouer !</button>
            <div id="resultat1"></div>
            <div id="resultat2"></div>
            <div id="resultat3"></div>
        </div>
    </body> 
    <script src="421.js"></script>
</html>

JS

Code :

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
 
var lancer = document.getElementById('lancer');
lancer.addEventListener('click',roll);
var tab = [0,0,0];
 
function roll(){
    jet1 = Math.floor(Math.random()*6 +1);
    jet2 = Math.floor(Math.random()*6 +1);
    jet3 = Math.floor(Math.random()*6 +1);
    console.log(jet1);
    console.log(jet2);
    console.log(jet3);
    var dice1 = document.getElementById('resultat1');
    var dice2 = document.getElementById('resultat2');
    var dice3 = document.getElementById('resultat3');
    dice1.innerHTML = jet1;
    dice2.innerHTML = jet2;
    dice3.innerHTML = jet3;
    tab.splice(0,1,jet1);
    tab.splice(1,1,jet2);
    tab.splice(2,1,jet3);
    console.log(tab);
}

Merci

Invité · 18/09/2018, 19h36

slt,

c'est pas forcément la manière la plus optimale, mais c'est la plus "humaine".
A un div correspond un dé.

tu crees un Dediv qui contient un dé et un div.
Quand tu appèles Dediv.step() tu génères une nouvelle valeur et tu l'affiches dans son div
Quand tu appèles Dediv.fix() tous les appels ultérieurs à step ne font rien
Quand tu appèles Dediv.select() les appels ultérieurs à step feront le comportement de base

Ca se traduit par

Code :

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
 
function Dediv(div){
    this.div = div;
    this.value;
    this.selected = true;
}
Dediv.prototype.step = function(){
    if(this.selected){
        this.value = Math.floor(Math.random()*6+1);
        this.div.innerHTML = num;
    }
}
Dediv.prototype.fix = function(){
    this.selected = false;
}
Dediv.prototype.select = function(){
    this.selected = true;
}
 
var dedivs = ['resultat1', 'resultat2', 'resultat3'].map(x=>new Dediv(document.getElementById(x)))
function roll(){
    dedivs.forEach(dediv=>{
        dediv.step();
    })
}
 
function fix(id){//une fonction appelée avec l'id du div qu'on veut garder...
    dedivs.find(d=>d.div.id==id).fix()
}
//meme chose pour select

il te reste à implémenter le markup pour selectionner un div + la fonction qui appele select (ou fix) avec l'id du div qu'on veut "garder"

Bloquer un résultat en cliquant sur la div

JavaScript

Discussions similaires

Partager

Partager