Dice Roller Simulator

Like many Android apps I've developed, I sometimes like to write a proof of concept for the logic and get it running in a more simple environment. Java (the language of Android) is very similar to JavaScript, at least in syntax and logic. So I got this version running before creating the Android Version.

How does this work?

In an effort to help people that are trying to learn more about JavaScript, I will explain this whole thing. Hope you find it helpful.

You can right-click and view the source on this to see exactly how it works. But here are the basics...

The super-simple explanation is that there is a timer running all the time. We use a couple of variables to determine if the dice are rolling or not. When they are done rolling, you get a final display. We also give the user a choice for how many dice to roll. So we have to allow for that too.

Set your variables, and use the setNumDice() function to respond when the user change the dropdown for HowManyDice.

    var howmany = 1;
			var diceValues = [1,1,1,1,1];
			var diceValue = 0;
			var animating=false;
			var animCount=0;
			
			function setNumDice(){
				for (i=1;i<=5;i++){
				   document.getElementById("d"+i).style.display = 'none';
				}
				howmany = document.getElementById("selNumDice").value;
				for (i=1;i<=howmany;i++){
					document.getElementById("d"+i).style.display = 'block';
				}
			}

When the user clicks the ROLL button, we call the animateDice() function which sets the flags to show the animation.

    function animateDice(){
			  animating=true;
			  animCount=0;
			}

Here is the animation function - the timer. This is running all the time. But as long as the flag for animating is false, nothing happens. The timer fires once every 10 milliseconds. Once the animating variable is set to TRUE, the animCount variable counts up how many times it has fired.

Each time the timer fires, it loops through the available (active) dice, and chooses a new random dice image and displays it. It does this every 10 milliseconds. So the result is a flash of random images.

    //timer for animations
			var gameRunning = setInterval(animTimer, 10);
			function animTimer() {
			  var d = new Date();
			  
			  if (animating==true){
				animCount++;
				document.getElementById("timer").innerHTML = animCount;
				for (i=0;i<howmany;i++){
				  diceValues[i] = Math.floor(Math.random() * 6)+1;
				  whichDice = i+1;
				  document.getElementById("d"+whichDice).style.backgroundImage = "url('d" + diceValues[i] + ".png')";  
				}
				
			  }
			  if (animCount>50) {
				animating=false;
				animCount=0;
				rollDice();
			  }
			  
			}

Once it has fired 50 times, the flag for animating is set to false and RollDice() is called.

    function rollDice(){
			  diceValues = [0,0,0,0,0];
			  diceValue = 0;
			  for (i=0;i<howmany;i++){
				diceValues[i] = Math.floor(Math.random() * 6)+1;
				whichDice = i+1;
				document.getElementById("d"+whichDice).style.backgroundImage = "url('d" + diceValues[i] + ".png')";  
				diceValue+=diceValues[i];
			  }
			   document.getElementById("dicevalueDiv").innerHTML = "Value: " + diceValue;
			}

This function resets the dice values, randomly chooses new values, and ads them up. The user sees the final result.