使用Javascript和CSS3实现一个转盘小游戏(实战篇)

本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏，由于改实现可以有不同方式，如果熟悉canvas的话也可以用canvas实现，本文采用js和css实现主要考虑到复杂度较小性能较好，所以如果有更好的方案，也可以随时和我交流。

沙河ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

前言

本文技术路线采用和上篇文章教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)同样的技术,即均使用本人自己写的dom库去简化dom操作,具体需要掌握的知识点有：

  • css3 背景渐变，transform，transition
  • less循环的使用
  • javascript基本随机算法
  • 文档片段 documentFragment的使用

由于文章没有太高深的技术，关键是思路，所以接下来开始我们的实现介绍。

效果图

实现思路

实现思路分两部分，第一部分是用css绘制转盘背景，第二部分是通过js实现转盘的转动以及转动随机性的实现。

1. 绘制转盘背景

我们采用背景渐变的方式去实现条纹交替的扇形，原理就是通过绘制一个半圆，并在半圆里加渐变来实现，如下图：

实现将方形变成半圆的css我们通过border-radius来实现：

 
 
 
 
    
  
  
  
  
  1. width: 150px; 
    2.   
  
  
  
  2. height: 300px; 
    3.   
  
  
  
  3. border-radius: 0 150px 150px 0; 
    4.

我们再通过css的线性渐变，这样本基本上可以实现一个小的扇形区域：

渐变的代码如下：

 
 
 
 
    
  
  
  
  
  1. background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px); 
    2.

实现了一个扇形，我们自然可以通过计算，比如我们扇形弧度为30deg，那么我们需要12个扇形即可组成一个圆，为了方便，我们使用less的循环来实现：

 
 
 
 
    
  
  
  
  
  1. .loop(@n) when (@n >= 0) { 
    2.   
  
  
  
  2.     .loop(@n - 1); 
    3.   
  
  
  
  3.     .piece-@{n} { 
    4.   
  
  
  
  4.         transform: rotate(-30deg * (@n + 1)); 
    5.   
  
  
  
  5.     }  
    6.   
  
  
  
  6. } 
    7.

还有一个细节是，我们需要改变变换的中心点，让每个扇形都以一个中心点渲染，这样才可以组成一个完整的圆：

 
 
 
 
    
  
  
  
  
  1. transform-origin: left center; 
    2.

完整的css大致如下：

 
 
 
 
    
  
  
  
  
  1. .piece-wrap { 
    2.   
  
  
  
  2.     position: relative; 
    3.   
  
  
  
  3.     width: 300px; 
    4.   
  
  
  
  4.     height: 300px; 
    5.   
  
  
  
  5.     margin: 100px auto  auto 173px; 
    6.   
  
  
  
  6.     transform-origin: left center; 
    7.   
  
  
  
  7.     transition: transform 16s cubic-bezier(0,.47,.31,1.03); 
    8.   
  
  
  
  8.     .piece { 
    9.   
  
  
  
  9.         position: absolute; 
    10.   
  
  
  
  10.         left: 0; 
    11.   
  
  
  
  11.         top: 0; 
    12.   
  
  
  
  12.         width: 150px; 
    13.   
  
  
  
  13.         height: 300px; 
    14.   
  
  
  
  14.         border-radius: 0 150px 150px 0; 
    15.   
  
  
  
  15.         transform-origin: left center; 
    16.   
  
  
  
  16.         span { 
    17.   
  
  
  
  17.             margin-left: 16px; 
    18.   
  
  
  
  18.             margin-top: 20px; 
    19.   
  
  
  
  19.             display: inline-block; 
    20.   
  
  
  
  20.             color: #fff; 
    21.   
  
  
  
  21.         } 
    22.   
  
  
  
  22.         &:nth-child(2n) { 
    23.   
  
  
  
  23.             background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px); 
    24.   
  
  
  
  24.         } 
    25.   
  
  
  
  25.         &:nth-child(2n+1) { 
    26.   
  
  
  
  26.             background-image: linear-gradient(120deg, #ff5858, #ff5858 75px, transparent 75px); 
    27.   
  
  
  
  27.         } 
    28.   
  
  
  
  28.     } 
    29.   
  
  
  
  29.  
    30.   
  
  
  
  30.     .loop(@n) when (@n >= 0) { 
    31.   
  
  
  
  31.         .loop(@n - 1); 
    32.   
  
  
  
  32.         .piece-@{n} { 
    33.   
  
  
  
  33.             transform: rotate(-30deg * (@n + 1)); 
    34.   
  
  
  
  34.         }  
    35.   
  
  
  
  35.     } 
    36.   
  
  
  
  36.  
    37.   
  
  
  
  37.     .loop(11); 
    38.   
  
  
  
  38. } 
    39.

2.javascript实现转盘逻辑

由于转盘的转动是随机的，所以我们需要每次点击开始按钮都要随机生成一个角度，但是仔细分析一些平台会发现转盘每次都至少转动n圈后才会满满开始停下，所以我们会给转盘一个初始的角度，比如720deg，1080deg，这样能保证转盘至少转动n圈才停下来。

