Szczegółowe omówienie pierwszej części tworzenia gry Najeźdźcy z kosmosu v1:
Link do powyższego omówienia pierwszej części tworzenia gry Najeźdźcy z kosmosu v1:
https://youtu.be/A6A7TbdO-18?t=922
Link do treści zadania:
https://oki.org.pl/najezdzcy-z-kosmosu-zadanie-v1/
Podsumowanie pierwszej części tworzenie gry Najeźdźcy z kosmosu:
https://youtu.be/A6A7TbdO-18?t=4759
–
Pierwsza część tworzenia gry Najeźdźcy z kosmosu składa się z poniższych elementów.
Pod każdą sekcją jest plik html. z efektem działań tej części. By pobrać plik html dla danej sekcji, kliknij na nim prawym klawiszem myszy i wybierz opcje “Zapisz jako”.
–
0. Utworzenie pustego pliku
https://youtu.be/A6A7TbdO-18?t=1165
–
0a. Sprawdzenie czy rozszerzenie pliku jest *.html?
https://youtu.be/kYa-2EdIF3Q?t=1658
1. Utworzenia w języku html prostej strony z tekstem
https://youtu.be/A6A7TbdO-18?t=1565
Efekt – plik html do pobrania: index_01_body_head
2. Zastosowania prostych znaczników (strong, ukośnik) na stronie www:
https://youtu.be/A6A7TbdO-18?t=2138
Efekt: index_02_pogrubienie_pochylenie
3. Dodania elementu canvas i zdefiniowania dla niego stylów (CSS):
https://youtu.be/A6A7TbdO-18?t=2483
Efekt – plik html do pobrania: index_03_canvas_plansza
4. Zdefiniowania tytułu, autora i innych metadanych w sekcji head:
https://youtu.be/A6A7TbdO-18?t=3298
Efekt: index_04_metadane
5. Narysowania w języku JavaScript prostokąta (statku) i kreski (pocisku) na obiekcie canvas
https://youtu.be/A6A7TbdO-18?t=3626
Efekt – plik html do pobrania: index_05_rysujemy_prostokaty
Kod również poniżej.
–
Kolejne części tworzenia Najeźdźców z kosmosu:
Najeźdźcy z kosmosu v2: https://youtu.be/kYa-2EdIF3Q?t=1538
Zadanie Najeźdźcy z kosmosu v2: https://oki.org.pl/najezdzcy-z-kosmosu-zadanie-v2/
Rozwiązanie Najeźdźcy z kosmosu v2: https://oki.org.pl/najezdzcy-z-kosmosu-v2/
–
Poniżej jest kod który utworzyliśmy w trakcie naszych zajęć.
1. Skopiuj go, umieść w pliku index.html
Zwróć uwagę by był to plik index.html a nie index.html.txt lub index.txt: https://youtu.be/kYa-2EdIF3Q?t=1658
2. Kliknij dwukrotnie na pliku index.html
–
Kod pierwszej części – Najeźdźcy z kosmosu
–
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="author" content = "OKI - Olimpijskie Koło Informatyczne" />
<title>Najeźdźcy z kosmosu</title>
<style>
#plansza {
margin: 10px;
border: 3px solid grey;
background-color: black;
}
.tekst_typ_1 {
color: blue;
font-size: 150%;
font-weight: bold;
}
</style>
</head>
<body>
<div class="tekst_typ_1">
Najeźdźcy z kosmosu!
</div>
<canvas id="plansza" width="400px" height="200px">
</canvas>
<script type="text/javascript">
var plansza_gry = document.getElementById("plansza");
var rysowanie = plansza_gry.getContext("2d");
//statek który nas broni
rysowanie.beginPath();
rysowanie.fillStyle = "blue";
//prostokat
//lewy górny róg x y rozmiar_po_x rozmiar_po_y
rysowanie.rect( 180, 170, 40, 20);
rysowanie.fill();
rysowanie.closePath();
//białe okienko w statku
rysowanie.beginPath();
rysowanie.fillStyle = "white";
rysowanie.rect(185, 175, 10, 5);
rysowanie.fill();
rysowanie.closePath();
//pocisk
rysowanie.beginPath();
rysowanie.strokeStyle = 'white';
rysowanie.lineWidth = 5;
//idziemy do poczatku linii
// x y
rysowanie.moveTo(200, 80);
//idziemy do konca linii
// x y
rysowanie.lineTo(200, 110);
rysowanie.stroke();
rysowanie.closePath();
</script>
<div class="tekst_typ_1">
Jak sie grało przyjacielu?
</div>
</body>
</html>
Kod pierwszej części – Najeźdźcy z kosmosu