No canvas

sedo96

il 25 mag 2020, 23:05

30 risposte

30 Risposte - Pagina 2

S
sedo96
Pochi posts
Iscritto da
feb, 2020
Messaggi:
19
Re: No canvas
27 mag 2020, 11:13
Mmm
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3312
Re: No canvas
27 mag 2020, 11:20
sedo96 ha scritto:
Quindi:
var level1 = [
["?", "?", " ", " ", " ", " ", "?"],
["?", " ", "P", " ", "$", " ", " "],
["?", " ", " ", " ", "?", "?", " "],
["?", "?", " ", " ", "?", " ", " "],
["O", " ", " ", " ", "$", " ", " "],
["O", " ", " ", " ", " ", " ", "?"],
["?", " ", "?", "?", "?", "?", "?"],
];

Questa è la mia matrice iniziale.
Sì, anche se io terrei una matrice "di gioco" che rappresenta il livello corrente, mentre definirei separatamente le matrici dei vari livelli: quando un livello inizia, basta "spalmare" i valori della matrice che rappresenta il livello su quella attiva e il gioco è fatto; questo permette di non dover inserire "if" e altre discriminazioni per dover determinare ogni volta su quale matrice si sta lavorando, oltre al fatto che ripartendo si perdono le configurazioni iniziali di gioco.

sedo96 ha scritto:
per esempio se volessi spostarlo a destra (premo tasto destra della tastiera) e a destra ho un " ", imposto P nella cella accanto di destra mentre se ho un muro non può effettuare movimenti. Giusto?
Esattamente. Dal mio punto di vista, la logica dovrebbe ragionare consentendo (o impedendo) le operazioni di gioco in base alle casistiche da considerare, e applicare di conseguenza le modifiche necessarie alla matrice che rappresenta lo stato attuale delle posizioni di personaggio, muri, oggetti, ecc. usando un valore diverso per ciascuno di questi.

sedo96 ha scritto:
Per farmi spostare il disegno del personaggio basta spostare P in un altra cella della matrice oppure ad ogni spostamento devo chiamare una funzione che mi aggiorni l'interfaccia della matrice?
"Spostare la cella" fisicamente mi sembra una operazione inutile e senza alcun vantaggio tangibile: lo stesso effetto si ottiene lasciando le celle dove sono e attribuendole una classe CSS che dipende dallo stato di quella specifica cella, dopo aver gestito l'azione dell'utente e modificato la matrice.

Se prima il personaggio si trovava in una cella e ora si è mosso, quella in cui appariva risulterà vuota e il personaggio si troverà in quella nuova: di fatto si nota uno spostamento, ma non c'è bisogno di complicarsi la vita spostando o scambiando fisicamente le celle nel DOM della pagina, che è pure una operazione più lenta.

Sì, adotterei quindi una funzione che ribalti lo stato della matrice sulla tabella di rappresentazione.

In questo modo, si tiene separata la logica di gioco da quella che consente di rappresentarne la situazione all'interno di una interfaccia grafica, che in questo caso è rappresentata da una tabella HTML ma domani potrebbe diventare qualsiasi altra cosa.

Ciao!
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3312
Re: No canvas
27 mag 2020, 11:36
sedo96 ha scritto:
Le classi le ho impostate così e nel css ho messo
#griglia div.muro {
}

Ho fatto bene no?
Sì, grossomodo è quello che avevo in mente. Tutto quello che riguarda l'aspetto di ciò che si vede nella pagina dovrebbe essere regolato tramite CSS: oltre a essere più performante rispetto al cambio di elementi di stile da JavaScript, è anche più comodo da gestire e personalizzare.

Potresti partire con una rappresentazione semplice: usare uno sfondo colorato a tinta unita per i DIV in base al loro stato e verificando il funzionamento del gioco, poi un domani sai che - tramite CSS - puoi sostituire quello aspetto con qualcosa di più raffinato, ad esempio una immagine per lo sfondo che rappresenti un muro, un personaggio, ecc.

Se mantieni divisi gli "strati" applicativi, ogni modifica sull'uno non impatterà sull'altro, e questo lo ottieni riservando a ogni risorsa la sua finalità: con HTML gestisci la struttura, con JS la logica, con CSS l'aspetto.

Ciao!
S
sedo96
Pochi posts
Iscritto da
feb, 2020
Messaggi:
19
Re: No canvas
27 mag 2020, 11:48
Grazie mille per la pazienza, molto gentile..
In questi giorni provo, poi ti faccio sapere se sono riuscito a "levarci le gambe".
Ciao!
S
sedo96
Pochi posts
Iscritto da
feb, 2020
Messaggi:
19
Re: No canvas
27 mag 2020, 23:37
Ciao
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3312
Re: No canvas
28 mag 2020, 02:10
sedo96 ha scritto:
E' tutta la sera che provo ma non riesco a far muovere queste benedette celle
Peccato che si era detto che le celle non si devono spostare.

