本文主要介绍如何使用原生javascript和Css3实现一款经常出现在各大手机应用中的转盘游戏。由于有不同的实现方式，如果你熟悉canvas，也可以用canvas来实现。本文使用js和css来实现主要考虑的是复杂度更低，性能更好，所以如果有更好的方案可以随时和我交流。前言本文的技术路线与上一篇教你用200行代码写一个爱豆拼乐H5小游戏（附源码）的技术采用相同的技术，即使用自己编写的dom库来简化dom操作，需要详细掌握知识点有：css3背景渐变，transform，transitionlesscycle使用javascript基本随机算法文档片段使用documentFragment由于文章没有太高深的技术，关键是思路，所以下面开始我们的实现介绍。效果图的实现分为两部分。第一部分是用css绘制转盘的背景，第二部分是通过js实现转盘的旋转和旋转的随机性。1.绘制转盘的背景，我们使用背景渐变的方法来实现条纹交替的扇形。原理是画一个半圆，给半圆加上渐变，如下图所示：实现把正方形变成半圆的css，我们使用border-radius实现：width:150px；高度：300px；边界半径：0150px150px0；让我们用CSS的线性渐变，让这本书基本可以实现一个小扇形区域：我们可以用CSS的线性渐变，让这本书基本可以实现一个小扇形区域：渐变代码是如下：background-image:linear-gradient(120deg,#f6d365,#f6d36575px,transparent75px);要实现一个扇形的面积，我们自然可以计算出来，比如我们的扇形弧度是30度，那么我们围成一个圆需要12个扇区。为了方便，我们使用less循环来实现：.loop(@n)when(@n>=0){.loop(@n-1);.piece-@{n}{transform:rotate(-30deg*(@n+1));}}还有一个细节就是我们需要改变变换的中心点，让每个扇区都渲染一个中心点，这样我们就可以形成一个完整的圆：transform-origin:leftcenter;完整的css大致如下：.piece-wrap{position:relative;width:300px;height:300px;margin:100pxautoauto173px;transform-origin:leftcenter;transition:transform16scubic-bezier(0,.47,.31,1.03);.piece{position:absolute;left:0;top:0;width:150px;height:300px;border-radius:0150px150px0;transform-origin:leftcenter;span{margin-left:16px;margin-top:20px;display:inline-block;color:#fff;}&:nth-child(2n){background-image:linear-gradient(120deg,#f6d365,#f6d36575px,transparent75px);}&:nth-child(2n+1){background-image:linear-gradient(120deg,#ff5858,#ff585875px,transparent75px);}}.loop(@n)when(@n>=0){.loop(@n-1);.piece-@{n}{transform:rotate(-30deg*(@n+1));}}.loop(11);}2.javascript实现转盘逻辑由于转盘的旋转是随机的，所以我们需要在每次点击开始按钮的时候随机生成一个角度，但是仔细分析一些平台会发现转盘每次至少会旋转n次才慢慢开始停止，所以我们会给转盘一个初始角度，比如720deg，1080deg，这样可以保证转盘至少转n圈后才会停止。还有一点需要注意的是，我们如何通过旋转角度知道转盘停止后的位置呢？这是一个性能问题，我们尽量不操作dom，通过数据控制，我们可以通过每次随机后得到的角度和单位扇区的弧度来计算停止位置，公式如下：totalRadis=initRadis+radis*n+radis/2totalRadis是旋转角度，initRadis来初始化角度，radis是扇区的角度，radis/2是获胜范围，这里主要用来定位，n是一个随机数，我会接下来解释一下n的作用。那么如何实现随机角度呢？我们通常想通过写一个随机函数来实现，但是这里有一个新的思路，就是通过随机生成获胜位置来实现随机角度。由于我的扇区是30度，所以总共有12个。一个扇形的奖品区，所以指数是0-11。所以上面说的n就是我们的随机索引，我们只需要写一个随机数就可以产生一个指定的范围。了解了以上知识后，我们开始准备初始化数据：//转盘彩票数据varwards=['1元','2元','3元','5元','再来一次','algorithm','0.5元','0.1元','0.2元','0.6元','0.5元','到'];渲染奖品数据，这里我们使用DocumentFragment，虽然简单渲染不是必须的，但后面可能会有用//renderdomvarfragment=document.createDocumentFragment();for(vari=0,len=wards.length;i
