БЛОГ НА HUSL


Как задать вероятность для колеса фортуны в тильде?

Автор вопроса: Екатерина Злобина

Есть код на тильде для колеса фортуны и условие вероятности. Но я думаю, что оно не работает корректно, так как выпадают часто позиции с низкой вероятностью. Подскажите, как можно поправить?

<style>
/*Общий Контейнер*/
.wheel_wrp {
    width: inherit;
    box-sizing: border-box;
    box-shadow: 0 0 0 10px #8D1A14, 0 0 15px 3px #ababab;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
/*Ось колеса в центре*/
.wheel_wrp:after {
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #8D1A14;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/*Оформление сектора*/
.wheel_sector{
    width: 0px;
    height: 0px;
    border-style: solid;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Оформление разделительных линий*/
.wheel_line {
    background-color: #8D1A14; /*Цвет линии*/
    transform: rotate(0deg);
    height: 4px;
    position: absolute;
    z-index: 99;
}
/*Оформление текста*/
.wheel_textcont {
    position: absolute;
    top: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 300;
    color: #000;
    font-size: 12px;
    line-height: 1.05;
    text-align: center;
}
.wheel_textcont div {
    transform: rotate(-90deg);
    margin-top: 35px;
    width: 120px;
}
/*Иконка*/
.wheel_textcont img {
    width: 60px;
    transform: rotate(-90deg);
    margin-top: 10px;
}
/*Адаптив текст + иконка*/
@media screen and (max-width:640px){
.wheel_textcont {
    position: absolute;
    top: 10;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 300;
    color: #000;
    font-size: 8px;
    line-height: 1.1;
    text-align: center;
}
.wheel_textcont img {
    width: 35px;
    margin-top: 25px;
}
}
@media screen and (max-width:480px){
.wheel_textcont {
    position: absolute;
    top: 200 px;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: right;
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 300;
    color: #000;
    font-size: 6px;
    line-height: 1.1;
    text-align: center;
}
.wheel_textcont div {
    transform: rotate(-90deg);
    margin-top: 25px;
    width: 120px;
}
.wheel_textcont img {
    width: 30px;
    margin-top: 3px;
}
}
.spin_wheel , .open-wheel , .close-wheel{ cursor:pointer}
.spin_wheel {  transition: all 0.2s linear}
.spin_wheel:hover {filter: sepia(1)}
.form_noactive{
    opacity:0.4;
    pointer-events:none;
}
.wheel_form .t-input-subtitle,
.wheel_form input.t-input{
    text-align: center;
}
/*Показать блок*/
.wheel-pos{
    position:fixed;
    width:100%;
    top:0;
    z-index:999;
}
.wheel-time{transition: transform 0.5s ease-in-out}
.slide-wheel{transform: translateX(-100%)}
.wheel-open-body{overflow:hidden}
</style>

<script>
$( document ).ready(function() {
    
//Список секторов : Цвет - Текст - ссылка на иконку    
let wheelOption = [
    ['#ffffff' , 'Скидка<br><strong>Ozon 20%</strong>','https://static.tildacdn.com/tild3531-3836-4463-b033-396465366538/IMG_3371.PNG'],
    ['#efeddf' , 'Скидка<br><strong>Ozon 30%</strong>','https://static.tildacdn.com/tild3531-3836-4463-b033-396465366538/IMG_3371.PNG'],
    ['#ffffff' , '<strong>Mini Tote<strong><br><strong>черный</strong><br><strong>(limited edition)</strong>','https://static.tildacdn.com/tild3031-3061-4933-a362-356462643066/IMG_3366_1.png'],
    ['#efeddf' , '<strong>Mini Tote<strong><br><strong>шоколадный</strong><br><strong>(limited edition)</strong>','https://static.tildacdn.com/tild6561-6262-4831-a438-323038363966/IMG_3355_1.png'],

    ['#efeddf' , '<strong>Dijel винная<strong><br><strong>(limited edition)</strong>','https://static.tildacdn.com/tild3964-6633-4662-a139-666230316537/IMG_3357_1.png'],
    
     ['#ffffff' , '<strong>Dijel shine<strong><br><strong>(limited edition)</strong>','https://static.tildacdn.com/tild3965-3462-4366-a138-623565613862/IMG_3356_1.png'],
     ['#ffffff' , 'Скидка<br><strong>Ozon 40%</strong>','https://static.tildacdn.com/tild3531-3836-4463-b033-396465366538/IMG_3371.PNG'],
     ['#efeddf' , '<strong>Любая сумка<strong><br><strong>из ассортимента</strong><br><strong>на выбор</strong>','https://static.tildacdn.com/tild6261-3361-4862-a231-333465333031/IMG_3372_1.png'],
     ['#ffffff' , '<strong>Tote + mini Tote <strong><br><strong>шоколадный</strong>','https://static.tildacdn.com/tild3961-6237-4533-b636-376538336333/IMG_3369_1.png'],
    ['#efeddf' , '<strong>Tote + mini Tote<strong><br><strong>черный</strong>','https://static.tildacdn.com/tild6130-6463-4438-b334-663862613932/IMG_3370_1.png'],
    ['#ffffff' , '<strong>Special gift box<strong><br><strong>(limited edition)</strong>','https://static.tildacdn.com/tild3336-3963-4135-b462-636332383835/IMG_3358_1.png'],
     ['#8D1A14' , '<strong>СУПЕР ПРИЗ<strong><br><strong>ТРЕХЭТАЖНЫЙ</strong><br><strong>БОКС</strong>','https://static.tildacdn.com/tild3263-3232-4830-b335-363966643962/IMG_3374_1.png'],
    
];

let prob = true; // true - включить смещение вероятности ; false - отключить

let probability = [30, 20, 8, 8, 8, 8, 4,4,3,0,0,0]

    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    }, 1000);
let probabilityFinal = [];
let probMem = 0;
$.each(probability,function(index,value){
    probMem +=value; 
    probabilityFinal.push(probMem);
});

setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    }, 1000);

//Создаём элемент в Zero
let sector = wheelOption.length;
$('.wheelfortune').append('<div class="wheel_wrp"></div>');
$('.wheelfortune').html($('.wheel_wrp'));
let wheelRec = $('.wheelfortune').closest('.t-rec');
wheelRec.addClass('wheel-pos slide-wheel');
$('.close-wheel').fadeOut(200);
//Кол-во оборотов до остановки
let maxRevolution = 20;
//Время вращения
let spinTime = 5;
let spinFinish = false;
let resizeTxt;
let diameter;

//Создание колеса
function creatingWheel(){
//Диаметр колеса
diameter = $('.wheel_wrp').width();
//Угол сектора
let angle = Number(((360*Math.PI)/(sector*180)).toFixed(3));
//Катет сектора
let sectorHalfWidth = 0.5*diameter*Math.tan(angle/2);
//Заполняем сектора
for (let i=0; i<sector; i++){
$('.wheel_wrp').append('<div class="wheel_sector bg-sector'+i+'"></div><div class="wheel_line line-sector'+i+'"></div><div class="wheel_textcont text-sector'+i+'"><div></div><img src='+wheelOption[i][2]+'></div>');
//Формируем угол поворота и задаём цвет
$('.bg-sector'+i+'').css({
    "transform":"rotate("+(360*i/sector+90)+"deg)",
    "border-color": ""+wheelOption[i][0]+" transparent"
});
//Отрисовка границ сектора
$('.line-sector'+i+'').css({
    "width" : diameter/2+"px",
    "transform" : "rotate("+((360*i/sector)+(180*(sector-1))/sector)+"deg)",
    "height":"4px",
    "top" : "calc(50% - 2px)",
    "transform-origin" : diameter/2+"px 2px"
});
//Расставляем текст
$('.text-sector'+i+' div').html(wheelOption[i][1]);
// Формируем угол для текста
$('.text-sector'+i+'').css({"transform":"rotate("+(360*i/sector+90)+"deg)"});
};
//Форма сектора
$('.wheel_sector').css({
    "border-width": (diameter/2)+"px "+sectorHalfWidth+"px 0",
    "transform-origin": ""+sectorHalfWidth+"px "+(diameter/2)+"px",
    "left":((diameter/2)-sectorHalfWidth)+"px"
});
//Форма текста
$('.wheel_textcont').css({
    "width": (diameter/2)+"px",
    "height": (diameter/2)+"px",
    "transform-origin": ""+(diameter/4)+"px "+(diameter/2)+"px",
    "left":((diameter/2)-(diameter/4))+"px",
});
}; creatingWheel();

//Вращение колеса
function spinWheel(deg){
    $('.wheel_wrp').css({
       "height": diameter+"px",
       "transform" : "rotate("+deg+"deg)",
       "transition": "transform "+spinTime+"s cubic-bezier(0, 0.76, 0.5, 1.01)"
    });
};spinWheel(0);
//Случайный сектор    
function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
let finalSector = -1;
//При нажатии на кнопку вращения
$('.spin_wheel .tn-atom').click(function(e) {
    //Получаем финальный сектор 
    finalSector = getRandomInRange(0, sector-1);
    //Поворачиваем колесо
    spinWheel(maxRevolution*360 +  (finalSector*360)/sector );
    if (finalSector==0) finalSector=sector;
    //Выводим текст и картинку
    setTimeout(function(){
    let prizTxt = wheelOption[sector-finalSector][1];
    let prizeImg = wheelOption[sector-finalSector][2];
    spinFinish = true;
    finalStep('Ваш приз:<br>'+prizTxt, prizeImg);
    //Сохраняем результат
    let finalResult  = {
        text: prizTxt , 
        img: prizeImg ,
        sect:finalSector
    };
    localStorage.setItem('_code_w', JSON.stringify(finalResult));
    }, spinTime*1000);
});
  
//Проверка прошлого вращения
let prevResult = localStorage.getItem('_code_w');let prevList;
let prevSend = localStorage['_wh_send'];
if (prevResult) {
    prevList = JSON.parse(prevResult);
    spinFinish = true;
    $('.wheel_form button').attr('type','submit');
    let preffTxt = '<u>Ваш прошлый приз</u><br>';
    if(prevSend){
        preffTxt = '<u>Заявка уже была отправлена</u><br>';
        blockForm();
        spinFinish = false;
    };
    finalStep(preffTxt+prevList.text, prevList.img);
    spinWheel( (prevList.sect*360)/sector );
};

//Блокируем форму
function blockForm(){
if(!prevResult || prevSend ){
$('.wheel_form').addClass('form_noactive');
setTimeout(function(){$('.wheel_form button').attr('type','button')}, 3500);
};
};blockForm();

//Отправка формы
$('.wheel_form').delegate(".t-submit", "click", function(){
    setTimeout(function(){
        if ( $('.wheel_form .t-form').hasClass("js-send-form-success")){
            localStorage['_wh_send'] = 'sf';closeWheel();blockForm();
        };
    }, 1000);
});

//Отрисовка финального шага
function finalStep(prizTxt, prizeImg){
    //Удаляем кнопку
    $('.spin_wheel').remove();    
    $('.present_text .tn-atom').html(prizTxt);
    $('.present_img img').attr({
        'data-original':prizeImg,
        'src':prizeImg
    });
    //Открываем форму
   if(spinFinish){ 
    $('.wheel_form').removeClass('form_noactive');
    $('.wheel_form button').attr('type','submit');
   };
    //Заполняем поле
    setTimeout(function(){
        resizeTxt = prizTxt.replace(/<\/?[^>]+>/g,' ');
        $('input[name="sector_prize"]').val(resizeTxt);
    }, 2500);
};
//Изменение размера окна
$( window ).resize(function() {
clearTimeout(window.resizedFinished); 
window.resizedFinished = setTimeout(function(){
    
    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    }, 1000);
    
    $('.wheel_wrp').empty();creatingWheel();
    if(finalSector>=0) { spinWheel( (finalSector*360)/sector )
    }else if (prevResult) {
        spinWheel( (prevList.sect*360)/sector );
    }else{spinWheel();};
    setTimeout(function(){    
        if(!spinFinish){  $('.wheel_form button').attr('type','button');
        }else{ $('input[name="sector_prize"]').val(resizeTxt) };
    }, 3500);    
}, 500);
});  

