[Javascript] QUESITO SU FUNZIONI

Discussione in 'Javascript' iniziata da Andrea Perrone, 30 Settembre 2016.

  1. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    QUESITO SU FUNZIONI

    Salve mi chiamo Andrea.

    Sto realizzando il sito web del Circolo Scacchi della mia città e, grazie alcuni suggerimenti, ho iniziato ad inserire nell'html alcune linee di javascript.

    In una pagina del sito ho realizzato una "scacchiera" con una semplice tabella 8x8 con celle di colore alterno, nelle quali celle (nelle prime e ultime due righe) ho posizionato dei caratteri speciali che rappresentano i pezzi degli scacchi nella posizione iniziale standard.

    Premetto che questa scacchiera avrà il compito NON di permettere di giocare a scacchi, MA semplicemente di visualizzare una serie di mosse di una partita x.

    Accanto alla scacchiera, ho posizionato dei bottoni (per il momento sono tre), i quali scatenano onclick altrettante funzioni "innerHtml" che, cancellando un carattere da una cella e riscrivendone un altro in una diversa posizione, simulano a tutti gli effetti il movimento dei pezzi; in aggiunta, alcune funzioni possono scrivere, in una cella adiacente la scacchiera, un commento opzionale, relativo ad una specifica posizione (per esempio: bottone 40 ----> mossa 40: "il Bianco perde un tempo").

    Quindi, cliccando in sequenza i bottoni, si ottiene la visualizzazione della partita dopo l'ultima mossa (in questo caso la terza!).

    La mia domanda è: come riuscire a permettere a chi visualizza la pagina di tornare indietro e di guardare una posizione precedente, senza che sia necessario ricaricare la pagina, per poi cliccare i bottoni fino a raggiungere la posizione desiderata?

    Qualcuno mi parla di array; di stati da assegnare agli argomenti di quest'ultimo; di matrici che rappresentino questi stati; di creare una history.......bo?

    Ringrazio anticipatamente chi potesse e volesse rispondermi e grazie anche all'organizzazione di questo Forum!

    :)

    Andrea
     
  2. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Ciao, bisognerebbe vedere come hai scritto le funzioni. Ma crei un bottone per ogni mossa ?
    prova anche questo
    Codice:
    <div id="scacchiera"></div>
    <div id="messaggi"></div>
    <input type="button" onclick="precedente()" value="<<"/>
    <input type="button" onclick="prossima()" value=">>"/>
    
    <script>
        var mossacorrente = 0;
        var mosse = [
            {
                da: "a1",
                a: "e1",
                messaggio: "bianco muove da a1 a e1"
            },
            {
                da: "h8",
                a: "f8",
                messaggio: "nero muove da h8 a f8"
            },
            {
                da: "e1",
                a: "e5",
                messaggio: "nero muove da e1 a e5"
            }
        ];
        var pezzi = [
            {
                nome: "torre bianca",
                code: "&#9814;",
                posizione: "a1"
            },
            {
                nome: "torre nera",
                code: "&#9820;",
                posizione: "h8"
            }
        ];
        function prossima() {
            if (mossacorrente < mosse.length) {
                document.getElementById("messaggi").innerHTML = mosse[mossacorrente].messaggio;
                var pezzo = document.getElementById(mosse[mossacorrente].da).innerHTML;
                document.getElementById(mosse[mossacorrente].da).innerHTML = "";
                document.getElementById(mosse[mossacorrente].a).innerHTML = pezzo;
                mossacorrente++;
            } else {
                document.getElementById("messaggi").innerHTML = "non ci sono altre mosse";
            }
        }
        function precedente() {
            if (mossacorrente > 0) {
                mossacorrente--;
                var pezzo = document.getElementById(mosse[mossacorrente].a).innerHTML;
                document.getElementById("messaggi").innerHTML = mosse[mossacorrente].messaggio;
                document.getElementById(mosse[mossacorrente].a).innerHTML = "";
                document.getElementById(mosse[mossacorrente].da).innerHTML = pezzo;
            } else {
                document.getElementById("messaggi").innerHTML = "posizione iniziale";
            }
        }
    
        function posizionaPezzi() {
            for (i in pezzi) {
                document.getElementById(pezzi[i].posizione).innerHTML = pezzi[i].code;
            }
        }
    
        function creaScacchiera() {
            var posx = ["h", "g", "f", "e", "d", "c", "b", "a"];
            var div = document.getElementById('scacchiera');
            var tbl = document.createElement('table');
            var tbdy = document.createElement('tbody');
            for (var i = 0; i < 8; i++) {
                var tr = document.createElement('tr');
                for (var j = 0; j < 8; j++) {
                    var td = document.createElement('td');
                    td.setAttribute('id', posx[i] + (j + 1));
                    td.style.width = '40px';
                    td.style.textAlign = 'center';
                    td.style.fontSize = '25px';
                    td.style.height = '40px';
                    if (j % 2 !== 0 && i % 2 === 0) {
                        td.style.backgroundColor = "#bbbbbb";
                    } else if (j % 2 === 0 && i % 2 !== 0) {
                        td.style.backgroundColor = "#bbbbbb";
                    }
                    tr.appendChild(td);
    
                }
                tbdy.appendChild(tr);
            }
            tbl.appendChild(tbdy);
            div.appendChild(tbl);
        }
        creaScacchiera();
        posizionaPezzi();
    </script>
     
  3. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ciao Criric, non ho parole, cercherò di capire bene ciò che mi hai scritto e ti ringrazio infinitamente!
     
  4. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Ho scritto al volo senza pensarci molto e non ho commentato, sicuramente si può migliorare. In poche parole creo la tabella assegnando come id delle celle la loro posizione a1,b1 etc. In ogni casella disegno il suo pezzo ciclando l'array pezzi, nell'array mosse memorizzo il punto di partenza, il punto d'arrivo e il messaggio, con innerHTML ridisegno il pezzo nella nuova posizione.
    E' stato più facile farlo :) , se hai bisogno chiedi pure.
    Sarebbe interessante sapere anche come avevi pensato di fare tu.

    Per i pezzi uguali è meglio modificare la funzione cosi
    Codice:
    function posizionaPezzi() {
            for (var i in pezzi) {
                for (var p in pezzi[i].posizione) {
                    document.getElementById(pezzi[i].posizione[p]).innerHTML = pezzi[i].code;
                }
            }
        }
    e l'array cosi
    Codice:
    var pezzi = [
            {
                nome: "torre bianca",
                code: "&#9814;",
                posizione: ["a1", "a8"]
            }
    sopratutto per i pedoni si risparmano un bel po di rige di codice.
     
  5. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    infatti ho sbagliato a numerare le caselle
    l'irdine giusto dovrebbe essere questo
    Codice:
    function creaScacchiera() {
            var posx = ["a", "b", "c", "d", "e", "f", "g", "h"];
            var div = document.getElementById('scacchiera');
            var tbl = document.createElement('table');
            var tbdy = document.createElement('tbody');
            for (var i = 0; i < 8; i++) {
                var tr = document.createElement('tr');
                for (var j = 0; j < 8; j++) {
                    var td = document.createElement('td');
                    td.setAttribute('id', posx[j] + (8 - i));
                    td.innerHTML = posx[j] + (8 - i);
                    tr.appendChild(td);
                }
                tbdy.appendChild(tr);
            }
            tbl.appendChild(tbdy);
            div.appendChild(tbl);
        }
     
  6. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    criric sto cercando di adattare quello che mi hai scritto a ciò che avevo in html e, prescindendo la function creaScacchiera, che è troppo difficile da capire e realizzare per me :), sto cercando di applicare i var mosse e pezzi alla tabella html che è sicuramente più prolissa e disordinata della tua e "fatta a mano" (la mia è semplicemente

    <table id="scacchiera">
    <tr>
    <td id="a8"></td>
    <td id="b8"></td>
    ......
    eccetera

    )

    dunque una cosa non sto capendo...... Forse ho compreso che, scrivendo il var pezzi, potrei lo stesso applicare alla tabella che avevo io una function come quella che mi dici cioè

    function posizionaPezzi() {
    for (i in pezzi) {
    document.getElementById(pezzi.posizione).innerHTML = pezzi.code;
    }

    come faccio a "collegarla" alla table id="scacchiera" :/

    ps: le "i" che compaiono nella formula della funzione sono semplicemente le "informazioni"??? Vale a dire "nome"; "code" o "posizione"???????????
     
  7. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    la i è l'indice con il quale si pesca l'elemento dall'array.
    Se hai già la tabella fatta a mano ti bastano le funzioni precedente() e successiva() la variabile mossacorrente e l'array mosse[], non ti serve altro
     
  8. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    function uno() {

    var x = document.getElementById("e2");
    x.innerHTML = "";
    var x = document.getElementById("e4");
    x.innerHTML = "♙";
    var x = document.getElementById("e7");
    x.innerHTML = "";
    var x = document.getElementById("e5");
    x.innerHTML = "♟";

    E questa è una delle mie funzioni!
     
  9. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    ok hai risposto prima di me......
    Dunque non serve creare il var pezzi e posizionarli tramite funzione?
    Quindi scrivo di nuovo i pezzi nella tabella fatta a mano e poi uso le due funzioni precedente e successiva?
    ora vedo un po' e dopo risponderò di nuovo grazie per il tuo aiuto!
     
  10. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    ma a quanto mi pare di capire il var pezzi non serve per determinare il codice da inserire all'interno della nuova cella? Cmq sto leggendo eh!
     
  11. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    no, nella var pezzo all'interno delle funzioni precedente e sucessiva viene memorizzato il codice che si sta spostando
     
  12. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    <script>

    var mossacorrente = 0

    var mosse [

    {},
    {
    da: "a2",
    a: "a3",
    messaggio: "bianco muove da a2 a a3"
    },

    function prossima() {
    if (mossacorrente < mosse.length) {
    document.getElementById("commento").innerHTML = mosse[mossacorrente].messaggio;
    var pezzo = document.getElementById(mosse[mossacorrente].da).innerHTML;
    document.getElementById(mosse[mossacorrente].da).innerHTML = "";
    document.getElementById(mosse[mossacorrente].a).innerHTML = pezzo;
    mossacorrente++;

    }
    }
    </script>

    nella tabella alla casella a2 c'è il carattere del pedone, mentre nella casella a3 c'è un <br> (scritto per conservare la forma quadrata delle celle che altrimenti si "deformavano" :) ; il div dove vengono scritti i messaggi si chiama "commento".

    Cosa ho omesso (la mia scrittura non ottiene nessun risultato a video :/ tutto fermo in posizione iniziale - ribadisco che i pezzi li ho posizionati scrivendoli direttamente nelle <td> e non con var pezzi adesso)?
     
  13. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    manca la parentesi quadra che chiude l'array mosse ], il primo elemento lo hai lasciato vuoto e la funzione andra in errore.
    per mantenere le celle della stessa dimensione servedargli un width e un height fisso
     
  14. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    <script>



    var mossacorrente = 0

    var mosse [


    {
    da: "a2",
    a: "a3",
    messaggio: "bianco muove da a2 a a3"
    },

    {

    da: "a7"
    a: "a5"
    messaggio: "nero muove da a7 a a5"

    },

    ]

    function prossima() {
    if (mossacorrente < mosse.length) {
    document.getElementById("messaggi").innerHTML = mosse[mossacorrente].messaggio;
    var pezzo = document.getElementById(mosse[mossacorrente].da).innerHTML;
    document.getElementById(mosse[mossacorrente].da).innerHTML = "";
    document.getElementById(mosse[mossacorrente].a).innerHTML = pezzo;
    mossacorrente++;

    }
    }
    </script>

    Qual è il tuo nome Criric? lo aggiungerò sulla pagina quando avrò finito :)

    Cmq sbaglio ancora qualcosa perchè non va!

    Dove devo ricercare l'errore?
     
  15. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    manca il simbolo uguale, sei un po distratto.
    var mosse = [
    mi chiamo Ubaldo
     
  16. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ubaldo penso adesso di aver aggiunto tutta la punteggiatura che mancava, riguardando il tuo esempio.

    Dunque,

    var pezzo = document.getElementById(mosse[mossacorrente].da).innerHTML;

    dice che il carattere da assegnare tramite innerHtml (si trova in mosse[mossacorrente].da)

    mentre

    document.getElementById(mosse[mossacorrente].da).innerHTML = "";
    document.getElementById(mosse[mossacorrente].a).innerHTML = pezzo;
    mossacorrente++;

    rappresentano il movimento, giusto?

    Mi dispiace di non essere abbastanza preparato e attento per poter sostenere il discorso, ma ancora non va a video! :/

    Resta il fatto che non voglio portarti più tempo di quanto me ne hai dedicato quindi dopo una tua risposta ci penserò su e vedrò di sistemare e solo allora ti chiederò di nuovo ok?
     
  17. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    si, corretto.
    ti do un cosiglio per scovare gli errori javascript: apri la console del browser, tasto destro sulla pagina "ispeziona elemento" se usi chrome o "analizza elemento" se usi firefox, si apre un tool del browser, portati nella scheda "console" e ricarica la pagina. Ogni errore riscontrato dal browser verrà loggato in quella scheda man mano che interagisci con la pagina e dai messaggi che ti mostra potrai risalire all'errore che stai facendo.
     
  18. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ciao a Ubaldo e a tutti.

    Mi è venuta una idea che non so se è fattibile: In pratica credo di aver semplificato le vs scritture, adattandole all'html che avevo e che non andava bene, solo che mi manca qualche ultimo passaggio e se la cosa funzione, mi muoverò poi in questa direzione. Posto il codice con lo script modificato dall'esempio esaustivo che mi ha dato Ubaldo di Trento: in pratica ho inserito in un var una serie di funzioni innerHtml. A Ubaldo e a tutti chiedo se questa cosa potrebbe funzionare.....


    <script>


    var mossacorrente= 0

    var mosse [

    {function uno() {

    var x = document.getElementById("e2");
    x.innerHTML = "";
    var x = document.getElementById("e4");
    x.innerHTML = "♙";
    var x = document.getElementById("e7");
    x.innerHTML = "";
    var x = document.getElementById("e5");
    x.innerHTML = "♟";


    } },

    { function due() {

    var x = document.getElementById("g1");
    x.innerHTML = "";
    var x = document.getElementById("f3");
    x.innerHTML = "♘";
    var x = document.getElementById("b8");
    x.innerHTML = "";
    var x = document.getElementById("c6");
    x.innerHTML = "♞";

    var x = document.getElementById("commento");
    x.innerHTML = "Il Bianco ha il vantaggio del tratto.";

    } }

    ]

    function prossima() {
    if (mossacorrente < mosse.length) <!-- esegui mossacorrente?! -->;
    mossacorrente++

    </script>
     
  19. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    mi sento chiamato in causa :)
    no, cosi non puo funzionare , la sintassi per assegnare funzioni ad un oggetto è un tantino diversa
    posta l'html della scacchiera con le due funzioni che ti ho postato che vediamo cosa non funziona.
     
  20. Andrea Perrone

    Andrea Perrone Nuovo Utente

    Registrato:
    30 Settembre 2016
    Messaggi:
    22
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ubaldo è sorta una nuova questione: la presenza nella serie di mosse, di movimenti speciali, come la presa, l'arrocco, la promozione a pezzo, tutto ciò lo risolverei con un altro metodo: usare la possibilità di fare il drag and drop che sto leggendo su w3schools per far sì che il visitatore (del quale si presume una minima familiarità con gli scacchi) debba muovere i pezzi seguendo la lista delle mosse che andrebbero semplicemente scritte nella zona commento! Che dici?
     
Sto caricando...

Condividi questa Pagina