✔ Objekteigenschaften aus einem 2 dimensionalen Array referenzieren

M

MaxBiest

Grünschnabel
Guten Tag,

ich habe schon ein paar Beiträge gefunden, die in diese Richtung gehen, die mir aber nicht weiter geholfen haben. Also hoffe ich auf eure Erfahrung und frage mal direkt.
Habe in Javascript nur wenig erfahrung also habt Erbarmen mit mir :)

1. Ich habe ein Konstruktor für ein Block erstellt mit 3 Eigenschaften:
Javascript: 
var CountAus=0;
function BlockAus(){
   CountAus++;
   this.ID=CountAus;
   this.Betretbar=false;
   this.Ground="grafic\grounds\Aus.jpg";
}

2. ich habe ein 2 dimensionales Array aufgebaut, indem jedesmal ein Objekt erstellt wird:
Javascript: 
var DATA_TOWN_CLOVER   =   [[[new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()]]
                           ];

3. Diese Objekte habe ich in CurrentMapData gesetzt:
Javascript: 
var CurrentMapData=DATA_TOWN_CLOVER;

4. Diese sollen dann referenziert werden und deren Eigenschaft Ground soll den scr Attribut vom img Tag erstellen. Mit innerHTML in eigenen Tags dann in die Seite mit eingebracht und deren Grafiken sollen dann in einem 10x10 "Spielfeld" angezeigt werden (Ja ich versuche ne Art Abklatsch von Pokemon in Javascript zu erstellen :) ):
Javascript: 
           function SetMap(){
               var z1=0;
               var z2=0;
               while(z1<CurrentMapData.length){
                   while(z2<=CurrentMapData[z1].length){
                       var temp="X"+z2+"Y"+z1;
                       //alert(temp);
                       var tempObj=CurrentMapData[z1][z2];    //Referenziert das Objekt
                       var tempObjGround=tempObj.Ground;        //Sollte die Eigenschaft Ground referenzieren
                       alert(tempObjGround);                    //Sollte den im Objekt als Eigenschaft hinterlegten Pfad der Grafik ausgeben!
                       //Gibt beim alert nur undefiend aus!
                       document.getElementsByTagName(temp)[0].innerHTML = "<img height='50' width='50' src='"+tempGround+"'></img>";
                       z2++;
                   }
                   z1++;
               }
           }

Ich wäre sehr erfreut, wenn mir Jemand sagen könnte, was ich falsch mach oder was ich verbessern sollte.

By the way: Ich darf kein Canvas benutzen (Aufgrund einer Wette).
 
Genau genommen ist dein Array dreidimensional, wobei die dritte Stufe jeweils nur ein Element enthält. Lasse das überflüssige Klammernpaar weg, dann sollte zumindest die Adressierung funktionieren:
Code: 
var DATA_TOWN_CLOVER   =   [[new BlockAus(),   new BlockAus(),   new BlockAus(),   new BlockAus(), // usw.

Außerdem passt die obere Grenze bei deiner zweiten while-Schleife nicht, es muss wie bei der äußeren
Code: 
while(z2 < CurrentMapData[z1].length)
lauten.

Weiter kommt mir dieses merkwürdig vor:
Code: 
document.getElementsByTagName(temp)[0].innerHTML
denn die Funktion erwartet einer der durch HTML vordefinierten Tagnamen. Ich vermute, der Inhalt der Variable temp ist eher als ID gedacht.
 
Vielen Dank für die schnelle Antwort.
Sempervivum hat gesagt.:
Genau genommen ist dein Array dreidimensional, wobei die dritte Stufe jeweils nur ein Element enthält. Lasse das überflüssige Klammernpaar weg, dann sollte zumindest die Adressierung funktionieren:
Zum Vergrößern anklicken....
Die 3. Arraystufe hab ich übersehen, weswegen auch die referenzierung nicht geklappt hat :) . Nun funktioniert die Referenzierung, nachdem ich auch im Kontruktor die Backslashes durch Slashes ersetzt hab.

Sempervivum hat gesagt.:
Außerdem passt die obere Grenze bei deiner zweiten while-Schleife nicht, es muss wie bei der äußeren
Zum Vergrößern anklicken....
Habe ich auch übersehen. Desweiteren habe ich den zweiten Zähler nicht auf 0 zurückgesetzt, bevor ich in die nächste "Zeile" rein gesprungen bin.

Sempervivum hat gesagt.:
denn die Funktion erwartet einer der durch HTML vordefinierten Tagnamen. Ich vermute, der Inhalt der Variable temp ist eher als ID gedacht.
Zum Vergrößern anklicken....
Habe mir gedacht ich könnte mir dadurch Schreibarbeit sparen aber jetzt muss ich dank CSS doch umschreiben. Ohne CSS hatt es sogar funktioniert, sah nur scheiße aus :) .

