Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Funkcja rysująca elementy tabeli
Forum PHP.pl > Forum > Przedszkole
tzm
21.07.2014, 07:22:03
Znów coś pochrzaniłem, już chyba jaśniej nie potrafię napisać kodu sprawdzającego stan żywych i martwych komórek, wydaje mi się że kod jest o niebo czytelniejszy i lepszy od poprzedniej wersji którą męczyłem cały zeszły tydzień, lecz tutaj znów pojawia się problem...

Brakuje mi pomysłów jak rysować nowe elementy td dla komórek. Kod chyba nie wymaga komentarzy bo jest napisany po polsku specjalnie żeby ułatwić pomoc jeśli się znajdzie ktoś tak życzliwy i zerknie na te parę chwil...

Teoretycznie wykonuję w pętli funkcję ozywKomorke która niestety - ożywia mi tylko i wyłącznie jedną. Co źle robię? Serio już mam dość tego problemu ale poddawać się nie chce. 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.     <title>zycie</title>
  5.     <style>
  6.         #game{
  7.             background:red;
  8.             min-width:100px;
  9.             min-height:100px;
  10.         }
  11.         .zywa{background:white;width:8px;height:8px;border:1px solid black;}
  12.         .martwa{background:grey;width:8px;height:8px;border:1px solid blue;}
  13.     </style>
  14.     <script>
  15.         function test() {
  16.             game = new zycie(10, 5);
  17.         }
  18.  
  19.         function zycie(rows, columns) {
  20.             var swiat = budujSwiat();
  21.             function budujSwiat() {
  22.                 var swiat = [];
  23.                 for(var i = 0; i<rows; i++) {
  24.                     var innerArr = [];
  25.                     for(var j = 0; j<columns; j++) {
  26.                         innerArr.push(0);
  27.                     }
  28.                     swiat.push(innerArr);
  29.                 }
  30.                 return swiat;
  31.             }
  32.             function pokazSwiat(swiat) { // wyswietlanie swiata
  33.                 for (var x = 0; x < swiat.length; x++) {
  34.                     for (var y = 0; y < swiat.length; y++) {
  35.                         ozywKomorke(x, y, swiat[x][y]);
  36.                     }
  37.                 }
  38.             }
  39.  
  40.            function ozywKomorke(x, y, alive) {
  41.            var swiat = document.getElementById('game');
  42.                 var komorka = "";
  43.                 alive : komorka += '<td class="zywa"></td>';
  44.                swiat.innerHTML = komorka;
  45.             }
  46.             function losowaPopulacja(swiat) {
  47.                 for(var x = 0; x < swiat.length; x++) {
  48.                     for(y = 0; y < swiat[x].length; y++) {
  49.                         if(Math.log(Math.random()*1) < -0.6) {
  50.                             swiat[x][y]=1;
  51.                         }
  52.                     }
  53.                 }
  54.             }
  55.              function manual(swiat) {
  56.                  swiat[20][20] = 1;
  57.                  swiat[21][20] = 1;
  58.                  swiat[22][20] = 1;
  59.             }
  60.              function zyweC(swiat, x, y) {
  61.                 if(x > 0 && y > 0 && x < rows-1 && y < columns-1) {
  62.                     var wszystkieZywe = swiat[x-1][y-1]+swiat[x][y-1]+swiat[x+1][y-1]+ swiat[x-1][y]+swiat[x+1][y]+swiat[x-1][y+1]+ swiat[x][y+1]+swiat[x+1][y+1];
  63.                     console.log(wszystkieZywe);
  64.                     return wszystkieZywe;
  65.                 } else {
  66.                     return 0;
  67.                 }
  68.             }
  69.             function sprawdz(swiat) {
  70.                 var nowySwiat = budujSwiat();
  71.                 for(var x = 0; x < swiat.length; x++) {
  72.                     for(var y = 0; y < swiat[x].length; y++) {
  73.                         var komorka = swiat[x][y];
  74.                         var zywe = zyweC(swiat, x,y);
  75.  
  76.                         if(komorka == 1) {
  77.                             if(zywe < 2) {
  78.                                 nowySwiat[x][y] = 0;
  79.                             } else if(zywe == 2 || zywe == 3) {
  80.                                 nowySwiat[x][y] = 1;
  81.                             } else if(zywe > 3) {
  82.                                 nowySwiat[x][y] = 0;
  83.                             }
  84.                         } else if(komorka == 0 && zywe == 3) {
  85.                             nowySwiat[x][y] = 1;
  86.                         }
  87.                     }
  88.                 }
  89.                 return nowySwiat;
  90.             }
  91.             losowaPopulacja(swiat);
  92. //manual(swiat);
  93.             pokazSwiat(swiat);
  94.  
  95.             setInterval(function() {
  96.                 var nowySwiat = sprawdz(swiat);
  97.                 pokazSwiat(nowySwiat);
  98.                 swiat = nowySwiat;
  99.             }, 50);
  100.         }
  101.     </script>
  102. </head>
  103.  
  104. <body onload="test()">
  105. <table id="game">
  106.  
  107. </table>
  108. </body>
  109.  
  110. </html>
[HTML] pobierz, plaintext


Sugestie?
nospor
21.07.2014, 07:29:12
Ty tutaj nic nie "rysujesz" tylko tworzysz elementy tabeli
Ty tutaj nic nie ozywiasz, tylko znowu tworzysz elementy tabeli

Staraj się pisac po ludzku a nie dodajesz jakies fantastyczne opisy.... Chwilkę zajęło zanim dotarło o czym mówisz.


Kolejna sprawa:
Troche siedze w js, ale musze szczerze przyznac ze pierwszy raz widze taki kod:
alive : komorka
Co to niby według Ciebie ma robić?

Poza tym ozywKomorke tworzy ci tylko jedną komorke, bo tylko tam tworzysz jedną komorkę.

Jesli zas sadziles, ze ten kod:
swiat.innerHTML = komorka;
bedzie ci dodawal kolejne komorki, no to sorka, ale ty tutaj NADPISUJESZ a nie DOPISUJESZ. No powinienies już znac roznice miedzy tymi dwoma slowami.
trueblue
21.07.2014, 07:30:20
Gdzie są martwe komórki? Dlaczego ożywiając komórkę nadpisujesz innerHTML?

P.S. W linii 34 jest błąd w warunku.
P.P.S. Nawiązując do pytania 2, nie budujesz wierszy tabeli.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.