31.10.2015, 18:13
|
Интересующийся
|
|
Регистрация: 31.10.2015
Сообщений: 14
|
|
крутилка/барабан/лототрон/лотерея/рулетка
Здраствуйте
делаю сайт - чтото на подобии выбора рандомного победителя как Вконтакте(ставок нет, только рандом - пользеватель нажимает участвовать, добавляется в список, по истечению времени выбирается победитель)
задача: пока понять как оно все сделано и "на чем"(а именно сам "барабан" и таймер отсчета - как я понял он серверный) - но если будут примеры то хорошо и сделать "визуализацию" победы
яркий пример - видео(у меня чтото похожее но без шанса/без ставок и тд)
так rак тема сходная мне рекомендовали разобратся в скриптах рулеток пример но пока не понял каким образом там ведется отсчет и выбирается виннер, что используется конкретно
сейчас много сайтов типа http://csgolucky.ru/ ,где ставят предметы, получают шанс на победу
интерисует подробная их работа(что используют, какие скрипты php, может js...), кто знает подскажите, ведь тема похожая
пытался поработать с этим скриптом и еще со сходным, написанным на swiper.js
спасибо за помощ
|
|
31.10.2015, 18:38
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
228, победитель уже заранее известен на сервере, а в JS - фейк.
Т.е., допустим у нас есть 10 игроков, а победил 5-й игрок. Нам генерируется 10 аватарок, нужно плавно прокрутить до 5-й аватарки с эффектом замедления.
scroll = avatarWidth * 5 + containerWidth / 2 - avatarWidth / 2
Вот и всё. Правда, это всё можно немного по другому сделать. Например, предусмотреть в JS повторения аватарок и т.д.
Тут ничего сложного нет, сплошные формулы.
|
|
31.10.2015, 18:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
|
|
31.10.2015, 19:02
|
Интересующийся
|
|
Регистрация: 31.10.2015
Сообщений: 14
|
|
Ruslan_xDD, я так впринципе и задумывал рандомно выбирается а скрипт просто визуализирует
рони,спасибо прикольные примеры
еще задача в том чтобы брались из масива или бд аватарки(числа) в примерах div'ы
|
|
31.10.2015, 19:55
|
Интересующийся
|
|
Регистрация: 31.10.2015
Сообщений: 14
|
|
мне бы http://jsfiddle.net/orbhxjs3/ переделать чтобы с масива числа бралисьRL] переделать чтобы числа брались с масива
|
|
31.10.2015, 20:16
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
Сообщение от 228
|
еще задача в том чтобы брались из масива или бд аватарки(числа) в примерах div'ы
|
Так создаёшь процедуру в SQL:
CREATE DEFINER = 'root'@'localhost'
PROCEDURE 'myDataBase'.getAvatars()
BEGIN
SELECT * FROM `avatars`;
END
Вызываешь запрос в PHP (лучше через PDO):
$query = $connect->query('call `getAvatars`()');
while($result = $query->fetch()) {
$avatars[] = $result;
}
echo '<pre>';
print_r($avatars);
echo '</pre>';
|
|
31.10.2015, 20:28
|
Интересующийся
|
|
Регистрация: 31.10.2015
Сообщений: 14
|
|
Ruslan_xDD,
наверно не так я написал
у меня уже есть перменная с выграшным номером, заноше ее в даном скрипте в переменную nn
var oneHeight=80, // размер одного элемента
numImage=10, // количество элементов
speedStep=0.2; // скорость изменения скорости
function LetsGo(){
clearInterval(LetsGo.interval);
var x=[];
for(var i in{xxx1:1}){
var ob=5+Math.floor(Math.random()*6), // количество оборотов 5 минимум, 10 - максимум
nn=4;//выграшный номер, 5
num=Math.floor(nn), // выигравший нумер
o={
ob:ob,num:num,
a:document.getElementById(i), // это наш контрол с классом XXX
// время=(speedStart)/speedStep
// расстояние=(speedStart/2)*время -арифм прогр
// расстояние=speedStart^2/(2*speedStep)
// speedStart=sqrt(расстояние*2*speedStep)
speed:Math.sqrt(((ob*numImage+num)* oneHeight)* speedStep*2), // скорость
scr:-26 // магия, блин
}; // выигравший номер
x.push(o);
}
LetsGo.interval=setInterval(
function (){
var i = x.length,complete=true;
while(i--){
var a=x[i];
a.scr+=a.speed;
if(a.speed>2*speedStep){
a.speed-=speedStep;complete=false;
} else if(a.speed>0) {
var t= Math.round(a.scr / oneHeight);
if(t>=numImage) t=0;
console.log(i,t,a.scr-oneHeight*t,a.ob,a.num);
a.scr=oneHeight*t;
a.speed=0;
complete=false;
}
if(a.scr>(oneHeight*numImage))
a.scr-=oneHeight*numImage;
a.a.scrollTop=Math.floor(a.scr);
}
if(complete) clearInterval(LetsGo.interval)
},20)
}
а вот сама выборка(1-10) задается в
for(var i in{xxx1:1}){
и водится в div'aх
<div id='xxx1' class='XXX'>
<div class='X'>1</div> <!-- а вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div>
</div>
нужно чтобы ввод был не в дивах а в масиве, не выходи это сделать
наглядно
|
|
31.10.2015, 21:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
lotto на jquery
228,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li{
margin: 0px;
width: 60px; height:50px;
display: block;
text-align: center;
color: rgba(255, 255, 255, 1);
font-size: 24px;
font-weight: bold;
}
#carusel {
position:relative; top: 0px; left:0px; display:block;
width: 60px; height:0px;
padding: 0px; margin: 0px;
}
div{
overflow:hidden; width: 60px; height:50px; position: relative; left: 100px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
var arr = [1,4,90,56,3,400,800,67,7,34,12345], carusel = $('#carusel');
function rand(min, max, integer) {
var r = Math.random() * (max - min) + min;
return integer ? r|0 : r;
}
function rgbColor() {
return 'rgb(' + rand(0 ,256, true) + ', ' + rand(0 ,256, true) + ', ' + rand(0 ,256, true) + ')';
}
$.each(arr,function(indx, el){
$('<li/>',{text : el, data : {i : indx},css : {'background-color' : rgbColor()}}).appendTo(carusel)
carusel.height('+=50')
});
function lotto()
{
var n = rand(0 ,arr.length, true);
r = rand(2 ,5, true);
$('p').text(arr[n]);
carusel.stop();
(function go() {
carusel.animate({
top: '-=50'
}, 200, function () {
var li = $('li:first');
data = li.next().data('i');
if (data == n) r--;
li.appendTo(carusel)
carusel.css({
top: '0px'
});
r && go()
})
}())
}
$('[type="button"]').on({click : lotto})
})
</script>
</head>
<body>
<div>
<ul id="carusel">
</ul>
</div>
<p></p>
<input name="" type="button" value="go">
</body>
</html>
Последний раз редактировалось рони, 31.10.2015 в 21:20.
|
|
31.10.2015, 21:08
|
|
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
228,
Сообщение от Ruslan_xDD
|
победитель уже заранее известен на сервере, а в JS - фейк
|
это ответ
2 форума, mysql, php, js - не надоело?
Цитата:
|
с логикой разберитесь
на бумаге на листике напишите, что надо
|
где логика Карл???
|
|
31.10.2015, 21:14
|
Интересующийся
|
|
Регистрация: 31.10.2015
Сообщений: 14
|
|
Poznakomlus,
приятно видеть знакомые лица)
вот не получалось переделать скрипт под массив например
логика в процесе ведь не знаю правельная ли она
|
|
|
|