Hier noch mein funktionierendes Skript zum rippen :D :
main.html:
HTML: 
<html>
   <head>
       <meta charset="UTF-8">
       <title>
           Winning Losers by Madam
       </title>
       <link type="text/css" href="CSS/divs.css" rel="stylesheet">
       <script src="DATA/GameObjects/Enemy.js"></script>
       <script src="DATA/GameObjects/Spieler.js"></script>
       <script src="DATA/MapObjects/Aus.js"></script>
       <script src="DATA/MapObjects/Gras.js"></script>
       <script src="DATA/Maps/CloverTown.js"></script>
       <script type="text/javascript">
           var temp;
           var Gamer;
           var CurrentMapData=DATA_TOWN_CLOVER;
           
           function BuildPage(){
               SetPlayer();
               SetMap();
           }
           function SetPlayer(){
               Gamer = new Player();
           }
           function SetMapData(){
               
           }
           function SetMap(){
               var z1=0;
               var z2=0;
               while(z1<CurrentMapData.length){
                   while(z2<CurrentMapData[z1].length){
                       var temp="X"+z2+"Y"+z1;
                       var tempObj=CurrentMapData[z1][z2][0];    //Referenziert das Objekt
                       var tempObjGround=tempObj.Ground;        //Sollte die Eigenschaft Ground referenzieren
                       document.getElementsByTagName(temp)[0].innerHTML = "<img height='50' width='50' src='"+tempObjGround+"'></img>";
                       z2++;
                   }
                   z1++;
                   z2=0;
               }
           }
           var temp=[[],[]];
           var Gerhart = new Enemy(1,1,"Gerhart","Stringer",1,0,10,10,10,10,1,1,1,1,1,0,temp);
           
       </script>
   </head>
   <body onload="BuildPage()">
       <div id="ALLES">
           <div id="MENUE">
               <h3>Spielmenü:</h3>
               <CHARACTER>
               </CHARACTER>
               <INVENTORY>
               </INVENTORY>
               <SPELLBOOK>
               </SPELLBOOK>
               <SAVE>
               </SAVE>
               <CLOSE>
               </CLOSE>
           </div>
           <div id="SPIELFELD"border="5px solid silver">
               <X0Y0></X0Y0>   <X1Y0></X1Y0>   <X2Y0></X2Y0>   <X3Y0></X3Y0>   <X4Y0></X4Y0>   <X5Y0></X5Y0>   <X6Y0></X6Y0>   <X7Y0></X7Y0>   <X8Y0></X8Y0>   <X9Y0></X9Y0>
               
               <X0Y1></X0Y1>   <X1Y1></X1Y1>   <X2Y1></X2Y1>   <X3Y1></X3Y1>   <X4Y1></X4Y1>   <X5Y1></X5Y1>   <X6Y1></X6Y1>   <X7Y1></X7Y1>   <X8Y1></X8Y1>   <X9Y1></X9Y1>
               
               <X0Y2></X0Y2>   <X1Y2></X1Y2>   <X2Y2></X2Y2>   <X3Y2></X3Y2>   <X4Y2></X4Y2>   <X5Y2></X5Y2>   <X6Y2></X6Y2>   <X7Y2></X7Y2>   <X8Y2></X8Y2>   <X9Y2></X9Y2>
               
               <X0Y3></X0Y3>   <X1Y3></X1Y3>   <X2Y3></X2Y3>   <X3Y3></X3Y3>   <X4Y3></X4Y3>   <X5Y3></X5Y3>   <X6Y3></X6Y3>   <X7Y3></X7Y3>   <X8Y3></X8Y3>   <X9Y3></X9Y3>
               
               <X0Y4></X0Y4>   <X1Y4></X1Y4>   <X2Y4></X2Y4>   <X3Y4></X3Y4>   <X4Y4></X4Y4>   <X5Y4></X5Y4>   <X6Y4></X6Y4>   <X7Y4></X7Y4>   <X8Y4></X8Y4>   <X9Y4></X9Y4>
               
               <X0Y5></X0Y5>   <X1Y5></X1Y5>   <X2Y5></X2Y5>   <X3Y5></X3Y5>   <X4Y5></X4Y5>   <X5Y5></X5Y5>   <X6Y5></X6Y5>   <X7Y5></X7Y5>   <X8Y5></X8Y5>   <X9Y5></X9Y5>
               
               <X0Y6></X0Y6>   <X1Y6></X1Y6>   <X2Y6></X2Y6>   <X3Y6></X3Y6>   <X4Y6></X4Y6>   <X5Y6></X5Y6>   <X6Y6></X6Y6>   <X7Y6></X7Y6>   <X8Y6></X8Y6>   <X9Y6></X9Y6>
               
               <X0Y7></X0Y7>   <X1Y7></X1Y7>   <X2Y7></X2Y7>   <X3Y7></X3Y7>   <X4Y7></X4Y7>   <X5Y7></X5Y7>   <X6Y7></X6Y7>   <X7Y7></X7Y7>   <X8Y7></X8Y7>   <X9Y7></X9Y7>
               
               <X0Y8></X0Y8>   <X1Y8></X1Y8>   <X2Y8></X2Y8>   <X3Y8></X3Y8>   <X4Y8></X4Y8>   <X5Y8></X5Y8>   <X6Y8></X6Y8>   <X7Y8></X7Y8>   <X8Y8></X8Y8>   <X9Y8></X9Y8>
               
               <X0Y9></X0Y9>   <X1Y9></X1Y9>   <X2Y9></X2Y9>   <X3Y9></X3Y9>   <X4Y9></X4Y9>   <X5Y9></X5Y9>   <X6Y9></X6Y9>   <X7Y9></X7Y9>   <X8Y9></X8Y9>   <X9Y9></X9Y9>
           </div>
       </div>
   </body>
