Tablica obiektów i błąd podczas przechodznia po niej pętlą

0

Witam, chcę się z wami podzielić moim problemem licząc na to, że ktoś z was mi pomoże. Najpierw wkleję kod, potem wyjaśnię co i jak, a na koniec powiem w czym problem.

<html>  
<head>  
  <script>
      //zmienne globalne
      
      //tworzenie tablicy glownej
      var squares = new square();
      for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            squares[x,y] = new square();
            squares[x,y].setSquare(x*10, y*10, "rgb(0,0,0)");
        }
    }
    
      function start() {            
          draw();
          
        //obsługa myszy
        canvas.onmousedown = function(e) {
        }
        canvas.onmouseup = function(e) {
        }
        canvas.onmousemove = function(e) {
            if (x == null || y == null) {
                return;
            }
        }
        //znalezienie komórki
        function find(x, y) {
        }
    }
      
    function draw() {  
        var canvas = document.getElementById("canvas");  
        var ctx = canvas.getContext("2d");  
        
        for (var i=0; i<10; i++) {
            for (var j=0; j<10; j++) {
                ctx.fillStyle = squares[i,j].color;
                ctx.fillRect (squares[i,j].positionX, squares[i,j].positionY, squares[i,j].width, squares[i,j].height);  
                //alert(squares[i,j].positionX + "," +squares[i,j].positionY);
            }
        }  
    }
    
    //obiekt square
    function square() {
        //pola
        this.positionX = null;
        this.positionY = null;
        this.width = 10;
        this.height = 10;
        this.color = null;
        
        this.setSquare = function(aX, aY, aColor) {
            this.positionX = aX;
            this.positionY = aY;
            this.color = aColor;
        }
    }
    

  </script>
</head>  
<body onload="start();">  
   <canvas id="canvas" width="1000" height="1000"></canvas>  
</body>

Jak widać tworzę obiekt Square. Tworzę ich tablicę i wywołuję funkcję draw. Problem w tym, że moja macierz obiektów zamiast mieć współrzędne po kolei (0,10), (0,20), (0,30)...(90,70),(90,80),(90,90) ma następujące (90,0),(90,10),(90,20),(90,30) ... (90,70),(90,80),(90,90). To jest macierz, więc w tym przypadku złym kilka obiektów na te same współrzędne, co jest strasznym błędem. Proszę o pomoc!

0

Korzystasz ze złego zapisu tablicowego dla tablic dwuwymiarowych! W JavaScripcie nie ma czegoś takiego jak tablica[i, j] (przecinek to tutaj nie oddzielacz drugiego wymiaru tablicy, tylko zwykły separator wyrażeń, zwracający zawsze ostatnie wyrażenie -- tu będzie to j).

Używaj wyłącznie zapisu tablica[i][j]. Bez przecinka. Każdy indeks musi mieć swój osobny nawias kwadratowy.

0

Wielkie dzięki, ale gdzieś chyba jeszcze mam w takim razie błąd, bo po poprawieniu kodu tak jak zasugerowałeś kod nadal nie działa.

0

Udało mi się jakoś rozwiązać problem. Kod wygląda tak.

 <html>  
<head>  
  <script>
      //zmienne globalne
 
      //tworzenie tablicy glownej
      var squares = new Array();
      for (var x = 0; x < 10; x++) {
      	squares[x] = new Array();
        for (var y = 0; y < 10; y++) {
            squares[x][y] = new square();
            squares[x][y].setSquare(x*10, y*10, "rgb(0,0,0)");
        }
    }
 
      function start() {            
          draw();
 
        //obsługa myszy
        canvas.onmousedown = function(e) {
        }
        canvas.onmouseup = function(e) {
        }
        canvas.onmousemove = function(e) {
            if (x == null || y == null) {
                return;
            }
        }
        //znalezienie komórki
        function find(x, y) {
        }
    }
 
    function draw() {  
        var canvas = document.getElementById("canvas");  
        var ctx = canvas.getContext("2d");  
 
        for (var i=0; i<10; i++) {
            for (var j=0; j<10; j++) {
                ctx.fillStyle = squares[i][j].color;
                ctx.fillRect (squares[i][j].positionX, squares[i][j].positionY, squares[i][j].width, squares[i][j].height);  
            }
        }  
    }
 
    //obiekt square
    function square() {
        //pola
        this.positionX = null;
        this.positionY = null;
        this.width = 10;
        this.height = 10;
        this.color = null;
 
        this.setSquare = function(aX, aY, aColor) {
            this.positionX = aX;
            this.positionY = aY;
            this.color = aColor;
        }
    }
 
 
  </script>
</head>  
<body onload="start();">  
   <canvas id="canvas" width="1000" height="1000"></canvas>  
</body>

1 użytkowników online, w tym zalogowanych: 0, gości: 1