一文教你用JavaScript制作个简单的大转盘游戏

目录

• 背景
• 一、开始前的准备
• 二、画出大转盘
• 三、把奖励放上去
• 四、让大转盘滚起来
• 个人总结

背景

日常生活中，我们经常会见到形形色色的抽奖活动，例如九宫格、大转盘等等……以前都没去深入考虑过，如果让我去做这些小游戏，有哪些需要注意的事项，不试不知道，一试全是坑。正好最近有需求让我做一个大转盘游戏，那我也总结一下我的一些感想和经验。

一、开始前的准备

首先就是确定产品需求，仔细一看，emmm，就是正常的一个大转盘该有的东西，也没啥特殊要求，唯一需要注意的是大转盘的转盘个数需要动态变化，即用户设置多少奖品我就需要显示多少块区域。

既然要做大转盘，不外乎三个步骤：

• 画出大转盘
• 把奖励放上去
• 让大转盘滚起来

这有啥难的，让UI给我N个大转盘背景图，用户设了多少奖品我就显示对应的背景图... 哦，那样图片太多了，太麻烦了，也行吧... 那给我每个角度的扇形切图一张，我转一下不就出来了？... 啊？不给啊，那没事了...（当时的表情：冷静分析...仔细思索...眉头稍皱...好耶，我凉了呀）

二、画出大转盘

画出大转盘底图部分就不必多说了，最难的部分在于把一个圆动态平均分成N份，并让其在底图上正常显示。

我采用的方法是：用户选择了多少奖品（除2个奖品以外）我就在底图上生成多少个宽高为底图50%的div，目的是使每个div的右下角正好与底图的中心点重合（这里有个坑，看下去就知道了），接着计算出对应的圆心角 angle = 360 / n ，然后将其形变后以右下角为圆心旋转对应的角度拼成一个圆形。其中，形变和旋转分别采用skew与rotate进行实现。

注：

• skew形变的角度为(90 - angle)deg；
• 如果要给每一块加上渐变色的话，由于使用了skew形变，所以要显示从左到右的渐变的效果，就需要从原先正方形的底边变到右边，即：background: linear-gradient('45deg', color1, color2)

如想看到更为细致的旋转原理与demo，请点击下方链接：

原理：https://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html

demo：https://tympanus.net/Tutorials/CircularNavigation/interactivedemo/index.html

// 以下为N为8时，用纯JS写的一个测试demo
const n = 8; // 奖品数量
const circle = document.getElementById('circle');
for(let i = 0; i < n ; i++) {
    let item = document.createElement('div');
    item.className = `circle-item  circle-item-${n}`;
  	// n为2时，旋转原点不在右下角改为底部中点，不需要skew形变，并且宽度不是50%而是100%
    if(n !== 2) {
      item.style=
        `transform: rotate(${i * angle}deg) skew(${90 - angle}deg);
         transform-origin: bottom right;
         background-color: ${colorList[i % colorList.length]}; //设置了每个格子的背景色，可以不设置
        `
    } else {
      item.style=
        `transform: rotate(${i * angle}deg);
         transform-origin: bottom;
         background-color: ${colorList[i % colorList.length]};
        `
    }
    circle.appendChild(item);
  }

本以为算解决了一个难题，直到我开始测试时，发现 n == 3时出现了奇怪的现象：

好嘛，当 n == 3时，只设置50%的宽高显然并不能填充满整个背景图。于是更改了当 n != 2时的样式，改为宽高的60%，并设置其初始位置往左和上各平移10%。

.circle-item {
    border: 1px solid;
    height: 60%;
    width: 60%;
    position: absolute;
    left: -10%;
    top: -10%;
}

这样乍一看是实现了平均分的问题，但仔细一想还有一个问题，那便是如果加上指针，指针永远是向上的，这样看起来就怪怪的了，所以还需要将整个图像进行一个旋转，使初始指针默认指向第一块的中心位置。

