如何解决转轮结果已被控制
我正在使用此代码创建一个纺车。但我想控制结果。例如,10000 美元的奖金我希望它的百分比较低。所以,不是任何人都能得到五百分之一的人。我不知道如何为他们设置百分比。如果有人可以提供帮助,我将不胜感激。先感谢您。 如果您能给我任何提示以帮助我继续并知道下一步该怎么做。
这是我用过的代码
我更新了整个代码以添加随机概率。此外,我添加了更多奖品。现在我的设计和概率本身有问题。此外,代码很长。 我希望你能帮助我解决概率和设计问题
//set default degree (360*5)
// I TRIED FOR 12 PRIZES TO MULTIPLY 360*11 BUT nothing CHANGES
var degree = 1800;
//number of clicks = 0
var clicks = 0;
$(document).ready(function(){
/*WHEEL SPIN FUNCTION*/
$('#spin').click(function(){
//add 1 every click
clicks ++;
/*multiply the degree by number of clicks
generate random number between 1 - 360,then add to the new degree*/
var newDegree = degree*clicks;
var exTradegree = Math.floor(Math.random() * (360 -1+1 )+1);
if(exTradegree =0.05)
{
var newexTradegree=Math.floor(Math.random() * (30 -1+1 )+1);
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,in a 30 angle degree.
So,if the offset reaches 23.7,then we kNow
that it has a 30 degree angle and therefore,exactly aligned with the spin btn*/
if(aoY < 11.94){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
},100);
}
},10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if(exTradegree =0.05)
{
var newexTradegree=Math.floor(Math.random() * (60 -30+1 )+30);
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =0.10)
{
var newexTradegree=Math.floor(Math.random() * (90 -60+1 )+60);
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =5)
{
var newexTradegree=Math.floor(Math.random() * (120 -90+1 )+90)
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =5)
{
var newexTradegree=Math.floor(Math.random() * (150 -120+1 )+120);
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =5)
{
var newexTradegree=Math.floor(Math.random() * (180 -150+1 )+150)
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =5)
{
var newexTradegree=Math.floor(Math.random() * (210 -180+1 )+180)
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =13)
{
var newexTradegree=Math.floor(Math.random() * (240 -210+1 )+210)
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =16)
{
var newexTradegree=Math.floor(Math.random() * (270 -240+1 )+240)
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =16)
{
var newexTradegree=Math.floor(Math.random() * (300 -270+1 )+270);
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =16.8)
{
var newexTradegree=Math.floor(Math.random() * (330 -300+1 )+300)
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
else if (exTradegree =18)
{
var newexTradegree=Math.floor(Math.random() * (360 -330+1 )+330)
totalDegree = newDegree+newexTradegree;
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get,10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
}
/*let's make the spin btn to tilt every
time the edge of the section hits
the indicator*/
});
});//DOCUMENT READY
#awardPanel {
padding:10px;
color:green;
text-align:center;
}
*{ margin:0; padding:0; }
body{
background:#eaeaea;
color:#fff;
font-size:18px;
font-family: 'Exo 2',sans-serif;
}
a{
color:#34495e;
}
/*WRAPPER*/
#wrapper{
margin: 40px auto 0;
width:266px;
position:relative;
}
#txt{
color:#eaeaea;
}
/*WHEEL*/
#wheel{
width:250px;
height:250px;
border-radius:50%;
position:relative;
overflow:hidden;
border:8px solid #fff;
Box-shadow:rgba(0,0.2) 0px 0px 10px,rgba(0,0.05) 0px 3px 0px;
transform: rotate(0deg);
}
#wheel:before{
content:'';
position:absolute;
border:4px solid rgba(0,0.1);
width:242px;
height:242px;
border-radius:50%;
z-index:1000;
}
#inner-wheel{
width:100%;
height:100%;
-webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
-moz-transition: all 6 cubic-bezier(0,.99);
-o-transition: all 6s cubic-bezier(0,.99);
-ms-transition: all 6s cubic-bezier(0,.99);
transition: all 6s cubic-bezier(0,.99);
}
#wheel div.sec{
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 130px 75px 0;
border-color: #19c transparent;
transform-origin: 75px 129px;
left:50px;
top:-4px;
opacity:1;
}
#wheel div.sec:nth-child(1){
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(2){
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(3){
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(4){
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(5){
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-o-transform: rotate(150deg);
-ms-transform: rotate(150deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(6){
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(7){
transform: rotate(210deg);
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-o-transform: rotate(210deg);
-ms-transform: rotate(210deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(8){
transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-o-transform: rotate(240deg);
-ms-transform: rotate(240deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(9){
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(10){
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
-ms-transform: rotate(300deg);
border-color: white transparent;
}
#wheel div.sec:nth-child(11){
transform: rotate(330deg);
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
-ms-transform: rotate(330deg);
border-color: blue transparent;
}
#wheel div.sec:nth-child(12){
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
border-color: white transparent;
}
#wheel div.sec .fa{
margin-top: -100px;
color: rgba(0,0.2);
position: relative;
z-index: 10000000;
display: block;
text-align: center;
font-size:16px;
margin-left:-15px;
text-shadow: rgba(255,255,0.1) 0px -1px 0px,0.2) 0px 1px 0px;
}
#spin{
width:68px;
height:68px;
position:absolute;
top:50%;
left:50%;
margin:-34px 0 0 -34px;
border-radius:50%;
Box-shadow:rgba(0,0.1) 0px 3px 0px;
z-index:1000;
background:#fff;
cursor:pointer;
font-family: 'Exo 2',sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#spin:after{
content:"SPIN";
text-align:center;
line-height:68px;
color:#CCC;
text-shadow: 0 2px 0 #fff,0 -2px 0 rgba(0,0.3) ;
position: relative;
z-index: 100000;
width:68px;
height:68px;
display:block;
}
#spin:before{
content:"";
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 28px 20px;
border-color: transparent transparent #ffffff transparent;
top:-12px;
left:14px;
}
#inner-spin{
width:54px;
height:54px;
position:absolute;
top:50%;
left:50%;
margin:-27px 0 0 -27px;
border-radius:50%;
background:red;
z-index:999;
Box-shadow:rgba(255,1) 0px -2px 0px inset,rgba(255,1) 0px 2px 0px inset,0.4) 0px 0px 5px ;
background: rgb(255,255); /* Old browsers */
background: -moz-radial-gradient(center,ellipse cover,1) 0%,rgba(234,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial,center center,0px,100%,color-stop(0%,1)),color-stop(100%,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#spin:active #inner-spin{
Box-shadow:rgba(0,0.4) 0px 0px 5px inset;
}
#spin:active:after{
font-size:15px;
}
#shine{
width:250px;
height:250px;
position:absolute;
top:0;
left:0;
background: -moz-radial-gradient(center,0.99) 1%,0.91) 9%,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial,color-stop(1%,0.99)),color-stop(9%,0.91)),0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
opacity:0.1;
}
/*ANIMATION*/
@-webkit-keyframes hh {
0%,100%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
@keyframes hh {
0%,100%{
transform: rotate(7deg);
-webkit-transform: rotate(0deg);
}
50%{
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
}
.spin {
-webkit-animation: hh 0.1s; /* Chrome,Safari,Opera */
animation: hh 0.1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div id="wrapper">
<div id="wheel">
<div id="inner-wheel">
<div class="sec"><span class="fa" style="font-size: 16px;">$10000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$8000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$6000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$4000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$2000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$1000</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$500</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">$300</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$100</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;" >$50</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">10% off</span></div>
<div class="sec"><span class="fa" style="font-size: 16px;">free spin</span></div>
</div>
<div id="spin">
<div id="inner-spin"></div>
<div id="shine"></div>
</div>
<div id="txt"></div>
</div>
</div>
</div>
现在让我们说例如我想获得一个介于 1 到 360 和 Math.floor(Math.random() * (360 -1+1 )+1)
之间的随机数
现在我想创建一个 100 的概率
如果数字在 1 到 30 之间,则概率为 0.05,
如果数字在 30 到 60 之间,则概率为 0.05,
如果数字在 60 到 90 之间,则概率为 0.10,
如果数字在 90 到 120 之间,则概率为 5,
如果数字在 120 到 150 之间,则概率为 5,
如果数字在 150 到 180 之间,则概率为 5,
如果数字在 180 到 210 之间,则概率为 5,
如果数字在 210 和 240 之间,则概率为 13,
如果数字在 240 到 270 之间,则概率为 16,
如果数字在 270 到 300 之间,则概率为 16,
如果数字在 300 到 330 之间,则概率为 16.8,
如果数字在 330 和 360 之间,则概率为 18,
(0.05+0.05+0.10+5+5+5+5+13+16+16+16.8+18=100)
我怎样才能做到这一点
解决方法
由于您的第二个版本的代码在我可以提供的时间内进行编辑的时间很长,因此我写了一个简短的示例来说明如何定义您的价目表并选择获胜价格。
此示例使用具有概率的可能价格列表并创建它们的加权列表。从这个列表中随机选择一个项目来确定获胜的价格。
然后计算转动车轮的角度以到达所选价格中的随机位置(从0°开始)
// Define the prices and probabilities
const prices = [
{value: "Nothing",probability: 0.5},{value: "Free Spin",probability: 0.2},{value: "10$",probability: 0.15},{value: "50$",probability: 0.1},{value: "100$",probability: 0.04},{value: "1000$",probability: 0.01},];
// The angle one the wheel one area uses (uniform sizes)
var priceAngle = 360 / prices.length;
var result = prices[0];
// Generate a list of the indices based on the probabilities
var weightedList = [];
for (let i=0; i < prices.length; i++)
{
for (let j=0; j < prices[i].probability*100; j++)
{
weightedList.push(i);
}
}
// Get a random index from the weightedList and use it to get the price
var winningPriceIndex = weightedList[Math.floor(Math.random() * weightedList.length)];
result = prices[winningPriceIndex];
// Full spins the wheel shoud turn (min. 1,max. 5)
var fullSpins = Math.floor(Math.random() * 4)+1;
// Offset from 0° to the start of the price
var offsetToPrice = winningPriceIndex * priceAngle;
// Random offset from the start of the price
var additionalOffset = Math.floor(Math.random() * priceAngle);
console.log("The wheel turns " + (fullSpins * 360 + offsetToPrice + additionalOffset)
+ "° (" + fullSpins + " full spin + " + offsetToPrice + "° + " + additionalOffset + "°)");
console.log('You won: ' + result.value);
这可能不是性能最佳的解决方案,但它应该能让您了解如何解决您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。