Как сделать рулетка html

Создаём рулетку с разной вероятностью выпадения призов на PHP

Решил отойти от темы ботов для ВК и сделать небольшой лохотрон (рулетку типа). Принцип работы простой и понятый — после запуска пользователю выпадает один из призов, однако у каждого приза будет свой шанс выпадения. Чем выше шанс — тем вероятнее и чаще он будет попадаться.

Шаг 1: Подготовка и осознание

С чего стоит начать — так это с обдумывания механизма, который будет регулировать вероятности. И, безусловно, вариантов реализации таких штуковин может быть множество, но поскольку в этот раз я не буду делать никаких дополнительных фильтров, шансов, алгоритмов, подборов и т.д. и т.п., то процентную вероятность будем высчитывать для каждого приза в зависимости от его ценности по следующей формуле:

Коэффициент приза — это обратная дробь стоимости приза. При умножении стоимости на коэффициент всегда будет получаться единица.

В качестве призов, а также их стоимости, я буду использовать просто деньги. Для примера сравним шансы выпадения 10.000 рублей, 5.000 рублей и 2.000 рублей:

Коэфф. 10к = 1 / 10000 = 0,0001
Коэфф. 5к = 1 / 5000 = 0,0002
Коэфф. 2к = 1 / 2000 = 0,0005
Шанс выпадения 10к = 0,0001 / (0,0001 + 0,0002 + 0,0005) * 100% = 12,5%
Шанс выпадения 5к = 0,0002 / (0,0001 + 0,0002 + 0,0005) * 100% = 25%
Шанс выпадения 2к = 0,0005 / (0,0001 + 0,0002 + 0,0005) * 100% = 62,5%

Если все эти проценты сложить, то в сумме получится 100% (12,5 + 25 + 62,5).

Сейчас все расчёты я сделал вручную для демонстрации принципа работы скрипта, который в дальнейшем будет всё это делать за нас в автоматическом режиме.

Шаг 2: Написание скрипта

Всего в моём тестовом проекте будет два файла: index.php (главная) и func.php (скрипт):

Пришло время писать код. Открываем файл func.php и создаём массив с призами. Я сделаю 7 элементов с разными суммами:

 '1.000.000 рублей', 'price' => 1000000 ), array ( 'name' => '750.000 рублей', 'price' => 750000 ), array ( 'name' => '600.000 рублей', 'price' => 600000 ), array ( 'name' => '400.000 рублей', 'price' => 400000 ), array ( 'name' => '250.000 рублей', 'price' => 250000 ), array ( 'name' => '150.000 рублей', 'price' => 150000 ), array ( 'name' => '100.000 рублей', 'price' => 100000 ), );

Далее нам понадобятся две функции. Первая будет считать сумму коэффициентов всех призов, а вторая запустит рулетку и вернёт позицию выигранного приза в массиве.

Начинаем писать первую:

function totalChance( array $prizes ) < $result = 0; foreach ( $prizes as $key =>$params ) < $result += ( 1 / $params['price'] ); >return $result; >

На вход функция получает массив всех призов (который мы запихали в константу PRIZES), далее перебирает все призы, суммирует их коэффициенты и возвращает полученное значение.

Переходим к функции №2. Создаём рандомное число от 1 до 100 и записываем его в переменную:

function startLottery( array $prizes ) < $rand = mt_rand( 1, 100 ); // Тут продолжим писать код >

