[Javascript] QUESITO SU FUNZIONI

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
36
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
36
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
36
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
36
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
36
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
36
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
36
<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
36
<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
36
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
36
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
36
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?
 
Discussioni simili
Autore Titolo Forum Risposte Data
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 18
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1

Discussioni simili