[Javascript] QUESITO SU FUNZIONI

Andrea Perrone

Andrea Perrone

Nuovo Utente
30 Set 2016
22
0
1
37
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
 
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>
 
Ciao Criric, non ho parole, cercherò di capire bene ciò che mi hai scritto e ti ringrazio infinitamente!
 
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.
 
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);
    }
 
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"???????????
 
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
 
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!
 
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!
 
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!
 
no, nella var pezzo all'interno delle funzioni precedente e sucessiva viene memorizzato il codice che si sta spostando
 
<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)?
 
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
 
<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?
 
manca il simbolo uguale, sei un po distratto.
var mosse = [
mi chiamo Ubaldo
 
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?
 
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.
 
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>
 
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.
 
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?
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

M
variabile javascript su link html
Risposte
5
Visite
2K
Javascript
mizar1966
M
I
Creare un banner temporaneo JavaScript
Risposte
0
Visite
1K
Javascript
IlTizioScriptato
I
S
Impossibile scorrere un oggetto in JavaScript
Risposte
0
Visite
1K
Javascript
steven myth
S
N
Passare array da php a javascript
Risposte
5
Visite
2K
PHP
WmbertSea
WmbertSea
L
Quiz javascript funzionante da migliorare
Risposte
0
Visite
3K
Javascript
Lenigmista
L
P
  • Bloccata
errore 404 con javascript
Risposte
2
Visite
1K
Javascript
Max 1
Max 1
D
  • Bloccata
aiuto funzioni javascript
Risposte
1
Visite
876
Javascript
Max 1
Max 1
M
Upload immagine con javascript problemi con FormData()
Risposte
1
Visite
983
Javascript
MBlackmore
M
L
  • Bloccata
countdown multiplo javascript
Risposte
1
Visite
963
Javascript
Max 1
Max 1
S
  • Bloccata
Problemi Javascript + Aruba
Risposte
2
Visite
2K
Javascript
Max 1
Max 1
M
Inviare un file su un server remoto con JavaScript
Risposte
0
Visite
1K
Javascript
Mirawara
M
T
a href="javascript:;"
Risposte
1
Visite
2K
Javascript
sonusood2022
S
F
Creare elementi html con javascript
Risposte
3
Visite
3K
Javascript
McLeanerGla
M
A
pulsante di update campo mysql con javascript
Risposte
2
Visite
1K
Javascript
AndreaCerre
A
8
Javascript - PDF Form
Risposte
0
Visite
2K
Javascript
81bankai
8
B
javascript per problemi con pdf e Safari
Risposte
0
Visite
3K
Javascript
bibliofila
B
N
informazione javascript
Risposte
0
Visite
2K
Programmazione
Nedved95
N
I
Eecuzione di javascript in ciclo foreach php.
Risposte
7
Visite
2K
PHP
inftecnica
I
P
javascript:document.forms
Risposte
7
Visite
2K
Javascript
Max 1
Max 1
S
Consiglio esercizio Javascript
Risposte
2
Visite
2K
Javascript
ninja72
N
Alto Basso