No canvas

di
sedo96
il
30 risposte
S
sedo96
Pochi posts
Iscritto da
feb, 2020
Messaggi:
19

No canvas

Ciao a tutti,
devo realizzare un quadrato in cui far muovere un soggetto con la tastiera, ma non posso utilizzare il canvas.
Avevo pensato di realizzare una tabella e far muovere il soggetto da una cella all'altra. E' un'idea fattibile?
Grazie mille

30 Risposte

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: No canvas

    sedo96 ha scritto:

    devo realizzare un quadrato in cui far muovere un soggetto con la tastiera, ma non posso utilizzare il canvas.
    Non puoi usare il Canvas perché il browser non supporta HTML5, oppure per qualche altro motivo?

    sedo96 ha scritto:

    Avevo pensato di realizzare una tabella e far muovere il soggetto da una cella all'altra. E' un'idea fattibile?
    Se il tuo soggetto deve compiere dei passi ben precisi e si può pensare che questi possano essere rappresentati in una generica griglia, potrebbe essere fattibile. In linea generale, secondo me sarebbe sufficiente anche utilizzare un banale <div> con posizionamento assoluto (position: absolute), dalle dimensioni ben precise, da spostare via JavaScript alle coordinate volute in base alla posizione in cui deve comparire.

    Ciao!
  • S
    sedo96
    Pochi posts
    Iscritto da
    feb, 2020
    Messaggi:
    19

    Re: No canvas

    Ciao, le spiego cosa dovrei fare. Devo fare un progetto per l'università il cui obiettivo è realizzare un gioco utilizzando html, javascript e php(per la parte login) ma, su esplicita richiesta del professore, senza utilizzare il canvas.
    Io avevo pensato di fare il sokoban (https://www.youtube.com/watch?v=BGOenvwj3O) ma non so dove sbattere la testa, pensavo fosse abbastanza facile ma non torna.
    Sono arrivato a realizzare la tabella 7x7 e ad inserire in ogni cella un simbolo (? per l'ostacolo, $ per la scatola, O per la meta, P per il protagonista), però non mi riesce sostituire ognuno di questo simbolo con un immagine. Come faccio?

    Questo è il codice js della creazione della tabella:
    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("input");
    node.setAttribute("value",level_selected[j]);

    node.readOnly=true;

    cell.appendChild(node);
    row.appendChild(cell);
    }

    table.appendChild(row);
    griglia.appendChild(row);
    }
    }

    Grazie mille
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: No canvas

    sedo96 ha scritto:

    Sono arrivato a realizzare la tabella 7x7 e ad inserire in ogni cella un simbolo (? per l'ostacolo, $ per la scatola, O per la meta, P per il protagonista), però non mi riesce sostituire ognuno di questo simbolo con un immagine. Come faccio?
    Basta sostituire l'elemento <input> che hai usato per mostrare il carattere con un elemento <img>, impostandone i relativi attributi, o in alternativa puoi usare un semplice <div> (e io farei così) gestendo le sue caratteristiche visuali (es. dimensione, colore di sfondo, immagine, bordo, ecc.) tramite proprietà del foglio di stile (CSS).
  • S
    sedo96
    Pochi posts
    Iscritto da
    feb, 2020
    Messaggi:
    19

    Re: No canvas

    Avevo provato a farlo ma se sostituisco img con input mi viene una tabella formata da soltanto una riga verticale e se modifico il css non mi viene niente...nel css dovrei fare #griglia .img { } giusto?
  • S
    sedo96
    Pochi posts
    Iscritto da
    feb, 2020
    Messaggi:
    19

    Re: No canvas

    Ho provato con il div, la tabella mi viene, ma adesso come faccio ad impostare un immagine diversa per ogni cella?
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: No canvas

    sedo96 ha scritto:

    Ho provato con il div, la tabella mi viene, ma adesso come faccio ad impostare un immagine diversa per ogni cella?
    Definisci uno stile diverso per ogni diversa rappresentazione del <div> (es. vuoto, giocatore, barile, ecc.) e assegnalo all'elemento in base allo stato che assume nella struttura dati (l'array) che ti sei creato con lo stato del gioco.

    Vedi un problema simile al tuo a cui ho risposto ieri.
  • S
    sedo96
    Pochi posts
    Iscritto da
    feb, 2020
    Messaggi:
    19

    Re: No canvas

    Io non mi sono creato un array con lo stato del gioco ma 4 matrici 7x7 (una per ogni livello) in cui identifico la mappa iniziale all'avvio di ogni livello (? il muro, P il protagonista, $ scatole e O la meta)... Poi, come ho scritto nel codice, assegno ad ogni nodo il simbolo corrispondente... Non ho capito la tua soluzione, scusami, potresti rispiegarmela?
    Avevo provato, sempre nella create_Table(), con uno switch e assegnare un immagine per ogni simbolo, ma non torna.. Grazie mille
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: No canvas

    sedo96 ha scritto:

    Io non mi sono creato un array con lo stato del gioco ma 4 matrici 7x7 (una per ogni livello)
    Array o matrici, scegli tu quella che preferisci.

    sedo96 ha scritto:

    Non ho capito la tua soluzione, scusami, potresti rispiegarmela?
    Mi devi dire cosa non hai capito, perché altrimenti non saprei cosa rispiegarti.
  • S
    sedo96
    Pochi posts
    Iscritto da
    feb, 2020
    Messaggi:
    19

    Re: No canvas

    Non ho capito come far associare nel css un div diverso per ogni cella
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: No canvas

    sedo96 ha scritto:

    Non ho capito come far associare nel css un div diverso per ogni cella
    No, devi creare un <div> all'interno di ogni cella.

    Nel foglio di stile CSS definirai uno stile di base da applicare a tutti i DIV in modo che appaiano uguali nelle caratteristiche in comune, ad esempio le dimensioni quadrate, tipo
    
