Jump to content

Randomized spinner on click in Javascript & Adobe Edge


Entity_101
 Share

Recommended Posts

Hello,

 

I'm trying to make a spinner that spins randomly on click (see example below).

I've been messing around with this for hours, but I just cannot make this work like I want it to.

 

3KOqbyx.png

 

This is my code, but it is unfinished and buggy:

var myArray = ['360', '330', '300', '270', '240', '210', '180', '150', '120', '90', '60', '30'];
var Spinner1 = sym.$('Spinner1');
// spinner 1 = wheel.jpg

Spinner1.click(function(){
// randomize the degree of spin.
var mySpin = myArray[Math.floor(Math.random() * myArray.length)];

sym.getSymbol('Spinner1').play();
        Spinner1.css({
'-webkit-transform': 'rotate(' + mySpin + 'deg)',
'-moz-transform': 'rotate(' + mySpin + 'deg)',
'-ms-transform': 'rotate(' + mySpin + 'deg)',
'-o-transform': 'rotate(' + mySpin + 'deg)',
'transform': 'rotate(' + mySpin + 'deg)',
});

Spinner1.css('-webkit-transition','all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000)');

// calling alert pop-up on number
if (mySpin > 330 && mySpin < 360) {
alert("Winner is number 1!");
}
}); 

What I am actually trying to achieve is the following:

  • The spinner only spins clockwise (not clockwise and counter-clockwise)
  • The spinner always spins 360 degrees + the random number/degrees defined in myArray (added on top of 360deg)
  • The spinner randomly picks a number/degrees from myArray - but does not repeat that number again until all numbers have been spinned (resets after all spins)
  • The spinner calls an alert pop-up when the pointer has landed on a number (between 1-12)

If anyone can help me out or perhaps make my code work properly, I would be very happy.

I really want to know what I am doing wrong so I can learn from it in the future.

Help is sincerely appreciated!

 

Regards,

Entity_101

TestSpinner.zip

Edited by Entity_101
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...