Newsgroup: it.comp.lang.javascript
Titolo: muovere matrice

sono alle prese con questa cosa:
 
http://pastebin.com/BhQxwZbN
 
 
vorei spostare l'array x e y di +1 e -1 in modo che si possa
avere l'effetto su e giu e sinistra destra
 
ho degli errori quando sono in mezzo alla matrice
ovvero quando ho l'ultimo elemento seguito dal primo
dovrebbe essere a scorrimento continuo infinito
 
qualche idea e' una base x mappe
 

 qualche idea e' una base x mappe
 
In tal caso dovresti cambiare approccio. Ci sono troppe operazioni DOM
che aggiungono / rimuovono elementi (meno lavori col DOM più
l'applicazione è veloce); in più il float andrebbe rimosso (dovresti
lavorare con posizione assoluta) per la stessa ragione.
 
Solitamente quando si sviluppa qualcosa tile based (vedi Google Maps o
videogiochi in generis in HTML) hai un numero di tile (nel tuo caso
fisso, nel caso di Google Maps può variare in base al resize) che non
cambi mai. Nel tuo caso, ad esempio, inizializzeresti la mappa come 3x3.
A quel punto lui ti crea 9 elementi, (o 16 nel caso tu voglia avere il
"panning", in quanto hai bisogno di un bordo di tile addizionali per il
buffering) di tag IMG (assumendo tu debba visualizzare immagini).
Questi elementi non vengono più creati o rimossi – a meno di resize,
appunto – ma solo aggiornati. Nel caso di immagini, cambiando `src`.
 
Nel caso di un videogame, ad esempio, ti servirà solo un array in
memoria che tenga il tipo di immagini che vuoi disegnare, e una funzione
che ti aggiorna i `src` delle immagini in base al viewport della mappa
in memoria.
 
Quindi, hai una "mappa del mondo" e un viewport che visualizza la
porzione visualizzabile. Quello che farai, sarà semplicemente cambiare
le coordinate dal quale visualizzare la porzione in questione, senza
cambiare né il DOM (aggiungendo / rimuovendo nodi) né l'array in
questione. Per intenderci:
 
  <html>
    <style>
      .tile {
        position: absolute;
        width: 62px;
        height: 62px;
        border: 1px solid gray;
        background: silver;
      }
    </style>
    <body>
 
    </body>
    <script>
      var WorldMap = [
        "0", "1", "2", "3",
        "4", "5", "6", "7",
        "8", "9", "A", "B",
        "C", "D", "E", "F"
      ];
 
      var currX = 0, currY = 0, divs = [];
 
      function redraw() {
        for (var i = 0; i < 9; i++) {
          x = (i % 3 + currX) % 4;
          y = (0|i / 3 + currY) % 4;
 
          divs[i].textContent = WorldMap[x + y * 4];
        }
      }
 
      function init() {
        var body = document.body;
 
        var div, x, y;
 
        for (var i = 0; i < 9; i++) {
          x = i % 3;
          y = 0|i / 3;
 
          div = body.appendChild(document.createElement("div"));
          div.className = "tile";
          div.style.top = (y * 64) + "px";
          div.style.left = (x * 64) + "px";
          divs[i] = div;
        }
      }
 
      function right() {
        currX = currX + 1 % 4;
        redraw()
      }
 
      function left() {
        !~--currX && (currX = 3);
        redraw()
      }
 
      function down() {
        currY = currY + 1 % 4;
        redraw()
      }
 
      function up() {
        !~--currY && (currY = 3);
        redraw()
      }
 
      init();
      redraw();
 
    </script>
  </html>

  !~--currX &&  (currX = 3);
----^
 
Non hai resistito, eh?
 
Complimenti: un uso intelligente.
 

 Complimenti: un uso intelligente.
 
Grazie.
 

      0|i / 3 + currY
 
Ma questo non lo usavi (lo si usava) da tempo?
 
Peraltro, questione forse un po' peregrina, non lo trovi meno leggibile 
senza spaziature attorno al pipe?
 
Senza spazi a colpo d'occhio mi viene da confondere la precedenza tra 
operatori, ma magari sono io.
 

 senza spaziature attorno al pipe?
 
L'ho scritto apposta così per via della precedenza degli operatori. A
scriverlo:
 
    0 | i / 3 + currY
 
A colpo d'occhio facevo fatica a distinguere i gruppi, non si capiva chi
si applicava a cosa. Ho preferito:
 
    0|i / 3 + currY
 
Piuttosto che:
 
    0 | i/3+currY
 
Volendo, potrebbe forse essere più leggibile una semi spaziatura:
 
    0| i / 3 + currY
 
Ma non c'è obiettività in questo, il layout del codice è materia di
discussioni da decenni, e spesso non c'è una versione "corretta", è
questione di gusti personali. Un po' come il vecchio adagio "La bellezza
è negli occhi di chi guarda".

 è negli occhi di chi guarda".
 
Certo, è che i miei occhi vedono 0|i senza spazi come (0|i): buona 
quindi la semi spaziatura o un paio di parentesi chiarificatrici.