本文主要介绍如何使用原生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的线性渐变，这样一个小扇形区域基本就可以实现了：渐变的代码如下：background-image:linear-gradient(120deg,#f6d365,#f6d36575px,transparent75px);实现一个扇形，我们自然可以计算出来，比如我们的扇形弧度是30deg，那么我们需要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；显示：内联块；颜色：#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，通过data来控制，可以通过每次随机化后得到的角度和单位扇区的弧度来计算停止位置，公式如下：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
