Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use Javascript and CSS3 to achieve a turntable Mini Game, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The specific knowledge points that need to be mastered are:

Css3 background gradient, transform,transition

The use of less loops

Javascript basic random algorithm

The use of document fragment documentFragment

As the article does not have too advanced technology, the key is the train of thought, so let's start our implementation introduction.

Effect picture

Realization idea

The realization idea is divided into two parts, the first part is to draw the background of the turntable with css, and the second part is to realize the rotation and randomness of the turntable through js.

1. Draw the turntable background

We use the background gradient to achieve the sector with alternating stripes, the principle is to draw a semicircle and add a gradient to the semicircle, as shown in the following figure:

To realize the css that turns a square into a semicircle, we can achieve it through border-radius:

Width: 150px; height: 300px; border-radius: 0 150px 150px 0

We can basically achieve a small fan-shaped area through the linear gradient of css:

The code for the gradient is as follows:

Background-image: linear-gradient (120deg, # f6d365, # f6d365 75px, transparent 75px)

To achieve a sector, we can naturally calculate, for example, if our fan Radian is 30deg, then we need 12 sectors to form a circle. For convenience, we use the loop of less to achieve:

.loop (@ n) when (@ n > = 0) {.loop (@ n-1); .loop-@ {n} {transform: rotate (- 30deg * (@ n + 1));}}

Another detail is that we need to change the center point of the transformation so that each sector is rendered with a center point, so that we can form a complete circle:

Transform-origin: left center

The complete css is roughly as follows:

.piece-wrap {position: relative; width: 300px; height: 300px; margin: 100px auto auto 173px; transform-origin: left center; transition: transform 16s cubic-bezier (0mem.47mem.31mem1.03); .position: absolute; left: 0; top: 0; width: 150px; height: 300px; border-radius: 0 150px 150px 0; transform-origin: left center Span {margin-left: 16px; margin-top: 20px; display: inline-block; color: # fff;} &: nth-child (2n) {background-image: linear-gradient (120deg, # f6d365, # f6d365 75px, transparent 75px) } &: nth-child (2n+1) {background-image: linear-gradient (120deg, # ff5858, # ff5858 75px, transparent 75px);}} .loop (@ n) when (@ n > = 0) {.loop (@ n-1); .loop-@ {transform: rotate (- loop * (@ nyst1)) }} .loop (11);} 2.javascript implements turntable logic

Because the rotation of the turntable is random, we need to generate an angle randomly every time we click the start button, but if we carefully analyze some platforms, we will find that the turntable will not stop full until it turns at least n times every time, so we will give the turntable an initial angle, such as 720deg1080deg, so as to ensure that the turntable rotates at least n times before it stops.

Another point to note is how do we know the position of the turntable after it stops by the angle of rotation? There is a performance problem here. We try not to operate dom. Through data control, we can calculate the position of the stop through the angle and the Radian of the unit sector area obtained after each random. The formula is as follows:

TotalRadis = initRadis + radis * n + radis/2totalRadis is the angle of rotation

InitRadis is the initialization angle, radis is the fan-shaped angle, radis/2 is the winning range, here is mainly used for positioning, n is a random number, I will explain the role of n.

So how to achieve random angles? We usually want to do it by writing a random function, but here is a new idea, which is to randomly generate the winning position to achieve the random angle. Because my fan shape is 30 degrees and there are a total of 12 fan-shaped prize areas, so the index is 0-11. So, the n mentioned above is our random index, and we just need to write a random number that generates a specified range.

With the above knowledge, we begin to prepare to initialize the data:

/ turntable lottery data var wards = ['1yuan', '2yuan', '3yuan', '5yuan', 'come again', 'algorithm', '0.50yuan', '0.1yuan', '0.2yuan', '0.60yuan', '0.50yuan', 'come']

To render the prize data, we use DocumentFragment here, which is not necessary for simple rendering, but it may be useful later:

/ / render dom var fragment = document.createDocumentFragment (); for (var iTun0, len = wards.length; I < len; I +) {var piece = document.createElement ('div'); piece.className =' piece piece-' + I; Pie [XSS _ clean] ='+ wards [I] +'; fragment.appendChild (piece);} $('# piece_wrap') [0] .appendChild (fragment)

The method of generating random numbers in a specified range:

/ / generate random numbers from start to end function randomArr (start, end) {return Math.round (start + Math.random () * (end-start))}

When we click the start button, I will make the turntable move by changing its transform:

/ / rotation logic var radis = 30, / / degrees of each sector n = randomArr (0, 360/radis), / / calculate random winning position initRadis = 720, / / initial rotation angle time = 16 * 1000, / / rotation time once = true / / limit one rotation cycle to one click totalRadis = initRadis + radis * n + radis/2 / / Formula for calculating rotation angle $('.start'). On ('click', function () {if (once) {once = false; $(' # piece_wrap'). Css ({'transform':'rotate (' + totalRadis + 'deg)', 'transition':' transform 16s cubic-bezier SetTimeout (function () {once = true; alert ('Congratulations on winning' + wards [n] +'!'); $('# piece_wrap'). Css ({'transform':'rotate (' + 0 + 'deg)', 'transition':' none'}) }, time)}}) Thank you for reading this article carefully. I hope the article "how to use Javascript and CSS3 to achieve a turntable Mini Game" shared by the editor will be helpful to you. At the same time, I hope you will support me and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.