Далее в функцию мы вставим цикл, который будет перебирать всё тот же массив с призами. На каждой итерации будет подсчитываться шанс текущего приза и предыдущего (на первой итерации для «предыдущего шанса» ставим 0). И если рандомное число попадает в промежуток этих двух высчитанных шансов (ранд > пред.шанс И ранд

Конечный облик функции:

function startLottery( array $prizes ) < $rand = mt_rand( 1, 100 ); // Рандомное число $current_chance = $prev_chance = 0; // Вероятность выпадения текущего и предыдущего призов. Пока что приравниваем к нулю. foreach ( PRIZES as $key =>$params ) < $current_coefficient = 1 / $prizes[$key]['price']; // Коэффициент текущего приза $current_chance += $current_coefficient / totalChance( $prizes ) * 100; // Вероятность выпадения текущего приза в процентах if ( $key != 0 ) // Проверяем, на какой итерации находится цикл по индексу массива (0 - первый индекс) < $prev_coefficient = 1 / $prizes[$key - 1]['price']; // Коэффициент предыдущего приза $prev_chance += $prev_coefficient / totalChance( $prizes ) * 100; // Вероятность выпадения предыдущего приза в процентах >if ( $rand > $prev_chance and $rand return -1; >

Шаг 3: Тесты

Для тестов рулетки добавил цикл в код, который 1000 раз вызовет вышенаписанную функцию, а также посчитает количество выпадений для каждого приза:

$a = 0; $b = 0; $c = 0; $d = 0; $e = 0; $f = 0; $g = 0; for ( $i = 0; $i < 1000; $i++ ) < $x = startLottery( PRIZES ); echo PRIZES[$x]['name'] . '
'; switch ( PRIZES[$x]['price'] ) < case 1000000: < $a++; break; >case 750000: < $b++; break; >case 600000: < $c++; break; >case 400000: < $d++; break; >case 250000: < $e++; break; >case 150000: < $f++; break; >case 100000: < $g++; break; >> > echo '
'; echo $a . ' (' . 1 / PRIZES[0]['price'] / totalChance( PRIZES ) * 100 . '%)' . '
'; echo $b . ' (' . 1 / PRIZES[1]['price'] / totalChance( PRIZES ) * 100 . '%)' . '
'; echo $c . ' (' . 1 / PRIZES[2]['price'] / totalChance( PRIZES ) * 100 . '%)' . '
'; echo $d . ' (' . 1 / PRIZES[3]['price'] / totalChance( PRIZES ) * 100 . '%)' . '
'; echo $e . ' (' . 1 / PRIZES[4]['price'] / totalChance( PRIZES ) * 100 . '%)' . '
'; echo $f . ' (' . 1 / PRIZES[5]['price'] / totalChance( PRIZES ) * 100 . '%)' . '
'; echo $g . ' (' . 1 / PRIZES[6]['price'] / totalChance( PRIZES ) * 100 . '%)' . '
';

В итоге получаем вот такую картину:

Читать:

Как перевернуть экран на компьютере windows

Как можно заметить — количество выпадений очень близко к процентной вероятности (та, что в скобках), а значит больше ничего дорабатывать не придётся.

Код для тестов теперь можно убирать, дабы он не мешал.

Шаг 4: Оформление

Переходим в файл index.php, в котором делаем простую форму с кнопкой. После каждого нажатия будет отправляться ajax-запрос и инициироваться новый запуск рулетки:

       Рулетка .game .prize #text form button

В func.php добавляем обработку формы:

if ( $_POST['type'] == 'lot' ) < $i = startLottery( PRIZES ); // Запуск рулетки, получение индекса приза в массиве $result = array ( 'success' =>'success', 'prize' => PRIZES[$i]['name'] // Название массива, которое будет выведено пользователю ); echo json_encode( $result, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES ); // Конвертируем массив $result в JSON и распечатываем >

Теперь можно потыкать, поиграться, посмотреть как все замечательно работает 🙂

На этом все работы можно считать завершёнными. Архив с исходниками, как всегда, прикрепляю:

5id15
03.07.2022
5 930
0
1

Создание html5 рулетки для сайта (розыгрыш призов)

Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Необходимо реализовать розыгрыш призов на сайте, приуроченный 10 летию компании.

Возможен вариант рулетки.

или адоптировать под друпал или PHP

вот такая логика

«При нажатии кнопки клиентская часть (jQuery) отправляет AJAX-запрос к серверной (PHP), передавая введенное число, и тут же запускает анимацию вращения, PHP выполняет генерацию случайного числа, сравнивает и возвращает результат в ответе, jQuery принимает ответ и останавливает барабан на этом числе, все операции требующие доверия, например запись в БД, делаются в PHP перед возвратом, сама анимация реализуется на JavaScript (jQuery) используя canvas (HTML5) и CSS3, но лучше вместо jQuery реализовать все на Flash, а идеально 2 варианта.»

Как сделать игровой сайт рулетка?

Я всему обучился, и теперь хочу создать свой игровой сайт рулетка с денежными кейсами или что то в этом роде..Подскажите пожалуйста где можно этому обучиться?

codeigniter

javascript

3 ответов

Проще найти готовые скрипты рулеток их в интернете много.

Этим методом пользуются миллионы, и к тому же если бы таким путем можно было заработать, то тогда щас все миллионеры были б. А мне хочется создать что своё

А мне хочется создать что то своё — новое, и то что могло бы приносить мне деньги

Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

Отзывы
Политика конфидециальности
Условия использования
Блог
Цена и оплата
Курсы и скринкасты
Сертификаты
Партнерская программа
Комьюнити

Наши курсы и скринкасты

HTML/CSS Advanced
Bootstrap 4
Vue JS
Linux, GIT and web-hosting
HTML and CSS
Modern Javascript
Javascript/jQuery
Codeigniter
Все курсы и скринкасты

Рулетка на js html

Есть рулетка, как сделать так, чтобы оно корректно останавливалось? Все перепробовал что знаю, не получилось.

 .roulette-inner img < width:72px; height:72px; margin:2px; >.roulette-inner img.active    Config:

Создаём рулетку с разной вероятностью выпадения призов на PHP

Создание html5 рулетки для сайта (розыгрыш призов)

Как сделать игровой сайт рулетка?

3 ответов

Рулетка на js html

Config:

Похожие записи