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.
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>