Vanno identificate attraverso la loro posizione sulla scacchiera, con delle coordinate o un indice numerico, o un nome che contiene una informazione che riesca a identificare la prima, la seconda, la terza, ecc.

Quando si preme il pulsante, devi identificare nella struttura dati (array o matrice) dove si trova il personaggio, controllare se può spostarsi nella direzione desiderata e, in caso affermativo, modificare gli elementi della struttura in modo che quello in cui era contenuto il personaggio ora sia presumibilmente vuoto, e che il personaggio si trovi a questo punto in un altro elemento.

Una volta aggiornata la struttura di gioco, attribuisci le classi CSS alla tabella (si era detto le classi, non modificare lo stile direttamente) per fare sì che sia una nuova cella ad avere la classe "personaggio", mappando la struttura dati sulla tabella HTML assegnando una classe CSS specifica a ciascuna cella in base al dato contenuto nell'elemento corrispondente della struttura.

Quando assegni la classe CSS, il browser ne aggiorna l'aspetto, quindi definisci uno stile per la celle che contiene il personaggio, il muro, ecc. e attribuisci queste classi alle celle della griglia in base a cosa c'è scritto nella struttura dati.

Se sposti una cella di una tabella nel modo che hai seguito tu, otterrai solo una tabella deforme dove una delle celle ha modificato la larghezza della colonna sovrapponendosi a quella di fianco e sarà un casino.

Il mio suggerimento è quello di partire simulando il gioco usando una matrice o un array, senza preoccuparsi della rappresentazione grafica (stampando solo i risultati), poiché quella verrà dopo e sarà lo sforzo minore.

Ciao!
S
sedo96
Pochi posts
Iscritto da
feb, 2020
Messaggi:
19
Re: No canvas
28 mag 2020, 10:45
Ah forse ho capito. Tu quindi dici di partire dalla matrice di base, per esempio questa:

["?", "?", " ", " ", " ", " ", "?"],
["?", " ", "P", " ", "$", " ", " "],
["?", " ", " ", " ", "?", "?", " "],
["?", "?", " ", " ", "?", " ", " "],
["O", " ", " ", " ", "$", " ", " "],
["O", " ", " ", " ", " ", " ", "?"],
["?", " ", "?", "?", "?", "?", "?"],

Ad ogni possibile spostamento (destra, sinistra, su, giu), trovare il protagonista nella cella, e se può fare lo spostamento invertire P con " ", oppure se ha vicino la scatola e la scatola non è appoggiata al muro spostare tutto....Giusto?
Provo a fare il codice, poi te lo mando
S
sedo96
Pochi posts
Iscritto da
feb, 2020
Messaggi:
19
Re: No canvas
28 mag 2020, 11:34
Function spostamento() {
var i, j;
for (i = 0; i < 7; i++) {
for (j = 0; j < 7; j++) {
if (level_selected[i)[j] === "P") {
switch(event.keyCode) {
case 37:
if(level_selected[i)[j-1] === " ") { //se a sinistra ho libero, scambio il protagonista con la cella vuota
level_selected[i)[j-1] = "P";
level_selected[i)[j] = " ";
}
if(level_selected[i)[j-1] === "$") { //se a sinistra ho una scatola, sposto la scatola e il protagonista (anche se avessi la meta)
if(level_selected[i)[j-2] === " ") {
level_selected[i)[j-2] === "$";
level_selected[i)[j-1] === "P";
level_selected[i)[j] === " ";
}
}

}
}
}
}
}

Ho fatto soltanto il caso dello spostamento a sinistra. E' questo ciò che intendevi tu?
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3312
Re: No canvas
28 mag 2020, 12:16
sedo96 ha scritto:
Tu quindi dici di partire dalla matrice di base, per esempio questa:
[...]
Ad ogni possibile spostamento (destra, sinistra, su, giu), trovare il protagonista nella cella, e se può fare lo spostamento invertire P con " ", oppure se ha vicino la scatola e la scatola non è appoggiata al muro spostare tutto....Giusto?
Esattamente.

sedo96 ha scritto:
Ho fatto soltanto il caso dello spostamento a sinistra. E' questo ciò che intendevi tu?
Se non formatti il codice con l'apposito tag, è illeggibile e non si capisce nulla.

sedo96

Pochi posts

Iscritto da: feb, 2020

Messaggi:: 19

Re: No canvas

28 mag 2020, 12:58

function start(){
	/////////////
	create_Table();
	document.addEventListener("keydown", spostamento);
	////////////
}


