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

Question

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

JoãoCésar17023019 · Accepted Answer

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

Nick Gioia · Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded