So, for our project, we have to make a Wheel of Fortune game (based on the game show), and I made everything (like checking if the word was correct and everything) but I still don't know how to do the animations. What I have to animate is similar to what is in the attached picture. Our teacher told us that we can't use canvas, so I can't use .rotate()
. So, does anyone have any ideas as to how this can be accomplished? Remember, I don't even need the wheel to actually rotate; it would work even if just the pictures were to change positions.
Here is the picture of a sample wheel (pretend the numbers are all pictures). I have stored all of the pictures in a single array that contains all of the pictures: https://en.m.wikipedia.org/wiki/Wheel_of_Fortune_(U.S._game_show)#/media/File%3AWheel_of_Fortune_Round_1_template_Season_31.png
PS: For academic honesty purposes, I will not be able to post my code here.
Thank you for your time, everyone!
This is a very basic way of doing it: http://codepen.io/AaronGeorge/pen/zoOWagDead link
What you utilise is the CSS transform property and use the rotate value.
You'll need to do some math to work out how much you need to rotate the image, but transform: rotate(amount);
will do the trick without using canvas.