Jump to content
Sign in to follow this  
Entity_101

Randomized spinner on click in Javascript & Adobe Edge

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...