[Javascript] Roulette

Discussione in 'Javascript' iniziata da tigrhes salty, 14 Marzo 2017.

  1. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    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?
     
  2. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    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
     
    A tigrhes salty piace questo elemento.
  3. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    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?
     
  4. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    E' questa immagine messa come sfondo di un div con dimensioni fisse.
    Modificando la proprietà css background-position puoi spostare l'immagine come vuoi.
     
    A tigrhes salty piace questo elemento.
  5. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    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>
    
     
    A tigrhes salty piace questo elemento.
  6. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    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? :)
     
  7. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    Puoi utilizzare clearInterval() per fermarlo e sicuramente ti serve una rray per memorizzare posizione e numero
     
    A tigrhes salty piace questo elemento.
  8. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    Ok grazie del tuo aiuto :) ti aggiornerò!
     
    A criric piace questo elemento.
  9. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    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
     
    A tigrhes salty piace questo elemento.
  10. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    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.
     
  11. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    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 :)
     
  12. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    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?
     
  13. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    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.
     
  14. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    Eh per finire questo lavoro avrei un po di fretta!
     
  15. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
    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 ?
     
  16. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    si ma non ho trovato molto
     
  17. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.409
    Mi Piace Ricevuti:
    49
    Punteggio:
    48
    Località:
    TN
  18. tigrhes salty

    tigrhes salty Nuovo Utente

    Registrato:
    12 Gennaio 2017
    Messaggi:
    10
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
Sto caricando...

Condividi questa Pagina