html转盘游戏,使用Javascript和CSS3实现一个转盘小游戏(实战篇)
作者:徐小夕 来源:趣谈前端
本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏,由于该实现可以有不同方式,如果熟悉canvas的话也可以用canvas实现,本文采用js和css实现主要考虑到复杂度较小性能较好,所以如果有更好的方案,也可以随时和我交流。
前言
本文技术路线采用和上篇文章教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)同样的技术,即均使用本人自己写的dom库去简化dom操作,具体需要掌握的知识点有:
css3 背景渐变,transform,transition
less循环的使用
javascript基本随机算法
文档片段 documentFragment的使用
由于文章没有太高深的技术,关键是思路,所以接下来开始我们的实现介绍。
效果图
实现思路
实现思路分两部分,第一部分是用css绘制转盘背景,第二部分是通过js实现转盘的转动以及转动随机性的实现。
1. 绘制转盘背景
我们采用背景渐变的方式去实现条纹交替的扇形,原理就是通过绘制一个半圆,并在半圆里加渐变来实现,如下图:
实现将方形变成半圆的css我们通过border-radius来实现:
width: 150px;
height: 300px;
border-radius: 0 150px 150px 0;
我们再通过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);
}
2.javascript实现转盘逻辑
由于转盘的转动是随机的,所以我们需要每次点击开始按钮都要随机生成一个角度,但是仔细分析一些平台会发现转盘每次都至少转动n圈后才会慢慢开始停下,所以我们会给转盘一个初始的角度,比如720deg,1080deg,这样能保证转盘至少转动n圈才停下来。
另一个注意点是我们要如何通过转动角度知道转盘停下来后的位置?这里处于性能问题,我们尽量不操作dom,通过数据控制,我们可以通过每次随机后得到的角度和单位扇形区域的弧度来计算停下来的位置,公式如下:
totalRadis = initRadis + radis * n + radis/2totalRadis为转动的角度,
initRadis为初始化角度,radis为扇形的角度,radis/2是中奖的范围,这里主要用来定位用的,n是随机数,接下来我将解释n的作用。
那么怎么实现随机角度呢?我们一般会想通过写个随机函数去做,不过这里有一种新的思路,就是通过随机生成中奖的位置来实现随机角度,由于我的扇形为30度,一共有12个扇形奖品区,所以索引为0-11。因此,上面讲到的n,就是我们的随机索引,我们只需要写个生成指定范围的随机数就可以了。
了解了以上知识,我们开始准备初始化数据:
// 转盘抽奖数据
var wards = ['1元', '2元', '3元', '5元', '再来',
'算法', '0.5元', '0.1元', '0.2元', '0.6元',
'0.5元', '来'];
渲染奖品数据,这里我们用了DocumentFragment,虽然对简单渲染没有必要,但是后期可能会很有用:
// 渲染dom
var fragment = document.createDocumentFragment();
for(var i=0, len = wards.length; i < len; i++) {
var piece = document.createElement('div');
piece.className = 'piece piece-' + i;
piece.innerHTML = '' + wards[i] + '';
fragment.appendChild(piece);
}
$('#piece_wrap')[0].appendChild(fragment);
生成指定范围的随机数的方法:
// 生成从 start到end的随机数
function randomArr(start, end) {
return Math.round(start + Math.random()* (end - start))
当我们点击开始按钮时,我将通过改变转盘的transform来让其运动起来:
// 转动逻辑
var radis = 30, // 每个扇形区域的度数
n = randomArr(0, 360/radis), // 计算随机中奖的位置
initRadis = 720, // 初始转动的角度
time = 16 * 1000, // 转动时间
once = true, // 限制一个转动周期只能点击一次
totalRadis = initRadis + radis * n + radis/2; // 转动角度计算公式
$('.start').on('click', function(){
if(once) {
once = false;
$('#piece_wrap').css({
'transform':'rotate(' + totalRadis + 'deg)',
'transition': 'transform 16s cubic-bezier(0,.47,.31,1.03)'
setTimeout(function(){
once = true;
alert('恭喜你抽中了' + wards[n] + '!');
$('#piece_wrap').css({
'transform':'rotate(' + 0 + 'deg)',
'transition': 'none'
}, time)
核心代码就这些,怎么样,是不是很简单呢?
html转盘游戏,使用Javascript和CSS3实现一个转盘小游戏(实战篇)相关推荐
- java代码实现打气球游戏_关于javascript和css3开发打气球小游戏的完整代码
这篇文章主要介绍了关于javascript和css3开发打气球小游戏的完整代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码, ...
- python游戏设计_用Python设计一个经典小游戏
本文主要介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习. 游戏规则: 初始本金是 ...
- linux安装2048游戏,如何在CentOS上安装一个2048小游戏
如何在centos上安装一个2048小游戏 最近在学习CentOS系统,就琢磨着玩点什么,然后我看到有人在玩2048小游戏,所有我就在想,为啥不装一个2048小游戏搞一下嘞,于是乎,我就开始工作啦 由 ...
- python课程设计小游戏大全_用Python设计一个经典小游戏
本文主要介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习. 游戏规则: 初始本金是 ...
- python编的俄罗斯方块游戏下载_用python写一个俄罗斯方块小游戏
相信大家都玩过俄罗斯方块吧,应该是小时候的回忆吧,但是想不想了解一下这个程序是怎么写出来的呢,自己写出来的应该玩起来更有感觉吧! 感觉还是蛮好玩吧! 接下来,我就分享一下这个游戏的源码过程啊! 先用p ...
- 有哪些小游戏的java代码_求一个Java小游戏代码(鼠标点击类小游戏)最好代码里面不要有中文...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 } else{ black_count=0; } if(chess[i][j]==2) { white_count++; if(white_count== ...
- python大作业数独_python做一个数独小游戏
最近看了下python的一些知识,在这里记载一下. 1.首先是安装,在官网下载最新的版本3.6,安装的时候要注意在下面勾选上ADD TO PATH,安装的时候会自动写入到环境变量里面,如果没有勾选,可 ...
- java代码实现打气球游戏_javascript+css3开发打气球小游戏完整代码
效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: {margin:0;padd ...
- Javascript开发的金山打字简易小游戏
记得以前读书的时候,由于课前都预习过了,所以听课一般都是为了给老师面子很"耐心"的坐在教室里,发着呆走着神.突然,那天上课讲了几天前预习的课题,采用JS可以识别键盘输入,嘿嘿,好玩 ...
最新文章
- php多个域名301重定向到主域名代码,Nginx 301和apache重定向域名规则方法(多个域名,单个域名)...
- POJ2342-Anniversary party-树形DP入门
- MAC下载JDK及安装AndroidStudio
- 一起学React--组件定义和组件通讯
- SAP Spartacus module 层级结构设计的一种实践
- C++之文件操作探究(一):写文件——文本文件
- 正则去除包裹的大括号
- Libiconv裁剪
- 孤读Paper——《FCOS: Fully Convolutional One-Stage Object Detection》
- mariadb配置允许远程访问方式
- Proteus 封装 全加器 FA
- 用 .NET Core开发BT下载的Tracker服务器
- display:HDCP协议简述
- Vue3中Compositions API的使用(二)
- Java 开发规范文档
- 校园助手APP--简介及框架
- Web 攻防之业务安全:账号安全案例总结.
- 超级好看又易上手教你用python画樱花
- Zigbee入网流程
- 嵌入式入门学习笔记1:资料收集
热门文章
- ffmpeg4.4 学习笔记 -(2)读取视频文件并用SDL 显示
- 模拟登录淘宝并拍下购物车商品
- 【RDMA】LRH和GRH InfiniBand标头(LRH and GRH InfiniBand Headers)
- exp table oracle,oracle中exp,imp的使用详解
- 电脑屏幕亮度怎么调?四种自由调节亮度方式
- 舞动18周年 搭建企业互联网转型的蹁跹舞台
- kubernetes 部署 rook (ceph集群)
- JDK1.6的ConcurrentHashMap
- 美图秀秀网页版新功能上线 新增磨皮祛痘
- php 采集 过滤,dedecms采集过滤规则 万能采集过滤代码 常用过滤