//Показать блок
let firstOpen = true;
$('.open-wheel').click(function(){
    $('body').addClass('wheel-open-body');
    wheelRec.addClass('wheel-time').removeClass('slide-wheel');
    if(firstOpen && !prevResult ) {spinWheel(360); firstOpen = false};
    setTimeout(function(){
       $('.close-wheel').fadeIn(200);
       //t_lazyload_update();
    }, 550);
});

//Скрыть блок
function closeWheel(){ $('body').removeClass('wheel-open-body');$('.close-wheel').fadeOut(0); wheelRec.addClass('slide-wheel');};
$('.close-wheel').click(function(){closeWheel();});
$(document).keydown(function(eventObject){
    if(eventObject.which == 27 && !wheelRec.hasClass('slide-wheel')){closeWheel()};
});
});
</script>

Источник

Ответы (1 шт):

Автор решения: LolPopGames

Извините, Я не умею на тильде, Покажу на c.

Скорее всего есть более нормальные способы, но суть моего заключается в том, чтобы делать диапозоны чисел для одного варианта

Покажу на примере:

// библиотеки
#include <stdio.h>
#include <stdlib.h>
#include <time.h>

int main()
{
    // чтобы был "настоящий" рандом
    srand(time(0));
    
    int a = rand() % 100 + 1;
    //             ^^^^^^^^^ диапозон 1-100
    
    // диапозон 1-20
    if ((a > 0) && (a <=20))
    {
        printf("Вариант 1\n");
    }
    
    // диапозон 21-50
    else if ((a > 20) && (a <= 50))
    {
        printf("Вариант 2\n");
    }
    
    // диапозон 51-100
    else
    {
        printf("Вариант 3\n");
    }
    
    return 0;
}

Получается что у каждого из вариантов:

  1. 20%
  2. 30%
  3. 50%

Надеюсь помог

→ Ссылка

licensed under cc by-sa 3.0 with attribution.