另一个注意点是我们要如何通过转动角度知道转盘停下来后的位置?这里处于性能问题，我们尽量不操作dom，通过数据控制，我们可以通过每次随机后得到的角度和单位扇形区域的弧度来计算停下来的位置，公式如下：

totalRadis = initRadis + radis * n + radis/2totalRadis为转动的角度，

initRadis为初始化角度，radis为扇形的角度，radis/2是中奖的范围，这里主要用来定位用的，n是随机数，接下来我将解释n的作用。

那么怎么实现随机角度呢?我们一般会想通过写个随机函数去做，不过这里有一种新的思路，就是通过随机生成中奖的位置来实现随机角度，由于我的扇形为30度，一共有12个扇形奖品区，所以索引为0-11。因此，上面讲到的n，就是我们的随机索引，我们只需要写个生成指定范围的随机数就可以了。

了解了以上知识，我们开始准备初始化数据：

 
 
 
 
    
  
  
  
  
  1. // 转盘抽奖数据 
    2.   
  
  
  
  2.     var wards = ['1元', '2元', '3元', '5元', '再来',  
    3.   
  
  
  
  3.      '算法', '0.5元', '0.1元', '0.2元', '0.6元', 
    4.   
  
  
  
  4.      '0.5元', '来']; 
    5.

渲染奖品数据,这里我们用了DocumentFragment，虽然对简单渲染没有必要，但是后期可能会很有用：

 
 
 
 
    
  
  
  
  
  1. // 渲染dom 
    2.   
  
  
  
  2. var fragment = document.createDocumentFragment(); 
    3.   
  
  
  
  3. for(var i=0, len = wards.length; i < len; i++) { 
    4.   
  
  
  
  4.     var piece = document.createElement('div'); 
    5.   
  
  
  
  5.     piece.className = 'piece piece-' + i; 
    6.   
  
  
  
  6.     piece.innerHTML = '' + wards[i] + ''; 
    7.   
  
  
  
  7.     fragment.appendChild(piece); 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. $('#piece_wrap')[0].appendChild(fragment); 
    11.

生成指定范围的随机数的方法：

 
 
 
 
    
  
  
  
  
  1. // 生成从 start到end的随机数 
    2.   
  
  
  
  2. function randomArr(start, end) { 
    3.   
  
  
  
  3.     return Math.round(start + Math.random()* (end - start)) 
    4.   
  
  
  
  4. } 
    5.

当我们点击开始按钮时，我将通过改变转盘的transform来让其运动起来：

 
 
 
 
    
  
  
  
  
  1. // 转动逻辑 
    2.   
  
  
  
  2.     var radis = 30,  // 每个扇形区域的度数 
    3.   
  
  
  
  3.             n = randomArr(0, 360/radis),  // 计算随机中奖的位置 
    4.   
  
  
  
  4.     initRadis = 720,   // 初始转动的角度 
    5.   
  
  
  
  5.          time = 16 * 1000,    // 转动时间  
    6.   
  
  
  
  6.          once = true,    // 限制一个转动周期只能点击一次 
    7.   
  
  
  
  7.    totalRadis = initRadis + radis * n + radis/2;  // 转动角度计算公式 
    8.   
  
  
  
  8. $('.start').on('click', function(){ 
    9.   
  
  
  
  9.     if(once) { 
    10.   
  
  
  
  10.         once = false; 
    11.   
  
  
  
  11.         $('#piece_wrap').css({ 
    12.   
  
  
  
  12.             'transform':'rotate(' + totalRadis + 'deg)', 
    13.   
  
  
  
  13.             'transition': 'transform 16s cubic-bezier(0,.47,.31,1.03)' 
    14.   
  
  
  
  14.         }); 
    15.   
  
  
  
  15.         setTimeout(function(){ 
    16.   
  
  
  
  16.             once = true; 
    17.   
  
  
  
  17.             alert('恭喜你抽中了' + wards[n] + '!'); 
    18.   
  
  
  
  18.             $('#piece_wrap').css({ 
    19.   
  
  
  
  19.                 'transform':'rotate(' + 0 + 'deg)', 
    20.   
  
  
  
  20.                 'transition': 'none' 
    21.   
  
  
  
  21.             }); 
    22.   
  
  
  
  22.         }, time) 
    23.   
  
  
  
  23.     } 
    24.   
  
  
  
  24.          
    25.   
  
  
  
  25.     }) 
    26.

核心代码就这些，怎么样，是不是很简单呢?

本文题目：使用Javascript和CSS3实现一个转盘小游戏(实战篇)
URL分享：http://www.36103.cn/qtweb/news27/36027.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

Google知识

同城分类信息

公路打桩机　　 　成都西云机房　　 　成都网站建设公司　　 　泸县网站建设　　 　成都网站优化　　 　做网站　　 　成都微信开发　　 　重庆机房托管　　 　南充网站建设　　 　一元广告　　 　眉山主机托管　　 　无边发光字　　 　香港云虚拟主机　　 　网站优化公司　　 　B2C电商系统　　 　一带一路　　 　成都广告招牌　　 　网站seo　　 　成都光华机房　　 　Android开发