转盘游戏简单原理设计

html页面（包含js）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body><div class="page"><div class="content"></div><button>抽奖</button></div>
</body>
<script>var page=document.getElementsByClassName('page')[0];var content=document.getElementsByClassName('content')[0];var button=document.getElementsByTagName('button')[0];var currentdeg=0;  //初始化角度var willdeg=360+Math.random()*10*30;  //最终定格的角度button.onclick=function(){   //点击事件content.style.transform="rotate("+willdeg+"deg)";var enddeg=content.style.transform.slice(7);  //这里enddeg获取的旋转角度其实就是willdeg，使用slice是练习获取未知的旋转角度enddeg=parseFloat(enddeg);setTimeout(function(){   //旋转完成后跳出奖励if(enddeg%360>0&&enddeg%360<=60){alert('一等奖');  //点击确定后才会执行下面的函数，即重新加载window.location.reload();   //这里可以不用reload（），将.conten的rotate设置为0即可}if(enddeg%360>60&&enddeg%360<=120){alert('二等奖');window.location.reload();}if(enddeg%360>120&&enddeg%360<=180){alert('三等奖');window.location.reload();}if(enddeg%360>180&&enddeg%360<=240){alert('四等奖');window.location.reload();}if(enddeg%360>240&&enddeg%360<=300){alert('五等奖');window.location.reload();}if(enddeg%360>300&&enddeg%360<=360){alert('六等奖');window.location.reload();}},5000);}
</script>
</html>

css页面：

.page{width: 200px;height: 200px;border-radius: 50%;background: yellow;display: flex;justify-content: center;align-items: center;position: relative;
}
.content{width: 100px;height: 100px;background: red;transition:all 5s ease-out;
}
button{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);z-index: 99;
}

效果图如下，点击抽奖按钮正方形将会旋转，可以将.content的内容换成想要的样式即可（如使用多个三角形，旋转不同角度达到绕满一圈的视觉效果，或者使用背景图片）。

转盘游戏简单原理设计相关推荐

角色扮演游戏引擎的设计原理--转自MOVE2008
角色扮演游戏引擎的设计原理--转自MOVE2008 角色扮演游戏引擎的设计原理角色扮演游戏(RPG)是深受广大游戏迷们喜爱的一种游戏, 它以独特的互动性和故事性吸引了无数的玩家.它向人们提供了超出现 ...
角色扮演游戏引擎的设计原理
角色扮演游戏引擎的设计原理角色扮演游戏(RPG)是深受广大游戏迷们喜爱的一种游戏, 它以独特的互动性和故事性吸引了无数的玩家.它向人们提供了超出现实生活的广阔的虚拟世界,使人们能够尝试扮演不同的角色 ...
RPG游戏引擎的设计原理
角色扮演游戏(RPG)是深受广大游戏迷们喜爱的一种游戏, 它以独特的互动性和故事性吸引了无数的玩家.它向人们提供了超出现实生活的广阔的虚拟世界,使人们能够尝试扮演不同的角色,去经历和体验各种不同的人生 ...
PWM模块原理及简单的设计思路
PWM模块原理及简单的设计思路 1. 什么是PWM信号 PWM可以算是数字电路中的"独臂"神通,"独臂" - 只需一根线:"神通" - 在很 ...
一个猜拳游戏的算法设计
为什么80%的码农都做不了架构师?>>> 一个猜拳游戏的算法设计我一直都不太喜欢赌博,除了现实中我打赌从没赢过和对电子游戏设备的不信任外,自从在赌场见过老虎机已经变得如此复杂 ...
html转盘游戏,使用Javascript和CSS3实现一个转盘小游戏(实战篇)
作者:徐小夕来源:趣谈前端本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏,由于该实现可以有不同方式,如果熟悉canvas的话也可以用canvas ...
《游戏脚本的设计与开发》-(RPG部分)3.8 通过脚本来自由控制游戏(一)
注意:本系列教程为长篇连载无底洞,半路杀进来的朋友,如果看不懂的话,请从第一章开始看起,文章目录请点击下面链接. http://blog.csdn.net/lufy_legend/article/de ...
Java-小游戏-炸弹人-课程设计-搜索算法
项目链接:Java小游戏-炸弹人-课程设计-论文-AI-其他文档类资源-CSDN下载Java小游戏-炸弹人-课程设计-论文-AI-其他文档类资源-CSDN下载项目描述:https://blog.csd ...
《游戏脚本的设计与开发》-(RPG部分)3.1 RPG地图到底怎么做？
http://blog.csdn.net/lufy_legend/article/details/17417085 话说好久没有更新博客了,其实这段时间主要是工作忙,没时间.那又是什么刺激了我呢,为什 ...

转盘游戏简单原理设计

转盘游戏简单原理设计相关推荐

最新文章

热门文章