</html>
CloverTown.js:
Javascript: 
//DATA FOR THE BEGINNING TOWN:
//       
var DATA_TOWN_CLOVER   =   [[[new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
                            [[new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()]]
                           ];
Aus.js:
Javascript: 
var CountAus=0;
function BlockAus(){
   CountAus++;
   this.ID=CountAus;
   this.Betretbar=false;
   this.Ground="grafic/grounds/Aus.jpg";
}
Gras.js:
Javascript: 
var CountGras=0;
function BlockGras(){
   CountGras++;
   this.ID=CountGras;
   this.Betretbar=true;
   this.Ground="grafic/grounds/Gras.jpg";
}
CSS, Enemy.js und Spieler.js lasse ich mal aus, da es nichts mit diesem Beitrag zu tun hat.

Vielen Dank nochmal.
Die Leichtsinnsfehler sind wohl immer die Schlimmsten :D
 
denn die Funktion erwartet einer der durch HTML vordefinierten Tagnamen. Ich vermute, der Inhalt der Variable temp ist eher als ID gedacht.
Habe mir gedacht ich könnte mir dadurch Schreibarbeit sparen aber jetzt muss ich dank CSS doch umschreiben. Ohne CSS hatt es sogar funktioniert, sah nur scheiße aus
Zum Vergrößern anklicken....
Dieses HTML verlangt danach, automatisch generiert zu werden. Dann beschränkt sich die Schreibarbeit auf ein paar Zeilen Code und wenn die stimmen, können keine Schreib- oder Copy/Paste-Fehler passieren.
 
Sempervivum hat gesagt.:
Dieses HTML verlangt danach, automatisch generiert zu werden. Dann beschränkt sich die Schreibarbeit auf ein paar Zeilen Code und wenn die stimmen, können keine Schreib- oder Copy/Paste-Fehler passieren.
Zum Vergrößern anklicken....
Stimmt schon. Da die Felder eh statisch sind, werde ich es auf ID ändern. Danke nochmals, manchmal bin ich einfach zu blind ;).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück