Tabelle als Karte aus md. Array. von Griever, 06.04.2006 10:26

Tabelle als Karte aus md. Array.

Griever 06.04.2006 08:56

javascript

Hi.

Ich habe mir mal etwas ausgedacht. Ich habe ein Array:

  
var posx=0,posy=0;  
var karte = new Array();  
karte[0]=new Array();  
// Feld farbe, Passierbar, Formeln (Splitting "|");  
karte[0][0] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][1] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][2] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][3] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][4] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][5] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][6] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][7] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][8] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][9] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[0][10] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][0] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][1] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][2] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][3] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][4] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][5] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][6] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][7] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][8] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][9] = new Array("#000000",true,"open_shop()|open_inn()");  
karte[1][10] = new Array("#000000",true,"open_shop()|open_inn()");  
// usw ...

und gebe dieses via Funktion von der Aktuellen Position (posx,posy) in einer Tabelle aus:

  
document.write("<table style=\"table-layout:fixed;\" cellspacing='0' cellpadding='0' border='0'>")  
for(var i = posx-2;i<=posx+2;i++)  
{  
  document.write("<tr>")  
  for(var j = posy-2;j<=posy+2;j++)  
  {  
    if(karte[i]&&karte[i][j])  
    document.write("<td style=\"width:20px;height:20px;background:"+karte[i][j][0]+";\">&nbsp;</td>")  
    else  
    document.write("<td style=\"width:20px;height:20px;background:red;\">&nbsp;</td>")  
  }  
  document.write("</tr>")  
}  
document.write("</table>")

Natürlich habe ich bei meinem Script schon die Bewegen-Funktion via Berechnung angeben lassen, dass nur die inneren 9 Felder zur Bewegung dienen.

Nun möchte ich fragen, ob man das, was hier steht, auch kürzer/sparsamer machen kann. Ich selbst habe z. B. noch nie mit Nodes oder so gearbeitet.

Mfg
Griever

Beitrag melden

– Informationen zu den Bewertungsregeln

Tabelle als Karte aus md. Array.

Plutonium 06.04.2006 09:18

javascript

−1 Informationen zu den Bewertungsregeln

kürzer ja aber es könnte dann sein wenn es komprimiert ist nicht einwandfrei funktuniert.

Beitrag melden

−1 Informationen zu den Bewertungsregeln

Tabelle als Karte aus md. Array.

Griever 06.04.2006 10:26

javascript

– Informationen zu den Bewertungsregeln

Ich könnte ja mal die komplette Schleife, die ich erstellt habe, hier posten. Diese ist jedoch ziemlich umfangreich ...

MFG
Griever

Beitrag melden

– Informationen zu den Bewertungsregeln

Tabelle als Karte aus md. Array.

Griever 06.04.2006 10:38

javascript

– Informationen zu den Bewertungsregeln

  
// Cardsystems.js created by Ggriever  
var posx=0,posy=0;  
var karte = new Array();  
karte[0] = new Array();  
karte[0][0] = new Array("#00DF00",false,"");  
karte[0][1] = new Array("#00DF00",false,"");  
karte[0][2] = new Array("#00DF00",false,"");  
karte[0][3] = new Array("#00DF00",false,"");  
karte[0][4] = new Array("#00DF00",false,"");  
karte[0][5] = new Array("#00DF00",false,"");  
karte[1] = new Array();  
karte[1][0] = new Array("#00DF00",false,"");  
karte[1][1] = new Array("#00DF00",false,"");  
karte[1][2] = new Array("#00DF00",false,"");  
karte[1][3] = new Array("#00DF00",false,"");  
karte[1][4] = new Array("#00DF00",false,"");  
karte[1][5] = new Array("#00DF00",false,"");  
karte[2] = new Array();  
karte[2][0] = new Array("#00DF00",false,"");  
karte[2][1] = new Array("#00DF00",false,"");  
karte[2][2] = new Array("#00DF00",false,"");  
karte[2][3] = new Array("#00DF00",false,"");  
karte[2][4] = new Array("#00DF00",false,"");  
karte[2][5] = new Array("#00DF00",false,"");  
karte[3] = new Array();  
karte[3][0] = new Array("#00DF00",false,"");  
karte[3][1] = new Array("#00DF00",false,"");  
karte[3][2] = new Array("#00DF00",false,"");  
karte[3][3] = new Array("#00DF00",false,"");  
karte[3][4] = new Array("#00DF00",false,"");  
karte[3][5] = new Array("#00DF00",false,"");  
karte[4] = new Array();  
karte[4][0] = new Array("#00DF00",false,"");  
karte[4][1] = new Array("#00DF00",false,"");  
karte[4][2] = new Array("#00DF00",false,"");  
karte[4][3] = new Array("#00DF00",false,"");  
karte[4][4] = new Array("#00DF00",false,"");  
karte[4][5] = new Array("#00DF00",false,"");  
var f = window.open("about:blank","","");  
f.document.write("<table cellspacing=0 cellpadding=0 border=0 style='table-layout:fixed;'>")  
for(var i = 0;i<karte.length;i++)  
{  
  f.document.write("<tr>")  
  if(karte[posx-(i-2)]&&karte[posx-(i-2)][posy-2])  f.document.write("<td style=\"width:12px;height:12px;background-color:"+karte[posx-(i-2)][posy-2][0]+";\">&nbsp;</td>");else f.document.write("<td style=\"width:12px;height:12px;background-color:black;\">&nbsp;</td>")  
  if(karte[posx-(i-2)]&&karte[posx-(i-2)][posy-1])  f.document.write("<td style=\"width:12px;height:12px;background-color:"+karte[posx-(i-2)][posy-1][0]+";\">&nbsp;</td>");else f.document.write("<td style=\"width:12px;height:12px;background-color:black;\">&nbsp;</td>")  
  if(karte[posx-(i-2)]&&karte[posx-(i-2)][posy])    f.document.write("<td style=\"width:12px;height:12px;background-color:"+karte[posx-(i-2)][posy][0]+";\">&nbsp;</td>");else f.document.write("<td style=\"width:12px;height:12px;background-color:black;\">&nbsp;</td>")  
  if(karte[posx-(i-2)]&&karte[posx-(i-2)][(posy+1)])f.document.write("<td style=\"width:12px;height:12px;background-color:"+karte[posx-(i-2)][(posy+1)][0]+";\">&nbsp;</td>");else f.document.write("<td style=\"width:12px;height:12px;background-color:black;\">&nbsp;</td>")  
  if(karte[posx-(i-2)]&&karte[posx-(i-2)][(posy+2)])f.document.write("<td style=\"width:12px;height:12px;background-color:"+karte[posx-(i-2)][(posy+2)][0]+";\">&nbsp;</td>");else f.document.write("<td style=\"width:12px;height:12px;background-color:black;\">&nbsp;</td>")  
  f.document.write("</tr>")  
}  
f.document.write("</table>")

