12 KiB

Raw Permalink Blame History Unescape Escape

Направите свемирску игру, део 2: Цртање хероја и чудовишта на платну

Квиз пре предавања

Платно

Платно је HTML елемент који подразумевано нема садржај; то је празна површина. Морате га попунити цртањем.

✅ Прочитајте више о Canvas API-ју на MDN-у.

Ево како се обично декларише, као део тела странице:

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

Горе подешавамо id, width и height.

id: поставите ово како бисте могли да добијете референцу када треба да комуницирате са њим.
width: ово је ширина елемента.
height: ово је висина елемента.

Цртање једноставне геометрије

Платно користи декартов координатни систем за цртање. Дакле, користи x-осу и y-осу да изрази где се нешто налази. Локација 0,0 је горњи леви угао, а доњи десни угао је оно што сте поставили као ШИРИНУ и ВИСИНУ платна.

Слика са MDN

Да бисте цртали на елементу платна, потребно је да прођете кроз следеће кораке:

Добијте референцу на Canvas елемент.
Добијте референцу на Context елемент који се налази на Canvas елементу.
Извршите операцију цртања користећи Context елемент.

Код за горе наведене кораке обично изгледа овако:

// 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 је углавном фокусиран на 2D облике, али можете цртати и 3D елементе на веб страници; за то можете користити WebGL API.

Са Canvas API-јем можете цртати разне ствари као што су:

Геометријски облици, већ смо показали како се црта правоугаоник, али постоји много више што можете нацртати.
Текст, можете нацртати текст са било којим фонтом и бојом коју желите.
Слике, можете нацртати слику на основу сликовног ресурса као што је .jpg или .png, на пример.

✅ Пробајте! Знате како да нацртате правоугаоник, можете ли нацртати круг на страници? Погледајте неке занимљиве цртеже на Canvas-у на CodePen-у. Ево посебно импресивног примера.

Учитавање и цртање сликовног ресурса

Сликовни ресурс учитавате креирањем Image објекта и подешавањем његовог src својства. Затим слушате load догађај како бисте знали када је спреман за употребу. Код изгледа овако:

Учитавање ресурса

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

Шаблон за учитавање ресурса

Препоручује се да горе наведено обмотате у конструкцију попут ове, како би било лакше за коришћење и како бисте манипулисали њиме тек када је у потпуности учитан:

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')
}

Да бисте нацртали ресурсе игре на екрану, ваш код би изгледао овако:

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);
}

Сада је време да почнете са прављењем игре

Шта направити

Направићете веб страницу са Canvas елементом. Требало би да приказује црни екран 1024*768. Обезбедили смо вам две слике:

Херојски брод
5*5 чудовишта

Препоручени кораци за почетак развоја

Пронађите датотеке које су креиране за вас у подфолдеру your-work. Требало би да садржи следеће:

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

Отворите копију овог фолдера у Visual Studio Code-у. Потребно је да имате подешено локално развојно окружење, пожељно са Visual Studio Code-ом, NPM-ом и Node-ом. Ако немате подешен npm на вашем рачунару, ево како то да урадите.

Започните свој пројекат тако што ћете отићи у фолдер your_work:

cd your-work
npm start

Горње ће покренути HTTP сервер на адреси http://localhost:5000. Отворите прегледач и унесите ту адресу. Тренутно је празна страница, али то ће се променити.

Напомена: да бисте видели промене на екрану, освежите прегледач.

Додајте код

Додајте потребан код у your-work/app.js да решите следеће:

Нацртајте платно са црном позадином

савет: додајте две линије испод одговарајућег TODO у /app.js, подешавајући ctx елемент да буде црн и горње/леве координате на 0,0, а висину и ширину једнаке платну.
Учитајте текстуре

савет: додајте слике играча и непријатеља користећи await loadTexture и прослеђујући путању до слике. Још увек их нећете видети на екрану!
Нацртајте хероја у центру екрана у доњој половини

савет: користите drawImage API да нацртате heroImg на екрану, подешавајући canvas.width / 2 - 45 и canvas.height - canvas.height / 4);
Нацртајте 5*5 чудовишта

савет: сада можете одкоментарисати код за цртање непријатеља на екрану. Затим идите у функцију createEnemies и изградите је.

Прво, подесите неке константе:
```
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;
```
затим, направите петљу за цртање низа чудовишта на екрану:
```
for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }
```

Резултат

Завршени резултат би требало да изгледа овако:

Решење

Молимо вас да прво покушате сами да решите, али ако запнете, погледајте решење.

🚀 Изазов

Научили сте како да цртате са Canvas API-јем фокусираним на 2D; погледајте WebGL API и покушајте да нацртате 3D објекат.

Квиз након предавања

Преглед и самостално учење

Сазнајте више о Canvas API-ју читајући о њему.

Задатак

Играјте се са Canvas API-јем

Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.

12 KiB Raw Permalink Blame History Unescape Escape