1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Objekteigenschaften aus einem 2 dimensionalen Array referenzieren

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von MaxBiest, 15. Juli 2017.

  1. MaxBiest

    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:
    Code (Javascript):
    1. var CountAus=0;
    2. function BlockAus(){
    3.    CountAus++;
    4.    this.ID=CountAus;
    5.    this.Betretbar=false;
    6.    this.Ground="grafic\grounds\Aus.jpg";
    7. }
    2. ich habe ein 2 dimensionales Array aufgebaut, indem jedesmal ein Objekt erstellt wird:
    Code (Javascript):
    1. var DATA_TOWN_CLOVER   =   [[[new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()]],
    2.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    3.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    4.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    5.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    6.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    7.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    8.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    9.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    10.                             [[new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()]]
    11.                            ];
    3. Diese Objekte habe ich in CurrentMapData gesetzt:
    Code (Javascript):
    1. 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 :) ):
    Code (Javascript):
    1.            function SetMap(){
    2.                var z1=0;
    3.                var z2=0;
    4.                while(z1<CurrentMapData.length){
    5.                    while(z2<=CurrentMapData[z1].length){
    6.                        var temp="X"+z2+"Y"+z1;
    7.                        //alert(temp);
    8.                        var tempObj=CurrentMapData[z1][z2];    //Referenziert das Objekt
    9.                        var tempObjGround=tempObj.Ground;        //Sollte die Eigenschaft Ground referenzieren
    10.                        alert(tempObjGround);                    //Sollte den im Objekt als Eigenschaft hinterlegten Pfad der Grafik ausgeben!
    11.                        //Gibt beim alert nur undefiend aus!
    12.                        document.getElementsByTagName(temp)[0].innerHTML = "<img height='50' width='50' src='"+tempGround+"'></img>";
    13.                        z2++;
    14.                    }
    15.                    z1++;
    16.                }
    17.            }
    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).
     
  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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 (Text):
    1. 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 (Text):
    1. while(z2 < CurrentMapData[z1].length)
    lauten.

    Weiter kommt mir dieses merkwürdig vor:
    Code (Text):
    1. 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.
     
    MaxBiest gefällt das.
  3. MaxBiest

    MaxBiest Grünschnabel

    Vielen Dank für die schnelle Antwort.
    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.

    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.

    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:
    Code (HTML5):
    1.    <head>
    2.        <meta charset="UTF-8">
    3.        <title>
    4.            Winning Losers by Madam
    5.        </title>
    6.        <link type="text/css" href="CSS/divs.css" rel="stylesheet">
    7.        <script src="DATA/GameObjects/Enemy.js"></script>
    8.        <script src="DATA/GameObjects/Spieler.js"></script>
    9.        <script src="DATA/MapObjects/Aus.js"></script>
    10.        <script src="DATA/MapObjects/Gras.js"></script>
    11.        <script src="DATA/Maps/CloverTown.js"></script>
    12.        <script type="text/javascript">
    13.            var temp;
    14.            var Gamer;
    15.            var CurrentMapData=DATA_TOWN_CLOVER;
    16.            
    17.            function BuildPage(){
    18.                SetPlayer();
    19.                SetMap();
    20.            }
    21.            function SetPlayer(){
    22.                Gamer = new Player();
    23.            }
    24.            function SetMapData(){
    25.                
    26.            }
    27.            function SetMap(){
    28.                var z1=0;
    29.                var z2=0;
    30.                while(z1<CurrentMapData.length){
    31.                   while(z2<CurrentMapData[z1].length){
    32.                       var temp="X"+z2+"Y"+z1;
    33.                       var tempObj=CurrentMapData[z1][z2][0];    //Referenziert das Objekt
    34.                       var tempObjGround=tempObj.Ground;        //Sollte die Eigenschaft Ground referenzieren
    35.                       document.getElementsByTagName(temp)[0].innerHTML = "<img height='50' width='50' src='"+tempObjGround+"'></img>";
    36.                        z2++;
    37.                    }
    38.                    z1++;
    39.                    z2=0;
    40.                }
    41.            }
    42.            var temp=[[],[]];
    43.            var Gerhart = new Enemy(1,1,"Gerhart","Stringer",1,0,10,10,10,10,1,1,1,1,1,0,temp);
    44.            
    45.        </script>
    46.    </head>
    47.    <body onload="BuildPage()">
    48.        <div id="ALLES">
    49.            <div id="MENUE">
    50.                <h3>Spielmenü:</h3>
    51.                <CHARACTER>
    52.                </CHARACTER>
    53.                <INVENTORY>
    54.                </INVENTORY>
    55.                <SPELLBOOK>
    56.                </SPELLBOOK>
    57.                <SAVE>
    58.                </SAVE>
    59.                <CLOSE>
    60.                </CLOSE>
    61.            </div>
    62.            <div id="SPIELFELD"border="5px solid silver">
    63.                <X0Y0></X0Y0>   <X1Y0></X1Y0>   <X2Y0></X2Y0>   <X3Y0></X3Y0>   <X4Y0></X4Y0>   <X5Y0></X5Y0>   <X6Y0></X6Y0>   <X7Y0></X7Y0>   <X8Y0></X8Y0>   <X9Y0></X9Y0>
    64.                
    65.                <X0Y1></X0Y1>   <X1Y1></X1Y1>   <X2Y1></X2Y1>   <X3Y1></X3Y1>   <X4Y1></X4Y1>   <X5Y1></X5Y1>   <X6Y1></X6Y1>   <X7Y1></X7Y1>   <X8Y1></X8Y1>   <X9Y1></X9Y1>
    66.                
    67.                <X0Y2></X0Y2>   <X1Y2></X1Y2>   <X2Y2></X2Y2>   <X3Y2></X3Y2>   <X4Y2></X4Y2>   <X5Y2></X5Y2>   <X6Y2></X6Y2>   <X7Y2></X7Y2>   <X8Y2></X8Y2>   <X9Y2></X9Y2>
    68.                
    69.                <X0Y3></X0Y3>   <X1Y3></X1Y3>   <X2Y3></X2Y3>   <X3Y3></X3Y3>   <X4Y3></X4Y3>   <X5Y3></X5Y3>   <X6Y3></X6Y3>   <X7Y3></X7Y3>   <X8Y3></X8Y3>   <X9Y3></X9Y3>
    70.                
    71.                <X0Y4></X0Y4>   <X1Y4></X1Y4>   <X2Y4></X2Y4>   <X3Y4></X3Y4>   <X4Y4></X4Y4>   <X5Y4></X5Y4>   <X6Y4></X6Y4>   <X7Y4></X7Y4>   <X8Y4></X8Y4>   <X9Y4></X9Y4>
    72.                
    73.                <X0Y5></X0Y5>   <X1Y5></X1Y5>   <X2Y5></X2Y5>   <X3Y5></X3Y5>   <X4Y5></X4Y5>   <X5Y5></X5Y5>   <X6Y5></X6Y5>   <X7Y5></X7Y5>   <X8Y5></X8Y5>   <X9Y5></X9Y5>
    74.                
    75.                <X0Y6></X0Y6>   <X1Y6></X1Y6>   <X2Y6></X2Y6>   <X3Y6></X3Y6>   <X4Y6></X4Y6>   <X5Y6></X5Y6>   <X6Y6></X6Y6>   <X7Y6></X7Y6>   <X8Y6></X8Y6>   <X9Y6></X9Y6>
    76.                
    77.                <X0Y7></X0Y7>   <X1Y7></X1Y7>   <X2Y7></X2Y7>   <X3Y7></X3Y7>   <X4Y7></X4Y7>   <X5Y7></X5Y7>   <X6Y7></X6Y7>   <X7Y7></X7Y7>   <X8Y7></X8Y7>   <X9Y7></X9Y7>
    78.                
    79.                <X0Y8></X0Y8>   <X1Y8></X1Y8>   <X2Y8></X2Y8>   <X3Y8></X3Y8>   <X4Y8></X4Y8>   <X5Y8></X5Y8>   <X6Y8></X6Y8>   <X7Y8></X7Y8>   <X8Y8></X8Y8>   <X9Y8></X9Y8>
    80.                
    81.                <X0Y9></X0Y9>   <X1Y9></X1Y9>   <X2Y9></X2Y9>   <X3Y9></X3Y9>   <X4Y9></X4Y9>   <X5Y9></X5Y9>   <X6Y9></X6Y9>   <X7Y9></X7Y9>   <X8Y9></X8Y9>   <X9Y9></X9Y9>
    82.            </div>
    83.        </div>
    84.    </body>
    85. </html>
    CloverTown.js:
    Code (Javascript):
    1. //DATA FOR THE BEGINNING TOWN:
    2. //      
    3. var DATA_TOWN_CLOVER   =   [[[new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()]],
    4.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    5.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    6.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    7.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    8.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    9.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    10.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    11.                             [[new BlockAus()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockGras()],   [new BlockAus()]],
    12.                             [[new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()],   [new BlockAus()]]
    13.                            ];
    Aus.js:
    Code (Javascript):
    1. var CountAus=0;
    2. function BlockAus(){
    3.    CountAus++;
    4.    this.ID=CountAus;
    5.    this.Betretbar=false;
    6.    this.Ground="grafic/grounds/Aus.jpg";
    7. }
    Gras.js:
    Code (Javascript):
    1. var CountGras=0;
    2. function BlockGras(){
    3.    CountGras++;
    4.    this.ID=CountGras;
    5.    this.Betretbar=true;
    6.    this.Ground="grafic/grounds/Gras.jpg";
    7. }
    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
     
  4. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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.
     
    MaxBiest gefällt das.
  5. MaxBiest

    MaxBiest Grünschnabel

    Stimmt schon. Da die Felder eh statisch sind, werde ich es auf ID ändern. Danke nochmals, manchmal bin ich einfach zu blind ;).
     
Die Seite wird geladen...