Natürlich ist dieser Code noch nicht wirklich vollständig. Da kommt dann noch die Bewegungsfunktion hinzu, die aktuelle Position wird angezeigt. Evtl. Gebäude werden via PNG-bildchen draufgelegt usw. Dabei muss ich nun noch bedenken, wie ich die Karte umdrehe ...

Aber derzeit kommt es mir nur auf die Länge bzw. die Größe des Scriptes an. Kann man das, was ich jetzt gepostet hab, noch irgendwo kürzen?

MfG
Griever

PS: Wie kann man einen Zeilenumbruch verhindern?

Beitrag melden

– Informationen zu den Bewertungsregeln

Tabelle als Karte aus md. Array.
eddi Homepage des Autors 06.04.2006 11:11

javascript
– Informationen zu den Bewertungsregeln
Hallo,
```
  
// Cardsystems.js created by Ggriever  
var posx=0,posy=0;  
var karte = [];  
for(var i=0;i<5;i++){  
   karte[i]=[];  
   for(var j=0;j<6;j++)  
      karte[i][j]=["#00DF00",false,""];  
}  
  
var f = window.open("about:blank");  
f.document.write("<table cellspacing=0 cellpadding=0 border=0 style='table-layout:fixed;' id=\"js_table\">")  
for(var i = 0;i<karte.length;i++)  
{  
  f.document.write("<tr>")  
  if(karte[posx-(i-2)] && karte[posx-(i-2)][posy-2])  
     f.document.write("<td style=\"background:"+karte[posx-(i-2)][posy-2][0]+"\">&nbsp;</td>");  
  else  
     f.document.write("<td>&nbsp;</td>");  
  
  if(karte[posx-(i-2)] && karte[posx-(i-2)][posy-1])  
     f.document.write("<td style=\"background:"+karte[posx-(i-2)][posy-1][0]+"\">&nbsp;</td>");  
  else  
     f.document.write("<td>&nbsp;</td>");  
  
  if(karte[posx-(i-2)] && karte[posx-(i-2)][posy])  
     f.document.write("<td style=\"background:"+karte[posx-(i-2)][posy][0]+"\">&nbsp;</td>");  
  else  
     f.document.write("<td>&nbsp;</td>");  
  
  if(karte[posx-(i-2)] && karte[posx-(i-2)][(posy+1)])  
     f.document.write("<td style=\"background:"+karte[posx-(i-2)][(posy+1)][0]+"\">&nbsp;</td>");  
  else  
     f.document.write("<td>&nbsp;</td>");  
  
  if(karte[posx-(i-2)] && karte[posx-(i-2)][(posy+2)])  
     f.document.write("<td style=\"background:"+karte[posx-(i-2)][(posy+2)][0]+"\">&nbsp;</td>");  
  else  
     f.document.write("<td>&nbsp;</td>");  
  
  f.document.write("</tr>")  
}  
f.document.write("</table>")  
```
```
  
table#id_table td {width:12px;height:12px;background:#000}  
```
Gruß aus Berlin!
eddi
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Tabelle als Karte aus md. Array.
  
  Griever 06.04.2006 11:40
  
  javascript
  – Informationen zu den Bewertungsregeln
  Hallo,
  
  [code lang=javascript]
  // Cardsystems.js created by Ggriever
  var posx=0,posy=0;
  var karte = [];
  for(var i=0;i<5;i++){
     karte[i]=[];
     for(var j=0;j<6;j++)
        karte[i][j]=["#00DF00",false,""];
  }
  
  Eine Schleife wollte ich daraus nicht machen. Die Inhalte sind hier nur als Demo gleich geblieben. Es soll ja eine, wie die variable schon sagt, karte werden.
  Da ist eine Schleife ungünstig.
  
  var f = window.open("about:blank");
  f.document.write("<table cellspacing=0 cellpadding=0 border=0 style='table-layout:fixed;' id="js_table">")
  for(var i = 0;i<karte.length;i++)
  {
    f.document.write("<tr>")
    if(karte[posx-(i-2)] && karte[posx-(i-2)][posy-2])
       f.document.write("<td style="background:"+karte[posx-(i-2)][posy-2][0]+""> </td>");
    else
  
  Das ist ok. Die Styleangaben in <td waren berechtigt. Die legen die Größe der Zelle fest.
  
  f.document.write("<td> </td>");
  
  Aber das nicht. Dieses feld soll nicht leer und transparent sein. Es soll sogesagt einen Rand erzeugen. Die ganzen Style-Angaben waren schon korrekt, damit die Tabelle immer exakt gleich groß bleibt.
  
  Aber danke.
  
  Mfg
  Griever
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Tabelle als Karte aus md. Array.
    
    eddi Homepage des Autors 06.04.2006 11:48
    
    javascript
    
    – Informationen zu den Bewertungsregeln
    Re:
    
    // ... for(var i = 0;i<karte.length;i++) { var t=''; f.document.write("<tr>") if(karte[posx-(i-2)]) for(var j=-2;j<3;j++) if(karte[posx-(i-2)][posy-j]){ t=' style="background:'+karte[posx-(i-2)][posy-j][0]+'"'); break; } f.document.write("<td"+t+"> </td>"); f.document.write("</tr>") } f.document.write("</table>")
    
    Aber das nicht. Dieses feld soll nicht leer und transparent sein. Es soll sogesagt einen Rand erzeugen. Die ganzen Style-Angaben waren schon korrekt, damit die Tabelle immer exakt gleich groß bleibt.
    
    Daher hatte ich extra einen StyleSheet notiert, der Dir das einkürzt.
    
    Gruß aus Berlin!
    eddi
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Tabelle als Karte aus md. Array.
      
      Griever 06.04.2006 12:08
      
      javascript
      
      – Informationen zu den Bewertungsregeln
      
      Hi.
      
      // ... for(var i = 0;i<karte.length;i++) { var t=''; f.document.write("<tr>") if(karte[posx-(i-2)]) for(var j=-2;j<3;j++) if(karte[posx-(i-2)][posy-j]){ t=' style="background:'+karte[posx-(i-2)][posy-j][0]+'"'); break; } // Ähm. Ich wollte ein 5x5 großes Feld anzeigen und keine Spalte. // So wäre es nur eine 5 Blöcke hohe Spalte, wobei das noch nach // Unten geht, wegen den Weggelassenen Zellen bei der Abfrage. f.document.write("<td"+t+"> </td>"); f.document.write("</tr>") } f.document.write("</table>")
      
      Der Code hilft mir garnicht weiter. Da hat man jetzt glaub ich zu viel gekürzt.
      
      Geh mal auf freewar.de Screenshot, dort ist unten rechts so eine schöne karte, wie ich sie (nur ohne Bildchen) haben möchte.
      
      Daher hatte ich extra einen StyleSheet notiert, der Dir das einkürzt.
      
      Stimmt. Styles lassen sich da gut verwenden.
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
      1. Tabelle als Karte aus md. Array.
        
        eddi Homepage des Autors 06.04.2006 12:16
        
        javascript
        
        – Informationen zu den Bewertungsregeln
        
        Re:
        
        // ...
        
        for(var i = 0;i<karte.length;i++)
        {
          f.document.write("<tr>")
          if(karte[posx-(i-2)])
        
        for(var j=-2;j<3;j++){
                  var t='';
        
        if(karte[posx-(i-2)][posy-j]) t=' style="background:'+karte[posx-(i-2)][posy-j][0]+'"');
        
        f.document.write("<td"+t+"> </td>");
            }
        
        f.document.write("</tr>")
        }
        f.document.write("</table>")
        
        Gruß aus Berlin!
        eddi
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
Tabelle als Karte aus md. Array.
at 09.04.2006 11:08

javascript
– Informationen zu den Bewertungsregeln
Hallo.

PS: Wie kann man einen Zeilenumbruch verhindern?

Man fasse sich kurz.
MfG, at
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Griever: Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.

Tabelle als Karte aus md. Array.