Need help with my slots machine

Hello, I have created a slots machine using html (pug), scss and JavaScript. It works fine but i want to make it so when each wheel stops spinning, i want them to stop inline with the gray center line that i have created. Im not really sure how i would do this. I would appreciate it if anyone can give me some help with this Here is my code https://codepen.io/tok124/pen/dyQVPzb
Tim
CodePen
dyQVPzb
...
4 Replies
Chris Bolson
Chris Bolsonβ€’11mo ago
You probably need to get your random percentage to be rounded up' or down according to the height and number of images, then adjust this for padding etc. I did a quick hack on your getRandomNumber()function which got it to stop in the middle of each row. I'll leave the optimization to you, I just wanted to have a go as proof of concept. This works because you have 10 images in each column. I magic numbered to the padding allowance added to each one πŸ™‚
function getRandomNumber(min, max) {
let number = Math.floor(Math.random() * (max - min + 1) + min );
return Math.round(number / 10) * 10 + .75
}
function getRandomNumber(min, max) {
let number = Math.floor(Math.random() * (max - min + 1) + min );
return Math.round(number / 10) * 10 + .75
}
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)β€’11mo ago
Ooh thanks a lot. I will try this asap !
Senra
Senraβ€’11mo ago
The styling looks real good
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)β€’11mo ago
Thanks ! πŸ™‚