Search code examples
javascriptarraysfunctionvariablesdice

Dices, variable function(s), array slice, new button, different function


I am new to JavaScript, and I need some ideas/help to, how I could make my script work. So the idea is, you roll two dices, that is rolled by pressing a "roll" button and then a reset button that resets everything, in the whole HTML.

So here is the deal, lets say both of eyes shows "5", so "5" should be remove from the array/function, if the "roll" button is pressed agian, the two dices should only be able to land on 1,2,3,4 and 6, and then it would keep removing the numbers from the array/function, if both dices showed the same number.

And the rest button, just reset everything, completly.

 function rollDice() {
//var points = new Array(1,2,3,4,5,6);
var a = new Array(1,2,3,4,5,6);
var die1 = document.getElementById("die1");
var die2 = document.getElementById("die2");
var status = document.getElementById("status");
var d1 = a[Math.floor(a.length * Math.random())];
var d2 = a[Math.floor(a.length * Math.random())];
var diceTotal = d1 + d2;
die1.innerHTML = d1;
die2.innerHTML = d2;
if(d1 == d2){
    function nyroll() {
    var b = new Array(1,2,3);
    var die1 = document.getElementById("die1");
    var die2 = document.getElementById("die2");
    var status = document.getElementById("status");
    var d1 = b[Math.floor(b.length * Math.random())];
    var d2 = b[Math.floor(b.length * Math.random())];
    var diceTotal = d1 + d2;
    die1.innerHTML = d1;
    die2.innerHTML = d2;
    }

This it my function so fare. I was wondering, if I could make it with some kind a variable function, for the onClick button, so the function it would run, would depend on which numbers ever removed.


Solution

  • something like this? you can look in the console to see the array as it gets smaller because d1 == d2 value gets removed from the array of available numbers.

    var a = [1, 2, 3, 4, 5, 6];
        var die1 = document.getElementById("die1");
        var die2 = document.getElementById("die2");
        var numbersLeft = document.getElementById("numbersLeft");
        
        function rollDice() {
            console.log(a);
            if (a.length > 0) {
                var d1 = a[Math.floor(a.length * Math.random())];
                var d2 = a[Math.floor(a.length * Math.random())];
                die1.innerHTML = d1;
                die2.innerHTML = d2;
            if (d1==d2) {
                    console.log(d1);
                    var index = a.indexOf(d1);
                    if (index > -1) {
                        a.splice(index, 1);
                    }
                }    
            }
            else { alert('all numbers have been used.'); }  
        }
        
        function reset() {
            a = [1, 2, 3, 4, 5, 6];
            die1.innerHTML = '';
            die2.innerHTML = '';
        }
    .die {
        border: 1px solid black;
        width: 30px;
        height: 30px;
        display:inline-block;
        margin:10px;
        padding:10px;
        text-align: center;
        vertical-align: middle;
        background-color:lightgray;
    }
    <a href="#" onclick="rollDice()">Roll Dice</a><br/><br/>
    <a href="#" onclick="reset()">Reset</a><br/><br/>
    <div class="die" id="die1"></div>
    <div class="die" id= "die2"></div>