скрипт/крутилка/барабан/рандом/выбор

@228 · Регистрация: 28.03.2015

Студворк — интернет-сервис помощи студентам

здраствуйте
есть скрипт чтото напобии игр автомата http://jsfiddle.net/orbhxjs3/
путем прокрутки выбирается номер(пока с кнопки)

задача:
-сделать чтобы именно тот номер который нарандимился ранее показывался в счетчике(выграшный номер выбирается случайно в php) - переменная nn в коде
-чтобы конечный(последний) номер тоже задавался по-разному(как видно кол-во 1-10 номеров пишется в div ) - например с кол-ва елементов в масиве или кол-ву записей в таблице

код html:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
<title>2</title>
<style>
  .XXX {width: 70px; height: 100px; border: 1px solid red; overflow:hidden;float:left}
  .X {font-size:70px;width:100%;text-align:center; height:80px;}/* << вот тут 80!!!*/
</style>
<script type="text/javascript">
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=Math.random()*numImage;
            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)
}
 
</script>
</head>
<body>
<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>
<input type='button' onclick='LetsGo()' value='!!!Исчо!!!'>
</body>
</html>

переменная nn - какбы номер победителя(nn-1=номер на экране)

помогите переделать/доделать не особо представляю как дать значение переменной с выграшныйм номером и сделать количество которое надо
спс

@Padimanskas · 30.10.2015, 20:20

228, слот-машинки точно не разметкой делают) Советую какой-нибудь createJS или PixiJS

@228 · 30.10.2015, 22:04 **[ТС]**

Сообщение от Padimanskas

слот-машинки точно не разметкой делают) Советую какой-нибудь createJS или PixiJS

а можно поподробнее

@BANO · 31.10.2015, 14:43

Padimanskas, почему это не на разметке? ведь сделал же человек

@Padimanskas · 31.10.2015, 17:10

Сообщение от BANO

почему это не на разметке?

Ну во первых разметка это не программа а документ. Правила форматирования документов и стилевого оформления, почти всегда идут вразрез с очевидной для программы логикой в т.ч. и логикой разработки интерфейсов. Во вторых, элемент канваса не привязан к рендерингу страницы и аппаратно ускоряемый. В третьих, писать, понимать и поддерживать код написанный на фреймворке гораздо проще чем, тратить время на тонны упоротой кашы из html и js. Тем более, мы хотели бы получить результат прямо сейчас, а не после написания всей низкоуровневой логики, а это легко решает библиотека.

Сообщение от BANO

ведь сделал же человек

Ну да, "езда задом по наждаку" еще никому не вредила. Это хороший опыт

@228 · 31.10.2015, 19:54 **[ТС]**

Padimanskas,
тоесть шагать в сторону canvas и framework...
както на createJS или PixiJS не много всего, примеры в основном не по теме (напр. для галерей)

Добавлено через 2 часа 21 минуту
мне бы http://jsfiddle.net/orbhxjs3/ переделать чтобы с масива числа брались

@BANO · 31.10.2015, 20:05

Не по теме:

Сообщение от Padimanskas

езда задом по наждаку

вот блин, как точно вы мою жизнь охарактеризовали)

228, вам могу предложить всё это реально переписать на canvas, поскольку Padimanskas описал реальную ситуацию дел

а меня слушать не надо, я люблю js, а не библиотеки, короче я убеждённый
я не хочу использовать библиотеки там, где можно написать 5 строк(правда потом 20мин дебага)
я люблю кодить, кодить на чистом языке

@228 · 31.10.2015, 20:33 **[ТС]**

BANO, да я вот тоже с канвасом не сталкивался, хотя и в js не спец а новичек

у меня уже есть перменная с выграшным номером, заноше ее в даном скрипте в переменную nn(например щас победитель число 5)

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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) задается в

JavaScript
1
for(var i in{xxx1:1}){

и водится в div'aх

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

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

@Padimanskas · 31.10.2015, 21:23

228, я тут соорудил небольшой пример на фазере(заодно вспомнил как это делается

. Кстати, в фазере, как и в createjs, тоже есть приблуды вроде twreen. По старинке твин используют для эффектов камеры или для анимации интерфейса игр.

@228 · 31.10.2015, 21:43 **[ТС]**

Padimanskas, спасибо, буду развивать, хорошо когда есть что вспомнить )

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	30.10.2015, 20:20
	228, слот-машинки точно не разметкой делают) Советую какой-нибудь createJS или PixiJS 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	31.10.2015, 14:43
	Padimanskas, почему это не на разметке? ведь сделал же человек 0

@228 4 / 4 / 1 Регистрация: 28.03.2015 Сообщений: 155
	31.10.2015, 19:54 [ТС]
	Padimanskas, тоесть шагать в сторону canvas и framework... както на createJS или PixiJS не много всего, примеры в основном не по теме (напр. для галерей) Добавлено через 2 часа 21 минуту мне бы http://jsfiddle.net/orbhxjs3/ переделать чтобы с масива числа брались 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	31.10.2015, 21:23
	228, я тут соорудил небольшой пример на фазере(заодно вспомнил как это делается. Кстати, в фазере, как и в createjs, тоже есть приблуды вроде twreen. По старинке твин используют для эффектов камеры или для анимации интерфейса игр. 1

@228 4 / 4 / 1 Регистрация: 28.03.2015 Сообщений: 155
	31.10.2015, 21:43 [ТС]
	Padimanskas, спасибо, буду развивать, хорошо когда есть что вспомнить ) 0