крутилка/барабан/лототрон/лотерея/рулетка

[228]

Здраствуйте

делаю сайт - чтото на подобии выбора рандомного победителя как Вконтакте(ставок нет, только рандом - пользеватель нажимает участвовать, добавляется в список, по истечению времени выбирается победитель)
задача: пока понять как оно все сделано и "на чем"(а именно сам "барабан" и таймер отсчета - как я понял он серверный) - но если будут примеры то хорошо и сделать "визуализацию" победы

яркий пример - видео(у меня чтото похожее но без шанса/без ставок и тд)

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

сейчас много сайтов типа http://csgolucky.ru/ ,где ставят предметы, получают шанс на победу
интерисует подробная их работа(что используют, какие скрипты php, может js...), кто знает подскажите, ведь тема похожая

пытался поработать с этим скриптом и еще со сходным, написанным на swiper.js

спасибо за помощ

[ruslan_mart]

228, победитель уже заранее известен на сервере, а в JS - фейк.

Т.е., допустим у нас есть 10 игроков, а победил 5-й игрок. Нам генерируется 10 аватарок, нужно плавно прокрутить до 5-й аватарки с эффектом замедления.

scroll = avatarWidth * 5 + containerWidth / 2 - avatarWidth / 2

Вот и всё. Правда, это всё можно немного по другому сделать. Например, предусмотреть в JS повторения аватарок и т.д.

Тут ничего сложного нет, сплошные формулы.

[рони]

228,
http://embed.plnkr.co/TaQwvOHZhGOBv4qdQBOM/preview
Наброски Лотерейки для ролевых форумов

[228]

Ruslan_xDD, я так впринципе и задумывал рандомно выбирается а скрипт просто визуализирует
рони,спасибо прикольные примеры
еще задача в том чтобы брались из масива или бд аватарки(числа) в примерах div'ы

[228]

мне бы http://jsfiddle.net/orbhxjs3/ переделать чтобы с масива числа бралисьRL] переделать чтобы числа брались с масива

[ruslan_mart]

еще задача в том чтобы брались из масива или бд аватарки(числа) в примерах 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>';

[228]

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>

нужно чтобы ввод был не в дивах а в масиве, не выходи это сделать
наглядно

[рони]

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>

[Vlasenko Fedor]

228,

победитель уже заранее известен на сервере, а в JS - фейк

это ответ
2 форума, mysql, php, js - не надоело?

с логикой разберитесь
на бумаге на листике напишите, что надо

где логика Карл???

[228]

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