CODEWITHSUNDEEP
javascripthtmlcss
zqk
zqk

Reputation: 75

rolling div content like a roulette

I want to create a roulette, that rolls some numbers and shows rolled.
First, I tried with image and backgroundOffset, but it was lagging too much and there was problems with checking rolled number. So I made that code:

<div class="container" style="display: flex">
    <div class="block red">1</div>
    <div class="block black">14</div>
    <div class="block red">2</div>
    <div class="block black">13</div>
    <div class="block red">3</div>
    <div class="block black">12</div>
    <div class="block red">4</div>
    <div class="block green">0</div>
    <div class="block black">11</div>
    <div class="block red">5</div>
    <div class="block black">10</div>
    <div class="block red">6</div>
    <div class="block black">9</div>
    <div class="block red">7</div>
    <div class="block black">8</div>

</div>

JSFIDDLE

How can I make this roll like here?

Upvotes: 0

Views: 1260

Answers (1)

Jazzman
Jazzman

Reputation: 181

Using canvas API is most efficient way to animate objects like that for <canvas> drawing and animating objects, especially when you making game. Cause doing that with divs is less efficient and leads to worse performance. Also using canvas API you have more tools to cheap redrawing and reanimating your object, and also you can get more fancy look without paying for that with huge performance downsides. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

Also don't use setInterval except the very simple animations.
setInterval doesn't wait until previous animation ends, which mean that in some cases on weaker machines you can have multiple intervals running at the same time! And also you don't have a control over animation.

In html5 game development standard way to animate object is using requestAnimationFrame() function: https://developer.mozilla.org/pl/docs/Web/API/Window/requestAnimationFrame

Upvotes: 1

Related Questions