介绍 <李> 
本篇内容主要讲解“怎么用Javascript实现一个转盘小游戏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习”怎么用Javascript实现一个转盘小游戏”吧!
<强>前言
本文技术路线采用和上篇文章教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)同样的技术,即均使用本人自己写的dom库去简化dom操作,具体需要掌握的知识点有:
css3背景渐变,变换,转换
<李>不循环的使用
<李>Javascript基本随机算法
<李>文档片段documentFragment的使用
由于文章没有太高深的技术,关键是思路,所以接下来开始我们的实现介绍。
<>强效果图
<中心>实现将方形变成半圆的css我们通过border-radius来实现：
width: 150px; height: 300px; border-radius: 0 150px 150px 0;
我们再通过css的线性渐变，这样本基本上可以实现一个小的扇形区域：
我们再通过css的线性渐变，这样本基本上可以实现一个小的扇形区域：
渐变的代码如下：
background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px);
实现了一个扇形，我们自然可以通过计算，比如我们扇形弧度为30deg，那么我们需要12个扇形即可组成一个圆，为了方便，我们使用less的循环来实现：
.loop(@n) when (@n >= 0) { .loop(@n - 1); .piece-@{n} { transform: rotate(-30deg * (@n + 1)); } }还有一个细节是，我们需要改变变换的中心点，让每个扇形都以一个中心点渲染，这样才可以组成一个完整的圆：
transform-origin: left center;
完整的css大致如下：
.piece-wrap { position: relative; width: 300px; height: 300px; margin: 100px auto auto 173px; transform-origin: left center; transition: transform 16s cubic-bezier(0,.47,.31,1.03); .piece { 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); .piece-@{n} { transform: rotate(-30deg * (@n + 1)); } } .loop(11); }怎么用Javascript实现一个转盘小游戏