function create_Table() {
	
	var table, cell, i, j, node, row;
	
	var griglia = document.getElementById("griglia");		
	
		for (i=0; i<7; i++)
		{
			row = document.createElement("tr");				
				
				for (j=0; j<7; j++)
				{
					table = document.createElement("table");
					cell = document.createElement("td");
					node = document.createElement("div");
					node.setAttribute("value",level_selected[i][j]);
					
					if (level_selected[i][j] === "?") {
						node.className = "muro";
					}
					
					if (level_selected[i][j] === "$") {
						node.className = "scatola";
					}
					
					if (level_selected[i][j] === "P") {
						node.className = "protagonista";
					}
					
					if (level_selected[i][j] === "O") {
						node.className = "meta";
					}
					
					
					cell.appendChild(node);
					row.appendChild(cell);						
				}
					
			table.appendChild(row);
			griglia.appendChild(row);
		}	
}

Function spostamento() {
	var i, j;
	for (i = 0; i < 7; i++) {
		for (j = 0; j < 7; j++) {
			if (level_selected[i)[j] === "P") {
				switch(event.keyCode) {
					case 37:
					if(level_selected[i)[j-1] === " ") { //se a sinistra ho libero, scambio il protagonista con la cella vuota
						level_selected[i)[j-1] = "P";
						level_selected[i)[j] = " ";
					}	
					if(level_selected[i)[j-1] === "$") { //se a sinistra ho una scatola, sposto la scatola e il protagonista (anche se avessi la meta)
						if(level_selected[i)[j-2] === " ") {
							level_selected[i)[j-2] === "$";
							level_selected[i)[j-1] === "P";
							level_selected[i)[j] === " ";
						}
					}

				}
			}
		}
	}
}

Scusami, ora dovrebbe essere più capibile. Sono sulla strada giusta?

Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3312
Re: No canvas
28 mag 2020, 17:00
sedo96 ha scritto:
Scusami, ora dovrebbe essere più capibile. Sono sulla strada giusta?
Direi di sì. Non ho analizzato il codice in modo approfondito per questioni di tempo, ma direi che almeno è la strada che intendevo io... che poi sia anche quella giusta, questo è il mio parere, ma potrei essere smentito in qualsiasi momento.

Come ulteriore miglioria, intesa come semplificazione, secondo me potresti creare la tabella una volta sola, dato che per aggiornare la situazione di gioco in fondo ti basta solo successivamente modificare la classe della singola cella (o DIV nella cella) per visualizzare l'elemento che si trova al suo interno, senza doverla necessariamente ricreare.

Quando cambi la classe CSS dell'elemento, anche senza ricrearlo, il browser reagisce subito applicando la formattazione specifica.

Una volta creata la tabella, siccome in seguito devi poter avere un modo di agire sulla singola cella in base al contenuto della tua struttura dati di gioco, ti serve un modo per poter risalire a essa. Per fare questo, magari potresti tenere una matrice uguale a quella di gioco dove, in fase di creazione della tabella, vai a salvarti il riferimento degli "oggetti cella" che crei nella pagina (in poche parole, il valore di ritorno delle chiamate a createElement()).

Quando crei le singole celle della tabella, chiami i metodi del DOM per fare sì che gli oggetti finiscano nella pagina, ma ti salvi anche in una matrice i riferimenti a quegli oggetti in modo da averli pronti per modificarli in un secondo momento, ovvero risalire alla cella che corrisponde a una certa posizione e assegnarle la classe CSS (tramite className).

Per quanto riguarda la logica specifica di gioco, così a prima vista mi pare che sia corretta, nel senso che a fronte dell'acquisizione di una intenzione di movimento, vai a fare le dovute verifiche e ad aggiornare la struttura dati di conseguenza: non so se la logica gestisce tutti i casi, però questa è effettivamente la parte più difficile dell'esercizio, ossia andare a implementare con JavaScript il funzionamento del gioco, ed è giusto che sia così, anche perché pur non essendo impossibile - credo - sarebbe una bella sfida anche per me.

Per questo secondo me è efficace seguire il principio consolidato di separazione della parte visuale dalla cosiddetta "business logic": ti permette di concentrarti sull'uno o sull'altro aspetto in modo distinto, senza commistione, e quindi focalizzare meglio i problemi rendendoli indipendenti e ragionando su uno alla volta.

