[Javascript] QUESITO SU FUNZIONI

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
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
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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>
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
Ciao Criric, non ho parole, cercherò di capire bene ciò che mi hai scritto e ti ringrazio infinitamente!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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);
    }
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
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"???????????
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
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!
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
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!
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
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!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
no, nella var pezzo all'interno delle funzioni precedente e sucessiva viene memorizzato il codice che si sta spostando
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
<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)?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
<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?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
manca il simbolo uguale, sei un po distratto.
var mosse = [
mi chiamo Ubaldo
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
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?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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.
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
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>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
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.
 

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
33
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?