If you're seeing this message, it means we're having trouble loading external resources on our website.

Jeżeli jesteś za filtrem sieci web, prosimy, upewnij się, że domeny *.kastatic.org i *.kasandbox.org są odblokowane.

Główna zawartość

No to zaczynamy!

Wprowadzenie do tej lekcji

Gotowi, by zanurzyć się w kodowaniu?

W tej lekcji zbudujesz prosty model bałwana i zrigujesz go używając javascript. Następnie rozwiniesz ten model, aby w finale projektu stworzyć własną postać.
W tej lekcji uzupełnisz ważne fragmenty znacznie większego systemu. Podobnie pracuje się w Pixarze nad oprogramowaniem.

Przegląd lekcji

Najpierw zbudujesz kółka używając obiektów.
Następnie będziesz łączyć różne kształty w tablicy obiektów.
W końcu napiszesz funkcje deformerów żeby poruszać swoim modelem.
Zanim skończysz, będziesz gotowy/gotowa na końcowy projekt!

Co muszę wiedzieć zanim zacznę?

  • Jeśli nigdy nie programowałeś/programowałaś, najlepiej przejdź przez nasze wprowadzenie do JS, przyswój sobie pojęcia zmiennych, tablic, funkcji i obiektów i wróć do nas kiedy będziesz gotowy/gotowa!
  • Jeśli masz doświadczenie w programowaniu ale nie z Khan Academy, zalecamy zaznajomienie się z naszym środowiskiem, np. poprzez stworzenie tutaj nowego programu.
  • Jeśli uczyłeś się programowania w Khan Academy, doskonale! Przejrzyj dla założenia pod spodem i odśwież sobie to czego nie pamiętasz.
  • Ta lekcja zahacza o pojęcia matematyczne (równania dla przekształceń geometrycznych) odpowiednie dla klasy 8 i klas starszych. Możesz powtórzyć je w lekcji plany i inscenizacja.

Szybki przegląd pojęć z programowania, których będziesz używać

Zmienne

start text, v, a, r, end text, start color #6495ed, start text, space, s, u, l, l, e, y, s, A, g, e, end text, end color #6495ed, equals, start color #28ae7b, 15, end color #28ae7b, ;
  • Tworzy zmienną (variable) o nazwie start color #6495ed, start text, s, u, l, l, e, y, s, A, g, e, end text, end color #6495ed, która przechowuje wartość start color #28ae7b, 15, end color #28ae7b.

Tablice

start text, v, a, r, end text, start color #6495ed, start text, space, a, g, e, s, end text, end color #6495ed, equals, open bracket, start color #28ae7b, 2, end color #28ae7b, comma, start color #ff00af, 4, end color #ff00af, comma, start color #9d38bd, 8, end color #9d38bd, close bracket, ;
  • Tworzy tablicę o nazwie start color #6495ed, start text, a, g, e, s, end text, end color #6495ed (wiek), która przechowuje trzy wartości start color #28ae7b, 2, end color #28ae7b, comma, start color #ff00af, 4, end color #ff00af, comma, start color #9d38bd, 8, end color #9d38bd.
  • start color #6495ed, start text, a, g, e, s, end text, end color #6495ed, open bracket, 1, close bracket która przechowuje wartość start color #ff00af, 4, end color #ff00af.

Funkcje

start text, v, a, r, end text, start color #6495ed, start text, space, s, a, y, H, e, l, l, o, end text, end color #6495ed, equals, start text, f, u, n, c, t, i, o, n, end text, left parenthesis, right parenthesis, space, left brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, start color #ff00af, 100, end color #ff00af, comma, start color #ff00af, 200, end color #ff00af, right parenthesis, ;
right brace
  • Tworzy funkcję nazwaną start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed ("powiedzCześć"), która przywołana wypuszcza tekst start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text ("Cześć, świecie!") we współrzędnych left parenthesis, start color #ff00af, 100, comma, 200, end color #ff00af, right parenthesis.
start text, v, a, r, end text, start color #6495ed, start text, space, s, a, y, H, e, l, l, o, end text, end color #6495ed, equals, start text, f, u, n, c, t, i, o, n, end text, left parenthesis, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, space, left brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, space, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, ;
right brace
  • Funkcja start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed ma teraz dwa parametry, start color #ff00af, x, end color #ff00af i start color #ff00af, y, end color #ff00af, dzięki którym możesz określić współrzędne tekstu.

Obiekty

start text, v, a, r, end text, start color #6495ed, start text, space, s, n, o, w, m, a, n, end text, end color #6495ed, equals, left brace, right brace, ;
  • Tworzy pusty obiekt nazwany start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed. ("bałwan")
start text, v, a, r, end text, start color #6495ed, start text, space, s, n, o, w, m, a, n, end text, end color #6495ed, equals, left brace
start color #28ae7b, start text, a, g, e, end text, end color #28ae7b, colon, start color #ff00af, 2, end color #ff00af, comma
start color #28ae7b, start text, c, o, l, o, r, end text, end color #28ae7b, colon, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af, comma
start color #28ae7b, start text, l, i, k, e, s, end text, end color #28ae7b, colon, open bracket, start color #ff00af, start text, ", m, i, l, k, ", end text, end color #ff00af, comma, space, start color #ff00af, start text, ", c, o, l, d, space, d, a, y, s, ", end text, end color #ff00af, close bracket
right brace
  • Obiekt start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed ma teraz trzy własności: start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, a, g, e, end color #28ae7b, end text, left parenthesis, w, i, e, k, right parenthesis, equals, start color #ff00af, 2, end color #ff00af; oraz start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, c, o, l, o, r, end color #28ae7b, end text, left parenthesis, k, o, l, o, r, right parenthesis, equals, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af, left parenthesis, b, i, a, ł, y, right parenthesis, ;. Trzecia własność obiektu start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, end text to tablica nazwana start text, start color #28ae7b, l, i, k, e, s, end color #28ae7b, end text, left parenthesis, z, a, i, n, t, e, r, e, s, o, w, a, n, i, a, right parenthesis.

Baw się dobrze!