[Javascript] Roulette

[tigrhes salty]

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]

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

 

[tigrhes salty]

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

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]

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

 

[criric]

un semplice esempio

<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>

 

[tigrhes salty]

un semplice esempio

<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>

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]

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

 

[tigrhes salty]

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

Ok grazie del tuo aiuto ti aggiornerò!

 

[criric]

Andiamo avanti qui, prova questo

<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

 

[tigrhes salty]

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]

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

 

[tigrhes salty]

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]

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.

 

[tigrhes salty]

Eh per finire questo lavoro avrei un po di fretta!

 

[criric]

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 ?

 

[tigrhes salty]

si ma non ho trovato molto

 

[criric]

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

 

[tigrhes salty]

Grazie mille!

 

[Gianluca Fiore]

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