Gra Dino v1 – Kod / linki / omówienie – Gra Google Chrome

Gra Dino v1 – Kod / linki / omówienie – Gra Google Chrome

Szczegółowe omówienie tworzenia gry Dinoczęść 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.html.txt lub index_dino_czesc1.html.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>
Strona www z kodem pierwszej części gry Dino v1

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz