|
крутилка/барабан/лототрон/лотерея/рулетка
Здраствуйте
делаю сайт - чтото на подобии выбора рандомного победителя как Вконтакте(ставок нет, только рандом - пользеватель нажимает участвовать, добавляется в список, по истечению времени выбирается победитель) задача: пока понять как оно все сделано и "на чем"(а именно сам "барабан" и таймер отсчета - как я понял он серверный) - но если будут примеры то хорошо и сделать "визуализацию" победы яркий пример - видео(у меня чтото похожее но без шанса/без ставок и тд) так rак тема сходная мне рекомендовали разобратся в скриптах рулеток пример но пока не понял каким образом там ведется отсчет и выбирается виннер, что используется конкретно сейчас много сайтов типа http://csgolucky.ru/ ,где ставят предметы, получают шанс на победу интерисует подробная их работа(что используют, какие скрипты php, может js...), кто знает подскажите, ведь тема похожая пытался поработать с этим скриптом и еще со сходным, написанным на swiper.js спасибо за помощ |
228, победитель уже заранее известен на сервере, а в JS - фейк.
Т.е., допустим у нас есть 10 игроков, а победил 5-й игрок. Нам генерируется 10 аватарок, нужно плавно прокрутить до 5-й аватарки с эффектом замедления. scroll = avatarWidth * 5 + containerWidth / 2 - avatarWidth / 2 Вот и всё. Правда, это всё можно немного по другому сделать. Например, предусмотреть в JS повторения аватарок и т.д. Тут ничего сложного нет, сплошные формулы. |
|
Ruslan_xDD, я так впринципе и задумывал рандомно выбирается а скрипт просто визуализирует
рони,спасибо прикольные примеры еще задача в том чтобы брались из масива или бд аватарки(числа) в примерах div'ы |
мне бы http://jsfiddle.net/orbhxjs3/ переделать чтобы с масива числа бралисьRL] переделать чтобы числа брались с масива
|
Цитата:
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>';
|
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> нужно чтобы ввод был не в дивах а в масиве, не выходи это сделать наглядно |
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>
|
228,
Цитата:
2 форума, mysql, php, js - не надоело? Цитата:
|
Poznakomlus,
приятно видеть знакомые лица) вот не получалось переделать скрипт под массив например логика в процесе ведь не знаю правельная ли она |
| Часовой пояс GMT +3, время: 23:52. |
|