Szczegółowe omówienie tworzenia symulacju Gra w życie – część 1:
Link do powyższego omówienia tworzenia symulacji Gry w życie – część 1: https://youtu.be/fnWsk3hFWWU?t=639
Szczegółowe omówienie tworzenia symulacju Gra w życie – część 2:
Link do powyższego omówienia tworzenia symulacji Gry w życie – część 2:
https://youtu.be/pcWWngfY_LQ?t=458
Kody / Omówienia poszczególnych części:
- Tworzymy pusty plik index.html: https://youtu.be/fnWsk3hFWWU?t=458
Wytłumaczenie z zajęć #2: https://youtu.be/pcWWngfY_LQ?t=458 - Strona www z tytułem i napisem – v 1.2: https://youtu.be/fnWsk3hFWWU?t=1311
Zobacz stronę: https://oki.org.pl/wp-content/uploads/2023/09/index_1.2_TekstNaStronieWWW.html
Kod: https://github.com/OlimpijskieKoloInformatyczne/GraWZycie/blob/main/index_1.2_TekstNaStronieWWW.html - Element canvas (płótno) z dodatkowym prostokątem: https://youtu.be/fnWsk3hFWWU?t=1813
Podsumowanie: https://youtu.be/pcWWngfY_LQ?t=588
Zobacz stronę: https://oki.org.pl/wp-content/uploads/2023/09/index_1.3_PlotnoCanvasZDodatkowymProstokatem.html
Kod: https://github.com/OlimpijskieKoloInformatyczne/GraWZycie/blob/main/index_1.3_PlotnoCanvasZDodatkowymProstokatem.html - Uporządkowanie płótna – funkcje i zmienne: https://youtu.be/pcWWngfY_LQ?t=778
Zobacz stronę: https://oki.org.pl/wp-content/uploads/2023/09/index_1_4_Canvas_Porzadek.html
Kod: https://github.com/OlimpijskieKoloInformatyczne/GraWZycie/blob/main/index_1_4_Canvas_Porzadek.html - Rysujemy dowolną komórkę na planszy – martwą lub żywą: https://youtu.be/pcWWngfY_LQ?t=1267
Zobacz stronę: https://oki.org.pl/wp-content/uploads/2023/09/index_1_5_JednaKomorka.html
Kod: https://github.com/OlimpijskieKoloInformatyczne/GraWZycie/blob/main/index_1_5_JednaKomorka.html - Plansza z losowymi komórkami: https://youtu.be/pcWWngfY_LQ?t=2767
Zobacz stronę: https://oki.org.pl/wp-content/uploads/2023/09/index_1_6_PlanszaLosowychKomorek.html
Kod: https://github.com/OlimpijskieKoloInformatyczne/GraWZycie/blob/main/index_1_6_PlanszaLosowychKomorek.html
–
Kod wersji ostatecznej "Gra w życie"!
<!DOCTYPE html>
<html>
<head>
<title>Gra w życie v 1.6 - Soft Max</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Gra w życie - wersja 1.6</h1>
<canvas id="plansza_canvas" width="400px" height="200px">
</canvas>
<script>
let plansza, rysowanie;
plansza = document.getElementById("plansza_canvas");
rysowanie = plansza.getContext("2d");
let rozmiar_planszy_x = plansza.width, rozmiar_planszy_y = plansza.height;
let ile_komorek_x = 10, ile_komorek_y = 5;
ile_komorek_x += 2; ile_komorek_y += 2;
let rozmiar_komorki_x = rozmiar_planszy_x / (ile_komorek_x-2);
let rozmiar_komorki_y = rozmiar_planszy_y / (ile_komorek_y-2);
let x, y;
let STAN_MARTWA_KOMORKA = 0, STAN_ZYWA_KOMORKA = 1;
let KOLOR_MARTWA_KOMORKA = "rgb(0,255,255)", KOLOR_ZYWA_KOMORKA = "rgb(255,0,255)";
let tablica_zyc = [];
for (x=0; x<ile_komorek_x; ++x)
tablica_zyc[x] = [];
function UstawTlo() {
rysowanie.fillStyle = KOLOR_MARTWA_KOMORKA;
rysowanie.fillRect(0,0, rozmiar_planszy_x,rozmiar_planszy_y);
}
function RysujKomorke(x,y,czy_zywa) {
if (czy_zywa == STAN_MARTWA_KOMORKA)
rysowanie.fillStyle = KOLOR_MARTWA_KOMORKA;
else
rysowanie.fillStyle = KOLOR_ZYWA_KOMORKA;
let lewy_gorny_x = rozmiar_komorki_x * x;
let lewy_gorny_y = rozmiar_komorki_y * y;
rysowanie.fillRect(lewy_gorny_x, lewy_gorny_y, rozmiar_komorki_x,rozmiar_komorki_y);
}
function LosujKomorki() {
for (x=1; x <= ile_komorek_x-2; ++x)
for (y=1; y<=ile_komorek_y-2; ++y)
tablica_zyc[x][y] = Math.round(Math.random());
}
function RysujKomorki() {
for (x=1; x<=(ile_komorek_x-2); ++x)
for (y=1; y<=(ile_komorek_y-2); ++y)
RysujKomorke( x-1, y-1, tablica_zyc[x][y] );
}
UstawTlo();
LosujKomorki()
RysujKomorki()
</script>
</body>
</html>