div {
  height: 100px;
  width: 100px;
}
    Poi dovrai creare uno stile specifico per ciascuno stato che può assumere il DIV in base al suo stato, tipo
    
div.player {
  background-image: url('player.png');
}
    Ciascun <div> avrà quindi lo "stile di base" e lo stile in base alla classe (es. player) che viene applicata tramite JavaScript, come da link che ti ho passato.

    Prova ad approfondire e sperimentare.
  • S
    sedo96
    Pochi posts
    Iscritto da
    feb, 2020
    Messaggi:
    19

    Re: No canvas

    Ok grazie mille, provo
  • S
    sedo96
    Pochi posts
    Iscritto da
    feb, 2020
    Messaggi:
    19

    Re: No canvas

    Ciao, ci sono riuscito
    Ora ho una matrice 7x7 in cui in ogni cella ho o i disegni del muro o i disegni delle scatole o lo sfondo o il disegno del protagonista oppure il disegno della meta dove dovrei portare le scatole. Adesso devo iniziare ad impostare i movimenti del protagonista e delle scatole. Secondo te come dovrei partire? Facendo una funzione che mi identifica la cella del protagonista e iniziando a spostare questa cella? Se sposto una cella mi dovrebbe spostare anche la foto no?
    E' la prima volta che faccio un progetto del genere e sono un po' acerbo..Grazie mille
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: No canvas

    sedo96 ha scritto:

    Adesso devo iniziare ad impostare i movimenti del protagonista e delle scatole. Secondo te come dovrei partire? Facendo una funzione che mi identifica la cella del protagonista e iniziando a spostare questa cella? Se sposto una cella mi dovrebbe spostare anche la foto no?
    No, io non sposterei le celle, ma cambierei il valore che indica cosa va raffigurato in una specifica cella, e senza spostarla, in base a questo stato, attribuirei la classe che corrisponde allo stile specifico che consente di visualizzare nella cella il contenuto atteso.

    In breve, il protagonista non si sposta, ma è la cella che viene impostata (tramite attributo class, ad esempio) con lo stile appropriato che indica se è vuota, se c'è il personaggio dentro oppure se c'è la scatola o altro.

    I movimenti del personaggio vengono gestiti modificando la matrice, ad esempio spostando il personaggio da un elemento della matrice all'altra, e poi "spalmando" questi dati sulle celle della tabella affinché rappresentino la situazione aggiornata del gioco.

    Questo approccio di spostare dati invece di spostare elementi della pagina è più facile e veloce da applicare e gestire.

    Ciao!
  • S
    sedo96
    Pochi posts
    Iscritto da
    feb, 2020
    Messaggi:
    19

    Re: No canvas

    Quindi:
    var level1 = [
    ["?", "?", " ", " ", " ", " ", "?"],
    ["?", " ", "P", " ", "$", " ", " "],
    ["?", " ", " ", " ", "?", "?", " "],
    ["?", "?", " ", " ", "?", " ", " "],
    ["O", " ", " ", " ", "$", " ", " "],
    ["O", " ", " ", " ", " ", " ", "?"],
    ["?", " ", "?", "?", "?", "?", "?"],
    ];

    Questa è la mia matrice iniziale. Se ho capito bene te diresti di gestire il P: 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?
    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?
Devi accedere o registrarti per scrivere nel forum
30 risposte