Szczegółowe omówienie tworzenia gry Dino – część 1:
Link do powyższego omówienia tworzenia gry Dino – część 1: https://youtu.be/giLNlOjIsPM?t=903
Kod / gra – instrukcja pobrania na dole: https://oki.org.pl/wp-content/uploads/2022/04/index_dino_czesc1.html
Skrócone omówienie tworzenia pierwszej części gry Dino: https://youtu.be/giLNlOjIsPM?t=5779
Dino część 1 – treść zadania: https://oki.org.pl/dino-zadanie-v1
Dino część 2: https://oki.org.pl/dino-zadanie-v2 Rozwiązanie: https://oki.org.pl/dino-v2/
Dlaczego piszemy grę? https://youtu.be/giLNlOjIsPM?t=101
Warto! https://youtu.be/giLNlOjIsPM?t=6111
W pierwszej części pisania gry Dino stworzyliśmy animację ruszającego się kaktusa jako prostokąta: https://youtu.be/giLNlOjIsPM?t=5475
1. Otwieramy pusty plik ze stroną www: https://youtu.be/giLNlOjIsPM?t=1171
2. Tworzymy stronę html z tekstem: https://youtu.be/giLNlOjIsPM?t=1851
3. Umieszczamy canvas – płótno do rysowania na ekranie: https://youtu.be/giLNlOjIsPM?t=2647
4. Kolor płótna / kolory RGB: https://youtu.be/giLNlOjIsPM?t=2964
5. Rysujemy Ziemię: https://youtu.be/giLNlOjIsPM?t=3881
6. Rysujemy kaktus: https://youtu.be/giLNlOjIsPM?t=4691
7. Tworzymy animację: https://youtu.be/giLNlOjIsPM?t=5203
Strona www z możliwością wyboru kolorów: https://htmlcolorcodes.com/color-picker
–
Jak się uczyć na podstawie tego zadania? https://youtu.be/QgLyXYmFQeU?t=2019
Pamiętaj by zajrzeć max 1 raz – wtedy się rozwijasz: https://youtu.be/pkLXuuOe_qA?t=3625
Lista zadań z rozwiązaniami: https://oki.org.pl/lista-zadan-materialy.php
Samouczek – przygotowanie do Olimpiad: https://oki.org.pl/tutorial/
Zajęcia: https://oki.org.pl/harmonogram-zajec/
Informacje o zajęciach: https://oki.org.pl/newsletter.php
–
Jak uruchomić / pobrać grę Dino – część 1?
Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
1. Kliknij na poniższy link prawym klawiszem myszy i wybierz “zapisz jako”.
https://oki.org.pl/wp-content/uploads/2022/04/index_dino_czesc1.html
2. Zapisz plik w dowolnym katalogu.
3. Dwukrotnie kliknij na nazwie pliku.
Otworzy się przeglądarka i uruchomi się program który animuje ruch kaktusa.
4. By zmienić wielkość obiektów, kolory,… -> Kliknij prawym klawiszem na zapisanym pliku i wybierz “Otwórz za pomocą” a następnie wybierze “Notatnik” lub dowolny inny edytor. Rekomenduję użycie Visual Studio Code zamiast notatnika: https://youtu.be/Ck6k19b7FVU?t=994
Alternatywnie
1. Skopiuj cały poniższy kod i umieść w notatniku.
2. Zapisz zwartość notatnika z wklejonym właśnie kodem jako plik index_dino_czesc1.html
Zwróć uwagę by był to plik index_dino_czesc1.html a nie index_dino_czesc1.html.txt lub index_dino_czesc1.txt. Wyjaśnienie: https://youtu.be/wrkLDPqZ1Js?t=1532
3. Kliknij dwukrotnie na pliku index_dino_czesc1.html
Powinna otworzyć się domyślna przeglądarka i uruchomić animację.
–
Strona www z kodem pierwszej części gry Dino v1
<!DOCTYPE html>
<!--
Gra Dino v. 1.5 by OKI - Olimpijskie Kolo Informatyczne
Kod / omowienie / linki: https://oki.org.pl/dino-v1
Wersje: 1.0 - Strona www z tekstem / 1.1 - canvas (plotno) / 1.2 - ziemia / 1.3 - funkcje plansza/ziemia / 1.4 - kaktus / 1.5 - Animacja!
-->
<html>
<head>
</head>
<body>
<div>
<strong>Gra Dino v1.5 by CodeMonster</strong>
<br />Dino idzie przez pustynie.
</div>
<canvas id="plansza_canvas" width="600px" height="200px">
</canvas>
<script>
let plansza, rysowanie;
let kaktus_x;
//poczatkowe ustawienie kaktusa po osi X -> z prawej strony planszy
kaktus_x = 550;
//dostep do canvas oraz mozliwosci rysowania
plansza = document.getElementById("plansza_canvas");
rysowanie = plansza.getContext("2d");
function RysujPlansze() {
//kolor prostokata
rysowanie.fillStyle = "rgb(249,218,255)";
//rysowanie prostokata -> lewy górny róg w (0,0)
//szerokosc po X 600, wysokosc po Y 200
rysowanie.fillRect(0,0, 600,200);
}
function RysujZiemie() {
rysowanie.fillStyle = "rgb(69,0,33)";
rysowanie.fillRect(0,170, 600,5);
}
function RysujKaktus(x) {
rysowanie.fillStyle = "rgb(36,170,0)";
rysowanie.fillRect(x,140,10,30);
}
//funkcja która rysuje plansze, ziemie, kaktusa
function Gra() {
RysujPlansze();
RysujZiemie();
RysujKaktus(kaktus_x);
//kolejny kaktus bedzie przesuniety w lewo
kaktus_x = kaktus_x - 1;
//jesli kaktus wyjdzie za plansze z lewej strony,
//z powrotem ustawiamy go z prawej
if ( kaktus_x < 0 )
kaktus_x = 550;
}
//co 10ms, czyli 100 razy na sekunde wywolujemy funkcje Gra()
setInterval(Gra, 10);
</script>
</body>
</html>