Najeźdźcy z kosmosu v1 – Tworzymy grę

Najeźdźcy z kosmosu v1 – Tworzymy grę

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

 

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz