Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2015, 18:13
228 228 вне форума
Интересующийся
Отправить личное сообщение для 228 Посмотреть профиль Найти все сообщения от 228
 
Регистрация: 31.10.2015
Сообщений: 14

крутилка/барабан/лототрон/лотерея/рулетка
Здраствуйте

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

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

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

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

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

спасибо за помощ
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2015, 18:38
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

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

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



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

Тут ничего сложного нет, сплошные формулы.
Ответить с цитированием
  #3 (permalink)  
Старый 31.10.2015, 18:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

228,
http://embed.plnkr.co/TaQwvOHZhGOBv4qdQBOM/preview
Наброски Лотерейки для ролевых форумов
Ответить с цитированием
  #4 (permalink)  
Старый 31.10.2015, 19:02
228 228 вне форума
Интересующийся
Отправить личное сообщение для 228 Посмотреть профиль Найти все сообщения от 228
 
Регистрация: 31.10.2015
Сообщений: 14

Ruslan_xDD, я так впринципе и задумывал рандомно выбирается а скрипт просто визуализирует
рони,спасибо прикольные примеры
еще задача в том чтобы брались из масива или бд аватарки(числа) в примерах div'ы
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2015, 19:55
228 228 вне форума
Интересующийся
Отправить личное сообщение для 228 Посмотреть профиль Найти все сообщения от 228
 
Регистрация: 31.10.2015
Сообщений: 14

мне бы http://jsfiddle.net/orbhxjs3/ переделать чтобы с масива числа бралисьRL] переделать чтобы числа брались с масива
Ответить с цитированием
  #6 (permalink)  
Старый 31.10.2015, 20:16
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 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>';
Ответить с цитированием
  #7 (permalink)  
Старый 31.10.2015, 20:28
228 228 вне форума
Интересующийся
Отправить личное сообщение для 228 Посмотреть профиль Найти все сообщения от 228
 
Регистрация: 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>

нужно чтобы ввод был не в дивах а в масиве, не выходи это сделать
наглядно
Ответить с цитированием
  #8 (permalink)  
Старый 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.
Ответить с цитированием
  #9 (permalink)  
Старый 31.10.2015, 21:08
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

228,
Сообщение от Ruslan_xDD
победитель уже заранее известен на сервере, а в JS - фейк
это ответ
2 форума, mysql, php, js - не надоело?
Цитата:
с логикой разберитесь
на бумаге на листике напишите, что надо
где логика Карл???
Ответить с цитированием
  #10 (permalink)  
Старый 31.10.2015, 21:14
228 228 вне форума
Интересующийся
Отправить личное сообщение для 228 Посмотреть профиль Найти все сообщения от 228
 
Регистрация: 31.10.2015
Сообщений: 14

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск