Delaying the running of a FOR loop using JavaScript in canvas - simulating a roll of a dice.

[rodecss]

I am trying to simulate a dice roll in an activity for my class. I can generate a random number between 1 and 6 and place it in a textbox on the canvas.

What I need help with is how to display a series of numbers in the text box before it stops at the final numnber (sort of like a dice roll)

Here is where I have got to:

function rolldice(){

     for (i=0; i<10; i++){.    // the idea here would be to display a series of 10 random numbers between 1 and 6 with a short pause in between.

          this.num1.text=randomIntFromInterval(1,6).      //this is a function I use and it generates the random number. num1 is the name of the text field.

          setTimeout ....... //this is where I have trouble ... I don't know if I am using the correct idea.

     }

}

I wonder if someone can give me a hand with this.

Thank you

[Nicktendo28]

JoãoCésar is really good with issues like this he may be able to help.

[JoãoCésar · Accepted solution]

Hi.

You can use an interval and a variable to keep track of the number of turns. Like this:

var root = this;
var txt = root.num1;
var delay = 1000;
var maxIntervals = 10;
var count = 0;

root.randomIntFromInterval = function()
{
	return Math.ceil(Math.random() * 6);
};

root.interval = setInterval(function()
{
	txt.text = String(root.randomIntFromInterval());
	count++;
	
	if (count === maxIntervals)
		clearInterval(root.interval);
}, delay);

Please let us know if you need further assistance.

Regards,

JC

[rodecss]

Well that works really well. There is no way I would have discovered how to do that without your help.

Thank you very very much JC.

I am now going to work at setting this up so that it runs with a button click .... my next challenge!!!!!

Kind regards.....

Rod

[JoãoCésar]

You're welcome, Rod!

I wish success in your next challenge!