History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

Unescape Escape

Zbuduj grę kosmiczną, część 2: Rysowanie bohatera i potworów na płótnie

Quiz przed wykładem

Płótno (Canvas)

Płótno to element HTML, który domyślnie nie ma żadnej zawartości; jest to pusta przestrzeń. Musisz dodać do niego zawartość, rysując na nim.

✅ Przeczytaj więcej o Canvas API na MDN.

Oto jak zazwyczaj jest deklarowane, jako część ciała strony:

<canvas id="myCanvas" width="200" height="100"></canvas>

Powyżej ustawiamy id, width i height.

id: ustaw to, aby móc uzyskać referencję, gdy będziesz potrzebować interakcji z elementem.
width: szerokość elementu.
height: wysokość elementu.

Rysowanie prostych kształtów geometrycznych

Canvas używa kartezjańskiego układu współrzędnych do rysowania. Oznacza to, że korzysta z osi x i y, aby określić, gdzie coś się znajduje. Pozycja 0,0 to lewy górny róg, a prawy dolny róg to szerokość (WIDTH) i wysokość (HEIGHT) płótna.

Obraz z MDN

Aby rysować na elemencie płótna, musisz wykonać następujące kroki:

Uzyskaj referencję do elementu Canvas.
Uzyskaj referencję do elementu Context, który znajduje się na płótnie.
Wykonaj operację rysowania za pomocą elementu Context.

Kod dla powyższych kroków zazwyczaj wygląda tak:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ Canvas API skupia się głównie na kształtach 2D, ale możesz również rysować elementy 3D na stronie internetowej; do tego możesz użyć WebGL API.

Za pomocą Canvas API możesz rysować różne rzeczy, takie jak:

Kształty geometryczne – już pokazaliśmy, jak narysować prostokąt, ale można narysować znacznie więcej.
Tekst – możesz rysować tekst w dowolnej czcionce i kolorze.
Obrazy – możesz rysować obrazy na podstawie zasobów graficznych, takich jak .jpg czy .png.

✅ Spróbuj! Wiesz już, jak narysować prostokąt, czy potrafisz narysować koło na stronie? Zobacz kilka ciekawych rysunków na Canvas na CodePen. Oto szczególnie imponujący przykład.

Wczytywanie i rysowanie zasobu graficznego

Aby wczytać zasób graficzny, tworzysz obiekt Image i ustawiasz jego właściwość src. Następnie nasłuchujesz zdarzenia load, aby wiedzieć, kiedy jest gotowy do użycia. Kod wygląda tak:

Wczytywanie zasobu

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

Wzorzec wczytywania zasobu

Zaleca się opakowanie powyższego w konstrukcję, jak poniżej, aby było łatwiejsze w użyciu i aby manipulować nim dopiero, gdy będzie w pełni załadowany:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

Aby narysować zasoby gry na ekranie, Twój kod wyglądałby tak:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

Czas zacząć budować swoją grę

Co zbudować

Zbudujesz stronę internetową z elementem Canvas. Powinna wyświetlać czarny ekran o rozmiarze 1024*768. Udostępniliśmy Ci dwa obrazy:

Statek bohatera
5*5 potworów

Zalecane kroki rozpoczęcia pracy

Znajdź pliki, które zostały dla Ciebie utworzone w podfolderze your-work. Powinny zawierać następujące:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Otwórz kopię tego folderu w Visual Studio Code. Musisz mieć skonfigurowane lokalne środowisko programistyczne, najlepiej z Visual Studio Code z zainstalowanymi NPM i Node. Jeśli nie masz skonfigurowanego npm na swoim komputerze, oto jak to zrobić.

Rozpocznij swój projekt, przechodząc do folderu your_work:

cd your-work
npm start

Powyższe uruchomi serwer HTTP pod adresem http://localhost:5000. Otwórz przeglądarkę i wpisz ten adres. Na razie to pusta strona, ale to się zmieni.

Uwaga: aby zobaczyć zmiany na ekranie, odśwież przeglądarkę.

Dodaj kod

Dodaj potrzebny kod do your-work/app.js, aby rozwiązać poniższe:

Narysuj płótno z czarnym tłem

wskazówka: dodaj dwie linie pod odpowiednim TODO w /app.js, ustawiając element ctx na czarny, a współrzędne górne/lewe na 0,0 oraz wysokość i szerokość równe wymiarom płótna.
Wczytaj tekstury

wskazówka: dodaj obrazy gracza i wroga, używając await loadTexture i przekazując ścieżkę do obrazu. Na razie nie zobaczysz ich na ekranie!
Narysuj bohatera na środku ekranu w dolnej połowie

wskazówka: użyj API drawImage, aby narysować heroImg na ekranie, ustawiając canvas.width / 2 - 45 i canvas.height - canvas.height / 4).

Narysuj 5*5 potworów

wskazówka: teraz możesz odkomentować kod, aby narysować wrogów na ekranie. Następnie przejdź do funkcji createEnemies i ją rozbuduj.

Najpierw ustaw kilka stałych:

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

Następnie utwórz pętlę, aby narysować tablicę potworów na ekranie:

for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }

Wynik

Gotowy wynik powinien wyglądać tak:

Rozwiązanie

Spróbuj najpierw rozwiązać to samodzielnie, ale jeśli utkniesz, spójrz na rozwiązanie.

🚀 Wyzwanie

Nauczyłeś się rysować za pomocą Canvas API skoncentrowanego na 2D; zapoznaj się z WebGL API i spróbuj narysować obiekt 3D.

Quiz po wykładzie

Przegląd i samodzielna nauka

Dowiedz się więcej o Canvas API, czytając o nim.

Zadanie

Pobaw się Canvas API

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż staramy się zapewnić dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.

README.md Unescape Escape