旋转角度为： (180 - angle) / 2。

三、把奖励放上去

把奖励放上去我想到两种方法：

1、给每个奖励生成一个与底部背景图宽高一样的正方形，然后将其对着中心点旋转对应的角度，将其一层层的放在底部背景图上，即可完成。如下图1所示，每一个正方形的大小都是与底部的背景图的宽高是一样的，只是将其进行一个旋转即可。（当时以为不好显示用户抽中的扇形的部分，就没采用这种方法，现在总结了才发现只需要将颜色填充在每个扇形中即可，不用填充在奖励背景上，如下图2所示，应该也是能实现的）

图1 每一层奖励的范围

图2 总结时想到的实现方法

2、将奖励直接放在每一个扇形区域里面，这样我就直接修改每个扇形的背景色即可。看上去很简单，但实际开始操作了就发现了两个问题：

• 由于每一块方格是skew形变出来的，奖励直接放上去也会产生形变，需要将形变消除；
• 奖励居中显示很麻烦，到现在我也没有找到可以套用的公式；

第一点解决起来较为简单，只需要将奖励进行一个反向的skew变形，旋转角度为：-(90 – (angle / 2))deg。 第二点我到现在也没有找到可以套用的公式，是每一种给他写了一个样式居中的。（还好产品只要求2-6的奖励数量，不然可能就没有这篇文章了，如果大家有好的方法也可以教教我）

两种方法各有优点： 方法一的优点是不需要将奖励进行反向形变，怎么放上去就是怎么显示； 方法二的优点是奖励与扇形不分离，我不需要额外的添加太多的div来实现奖励正确显示。

四、让大转盘滚起来

大转盘到现在已经完成了七七八八了，现在就差最后一步，让其滚起来，点击一次后滚动到对应的位置然后停下。

采用的方法是给大转盘添加一个旋转的动画，突然想起来 transform 中有 ease-in-out 这个过渡方法，即慢-快-慢的过渡效果，正好满足我抽奖所需，于是直接采用了这种方法。

这里有个小细节，由于大转盘上本来就设置了transform的动画效果，如果不想现在的旋转动画覆盖掉之前的动画，就需要单独给动画加上一层div，放在大转盘底图的外边一层。

const circle = 8; // 旋转圈数
let circleAdd = 0; // 抽奖次数，每次抽完自增
let rotateAngle = 0; // 旋转角度
let getPrizeIndex = 0; // 抽到的奖品的index

在定义完上面的内容之后计算需要旋转的角度： rotateAngle = circle * 360 * circleAdd - angle * getPrizeIndex，将这个rotateAngle放入需要旋转的style中即可完成旋转。

这里走了两次弯路，一次是没有加上circleAdd，然后就发现第一次大转盘会正常旋转，第二次开始就不动或者只往前滚不到360°甚至往回滚！原因是因为每一次给style赋新值的时候，由于已经有旋转的角度了，他会在你设置新的旋转角度的时候从上一个旋转角度开始执行动画。

第二次是我在写计算公式的时候，想当然的把上面的“-”写成了“+”，想的是我先旋转了circle * circleAdd圈，然后还要滚 getPrizeIndex 个奖励就是我需要显示的奖励，然后发现指针指向的奖励与我需要选择的 getPrizeIndex 并不相符。仔细检查了才发现虽然大转盘旋转是顺时针方向的，但是奖励的读取方向应该是逆向的，所以应该是“-”而不是“+”。

个人总结

在写这个大转盘之前我一直没觉得大转盘这种小游戏有多难，无非就是转一下，然后奖励显示一下，这有啥难的？写了之后才发现自己真的too young too simple，一个简单的大转盘里面也有不少的数学的公式需要学习计算，真的是走一步卡半天，一步一个坑。还是需要多多学习！

到此这篇关于一文教你用JavaScript制作个简单的大转盘游戏的文章就介绍到这了,更多相关JavaScript大转盘游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！