Trying to go to a random frame number with button click in HTML5 canvas

[NefJack]

Hi,

I'm trying to make the timeline within a movie clip go to and stop on a random frame numer initiated with a button click.

I have a button called "testbtn" and a movieclip called "testmc"

I'm storing the frame numbers I want to be able to go to in an array and then picking a number from that array randomly, and then inserting that number into an "on-click" event.

The code I have is:

var _this = this;
this.frameA = [1, 2, 3, 4, 5];
var randomframe = Math.floor(Math.random() * this.frameA.length);


this.testbtn.on('click', function(){
_this.testmc.gotoAndStop(this.randomframe);
});

But it doesn't seem to work. Anyone know what I am doing wrong?

[JoãoCésar]

Hi.

It's because randomFrame is a variable but you're trying to access it like it is a property using the this keyword. Also, please keep in mind that the first frame index in the HTML5 Canvas is 0.

var _this = this;
this.frameA = [ 0, 1, 2, 3, 4 ];
var randomframe = Math.floor(Math.random() * this.frameA.length);

this.testbtn.on('click', function ()
{
	_this.testmc.gotoAndStop(randomframe);
});

I hope this helps.

Regards,

JC

[NefJack]

Thank you JC. That helps!

That seemed to work.. but I have a follow up question that I hope you can help me with.

When the button is clicked, it is definitely randomly choosing a number from the array. But it is choosing the same number every time it is clicked again.  How can I make it choose a random number for every click, without having to refresh the page?

[JoãoCésar · Accepted solution]

You're welcome!

You just have to move randomFrame into the event handler function and replace this.frameA.length by _this.frameA.length. 

var _this = this;
this.frameA = [ 0, 1, 2, 3, 4 ];

this.testbtn.on('click', function ()
{
	var randomframe = Math.floor(Math.random() * _this.frameA.length);
	_this.testmc.gotoAndStop(randomframe);
});

Alternatively, you can create this same interactivity without using the array. You just need the totalFrames property of a MovieClip. Like this:

var _this = this;

this.testbtn.on('click', function ()
{
	var randomframe = Math.floor(Math.random() * _this.testmc.totalFrames);
	_this.testmc.gotoAndStop(randomframe);
});

I hope it helps.

Regards,

JC

[NefJack]

Thanks a ton.

Exactly what I wanted!

[JoãoCésar]

Excellent! You're welcome!

[Nurhamida25024381d3rg]

Hi, I wonder if this script can be used for generating a random of several numbers, such as (2, 1, 4, 9, 3).  I know it's a little different from the topic, But I guess it seems logically close. I've tried this script, but it didn't work. could you please help me with this? Thank you very much!

var _this = this;
this.numberA= [ 2, 1, 4, 9, 3 ];
var randomnumber = Math.floor(Math.random() * this.numberA.length);

this.testbtn.on('click', function ()
{
	_this.numberRandom.text= randomnumber;
});

[JoãoCésar]

Hi.

I suppose it's not working because you're always getting the same number?

[Nurhamida25024381d3rg]

Thank for replaying, yes, it is. 

[Colin Holgate]

You are only setting a random number once. You could set the number in the button click function:

var _this = this;

this.testbtn.on('click', function (){
	var numberA= [ 2, 1, 4, 9, 3 ];
	_this.numberRandom.text = Math.floor(Math.random() * numberA.length);
});

[Nurhamida25024381d3rg]

thank you for your response, I've tried this and got a random number. But there is still a problem, I got a random number that is not from my numbers list. It seems like the script counts the length of the number which are 5 numbers so every time I click I got 0-4. what I need is a random number that exists in my list  [2, 1, 4, 9, 3] so I can change this to any number that I what such as [20, 45, 50, 75, 90] etc. Do you have any Idea how to get it? thanks in advance.

[Colin Holgate]

Try this:

var _this = this;

this.testbtn.on('click', function (){
	var numberA= [ 2, 1, 4, 9, 3 ];
	_this.numberRandom.text = numberA[Math.floor(Math.random() * numberA.length)];
});

[Nurhamida25024381d3rg]

woow, it works perfectly, thanks a lot!

[Nurhamida25024381d3rg]

Hi, it's me again, I need help, I use the tick function for this random, is there a way to control the speed of the random? I need this random number to change every second, I try to use setInterval but didn't work Thank you.

this is the random code that I use.

this.addEventListener("tick", randomkesetimbangan.bind(this));
function randomkesetimbangan() {

var numberC = [0.0, 0.1, -0.1, ];
that.randomTD.text = (numberC[Math.floor(Math.random() * numberC.length)])

}

[Yassir5E15]

Apakah seperti ini ?

https://www.mediafire.com/file/e3xnflwitcrp0wp/random_array_number.fla/file

[Nurhamida25024381d3rg]

oo iya, sudah terselesaikan, Ternyata setIntervalnya harus ditaruh di luar funsi tick.  Terima kasih banyak..

[Yassir5E15]

Bisa juga ditambahkan fungsi setTimeout supaya pertama kali di preview, langsung muncul angkanya. Waktu bisa di set 50.

[Nurhamida25024381d3rg]

oiyaaa.. baik, terima kasih..

[Nurhamida25024381d3rg]

Hi Colin, could you please help me again in this case? I need this random number without repetition and don't know how to set it. Thank you.

[kglad]

google the shuffle function in this forum.

[Nurhamida25024381d3rg]

thanks, But I don't really understand that shuffle function and what I found is for actionscript, is there a simple way to edit the script below to get the unrepeated random number? thank you.

this.addEventListener("tick", randomkesetimbangan.bind(this));
function randomkesetimbangan() {

var numberC = [0.0, 0.1, -0.1, 0.2, -0.2, 0.3, -0.3 ];
that.randomTD.text = (numberC[Math.floor(Math.random() * numberC.length)])

}

[kglad]

no, you need to use the shuffle function.  i've posted it numerous times here in as3 and js.

i'm on my phone now. when back to my computer, i'll repost it here.

[Nurhamida25024381d3rg]

alright, that’s very kind of you for helping me. Thank you.

[kglad]

will do

[kglad]

heres' the shuffle function:

function shuffle(a) {
for (var i = a.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = a[i];
a[i] = a[j];
a[j] = temp;
}
}

////////////////////////////////////

//the way you should use it is to create an array of numbers that you want to shuffle.  in your situation:

var framesA=[]

for(var i=0;i<this.totalFrames;i++){

framesA.push(i);

}

//then shuffle that array:

shuffle(framesA);

// start your code

var index = 0;

// call random frame without repeats:

function frameF(){

var f = framesA[index];

index++;

if(index==framesA.length){

index = 0;

shuffle(framesA);

}

return f;

}