Ciao!
S
sedo96
Pochi posts
Iscritto da
feb, 2020
Messaggi:
19
Re: No canvas
28 mag 2020, 22:17
Una volta creata la tabella, siccome in seguito devi poter avere un modo di agire sulla singola cella in base al contenuto della tua struttura dati di gioco, ti serve un modo per poter risalire a essa. Per fare questo, magari potresti tenere una matrice uguale a quella di gioco dove, in fase di creazione della tabella, vai a salvarti il riferimento degli "oggetti cella" che crei nella pagina (in poche parole, il valore di ritorno delle chiamate a createElement()).
In pratica nella create_table(), ogni volta che genero un elemento div copio anche questo elemento in una matrice di appoggio? per esempio nella create_table() ho:
```
var node = document.createElement("div");
```
posso fare
```
matrice_app[i][j] = node;
```
è giusto?

Quando crei le singole celle della tabella, chiami i metodi del DOM per fare sì che gli oggetti finiscano nella pagina, ma ti salvi anche in una matrice i riferimenti a quegli oggetti in modo da averli pronti per modificarli in un secondo momento, ovvero risalire alla cella che corrisponde a una certa posizione e assegnarle la classe CSS (tramite className).
Ma nella funzione spostamento() se richiamo gli elementi della tabella in questo modo:
```
var griglia = document.getElementById("griglia");
	for (i = 0; i < 7; i++) {
		var row = document.getElementsByTagName("tr");
		for (j = 0; j < 7; j++) {
			var table = document.getElementsByTagName("table");
			var cell = document.getElementsByTagName("td");
			var node = document.getElementsByTagName("div");
```
Posso fare a meno della matrice di appoggio? In questo modo non dovrei ricavarmi lo stesso il div della singola cella?
Io son disperato, non vedo muovere nulla, sicuramente sbaglio qualcosa e sicuramente qualcosa non mi è chiaro. Le classi css le ho definite tutte nella create_table() facendo node.className = "protagonista" ecc ecc però se le assegno all'interno dello switch quando premo il tasto di sinistra, non vedo spostare niente
Grazie mille per la pazienza che stai avendo, capisco che sono un rompi scatole ahah
Ciao

sedo96

Pochi posts

Iscritto da: feb, 2020

Messaggi:: 19

Re: No canvas

28 mag 2020, 23:06

var griglia = document.getElementById("griglia");
	for (i = 0; i < 7; i++) {
		var row = document.getElementsByTagName("tr");
		for (j = 0; j < 7; j++) {
			var table = document.getElementsByTagName("table");
			var cell = document.getElementsByTagName("td");
			var node = document.getElementsByTagName("div");

Se metto createElement invece che getElementsByTagName mi crea una tabella sotto e mi fa lo spostamento, però perchè con getElementsByTagName non funziona? non mi dovrebbe recuperare gli elementi della tabella che ho già creato?

Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3312
Re: No canvas
28 mag 2020, 23:11
sedo96 ha scritto:
In pratica nella create_table(), ogni volta che genero un elemento div copio anche questo elemento in una matrice di appoggio?
Esatto, così puoi riferirti ai DIV della tabella così come ti riferisci alle posizioni di gioco.

Ma nella funzione spostamento() se richiamo gli elementi della tabella in questo modo [...]
Nel tuo codice, tu fai un ciclo for() e all'interno scrivi
var node = document.getElementsByTagName("div")

Noterai che questo metodo non usa assolutamente la variabile indice del ciclo, e infatti questo metodo ti restituisce un array di tutti i DIV presenti nel documento, ma poi devi individuare quello giusto.

Se hai già un array con una copia dei riferimenti agli oggetti, eviti di doverli ricercare dopo con qualche tipo di criterio: puoi accedere direttamente all'elemento dell'array corrispondente per modificare il className.

Io son disperato, non vedo muovere nulla [...]
Ci possono essere svariati motivi.

Se hai usato quel metodo getElementsByTagName() per trovare l'elemento da modificare per aggiornare la situazione di gioco, non lo individuerai mai, perché ti restituisce un array di tutti i DIV ma devi trovare quello giusto.

E ancora, la tua createTable() va a creare gli elementi della tabella... ti ricordi di distruggere però la precedente?
Se ogni volta ricrei la tabella, stai aggiungendo nuove tabelle al tuo documento di continuo, per questo dico che la tabella andrebbe creata una volta sola.

Un suggerimento finale è quello di approfondire il funzionamento di JavaScript nel browser (quindi il DOM) con qualche articolo e tutorial, perché oltre a precorrere molto i tempi, stai sempre cercando di fondere troppi problemi assieme gestendoli contemporaneamente, cercando di raggiungere il risultato senza però aver prima appreso i fondamentali.

Ciao!
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3312
Re: No canvas
28 mag 2020, 23:13
sedo96 ha scritto:
perchè con getElementsByTagName non funziona? non mi dovrebbe recuperare gli elementi della tabella che ho già creato?
Un ulteriore suggerimento: leggere la documentazione!
Vedi ad esempio la .

Ciao!

Devi accedere o registrarti per scrivere nel forum

30 risposte