[Javascript] Roulette

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 14 Mar 2017

• #1

Salve, vorrei realizzare una specie di roulette fatta in questo modo, http://csgomoment.com/, ho delle buone conoscenze di html e php, però di javascript so veramente poco.
Qualcuno potrebbe indirizzarmi verso il percoso che dovrei seguire per realizzare una barra scorrevole come quella del sito linkato sopra?

 

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 15 Mar 2017

• #2

Ciao, puoi "sbirciare" il sorgente del link postato con la console del broser.
E' un div con l'immagine in background. Javascript non fa altro che modificare la position dell'immagine

 

Reactions: tigrhes salty

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 15 Mar 2017

• #3

criric ha scritto:

Ciao, puoi "sbirciare" il sorgente del link postato con la console del broser.
E' un div con l'immagine in background. Javascript non fa altro che modificare la position dell'immagine

Clicca per allargare...

Ho provato a vedere il sorgente e il file javascript, non ci capisco molto. Anche perché se non sbaglio é un immagine in un loop no?

 

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 15 Mar 2017

• #4

E' questa immagine messa come sfondo di un div con dimensioni fisse.
Modificando la proprietà css background-position puoi spostare l'immagine come vuoi.

 

Reactions: tigrhes salty

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 15 Mar 2017

• #5

un semplice esempio

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="roulette" style="width:800px;height:75px;background-image: url('http://csgomoment.com/resources/assets/img/cases.png')"></div>
<script>
    var x = 0;
    setInterval(function () {
        x -= 5;
        $('#roulette').css('background-position', x + 'px 0');
    }, 10);
</script>

 

Reactions: tigrhes salty

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 15 Mar 2017

• #6

criric ha scritto:

un semplice esempio

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="roulette" style="width:800px;height:75px;background-image: url('http://csgomoment.com/resources/assets/img/cases.png')"></div>
<script>
    var x = 0;
    setInterval(function () {
        x -= 5;
        $('#roulette').css('background-position', x + 'px 0');
    }, 10);
</script>

Clicca per allargare...

Ok grazie. Ora se voglio che parta in automatico ogni tot secondi, e si fermi dopo una velocità random su una casella? per ricavare il valore di tale casella devo crearmi un array?

 

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 16 Mar 2017

• #7

Puoi utilizzare clearInterval() per fermarlo e sicuramente ti serve una rray per memorizzare posizione e numero

 

Reactions: tigrhes salty

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 16 Mar 2017

• #8

criric ha scritto:

Puoi utilizzare clearInterval() per fermarlo e sicuramente ti serve una rray per memorizzare posizione e numero

Clicca per allargare...

Ok grazie del tuo aiuto ti aggiornerò!

 

Reactions: criric

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 17 Mar 2017

• #9

Andiamo avanti qui, prova questo

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="roulette" style="width:800px;height:75px;background-image: url('http://csgomoment.com/resources/assets/img/cases.png')"></div>
<h1 id="number"></h1>
<script>
    var n = [1, 14, 2, 13, 3, 12, 4, 0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4, 0, 11, 5, 10, 6, 9, 7, 8];
    var x = 0;
    setInterval(function () {
        x = x < -2250 ? 0 : x - 5;
        $("#number").html(n[parseInt(Math.abs(x) / 75)]);
        $('#roulette').css('background-position', x + 'px 0');
    }, 100);
</script>

è un idea ma si potrebbe fare in altri modi

 

Reactions: tigrhes salty

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 18 Mar 2017

• #10

Okay ho capito abbastanza il codice, grazie. Saprebbe spiegarmi come usare il Timer in javascript? Dopo tot tempo compiere un azione come rallentare l'immagine con la funzione clearInterval(), rallentandola senza che si fermi in modo immediato.

 

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 18 Mar 2017

• #11

clearInterval() interrompe l'animazione. Per modificare la velocità devi intervenire sul secondo parametro della funzione setInterval(). Nell' esempio 100. Aumentando o diminuendo il parametro cambia la velocità. Dovresti memorizzare la velocità in una variabile. Settare una variabile che ti conta il cambio numero e una che a random setta il numero di giri che la roulette deve fare. Quando arrivi all'ultimo giro blocchi tutto con clearInterval. E'più facile farlo che dirlo

 

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 19 Mar 2017

• #12

mm ho provato e riprovato ma sta sempre ferma. Come consiglieresti di fare te? Mi potresti consigliare anche dei libri in inglese dove poter apprendere lo javascript?

 

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 20 Mar 2017

• #13

Non ho mai letto un libro e non saprei consigliarti.
In rete ci sono tantissime guide su javascript, ne trovi anche su MrWebmaster.
Se non hai fretta di finire il lavoro e il tuo obbiettivo è quello di imparare il linguaggio, il mio consiglio è quello di utilizzare il canvas di html5. Qui trovi una guida base.

 

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 20 Mar 2017

• #14

Eh per finire questo lavoro avrei un po di fretta!

 

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 20 Mar 2017

• #15

La fretta porta spesso a creare dei mostri.
io più che qualche consiglio o qualche spezzone di codice non posso darti.
Hai già cercato in rete se c'è qualcosa di già pronto ?

 

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 20 Mar 2017

• #16

si ma non ho trovato molto

 

criric

Super Moderatore

Membro dello Staff

SUPER MOD

MOD

21 Ago 2010

5.606

54

48

TN

• 21 Mar 2017

• #17

forse non hai cercato nel modo corretto
http://codepen.io/ByteKnight13/pen/950a1a0d277fc0204d1827120bdcc090/
c'è ne sono altri, ho messo "roulette orizzontal javascript" nella ricerca

 

T

tigrhes salty

Nuovo Utente

12 Gen 2017

20

2

3

27

• 21 Mar 2017

• #18

Grazie mille!

 

G

Gianluca Fiore

Nuovo Utente

30 Lug 2019

2

0

1

• 9 Set 2019

• #19

Qualcuno potrebbe indirizzarmi verso il percoso che dovrei seguire per realizzare una barra scorrevole come quella del sito linkato sopra?[/QUOTE ha scritto:

Se ho ben inteso c'è un esempio a questo link: https://www.w3schools.com/jsref/met_win_setinterval.asp

Clicca per allargare...