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	3 weeks ago

README.md

Unescape Escape

Създаване на космическа игра, част 2: Рисуване на герой и чудовища върху Canvas

Предварителен тест

Canvas

Canvas е HTML елемент, който по подразбиране няма съдържание; той е празно платно. Трябва да добавите съдържание, като рисувате върху него.

✅ Прочетете повече за Canvas API на MDN.

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

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

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

id: задайте го, за да можете да получите референция, когато трябва да взаимодействате с него.
width: това е ширината на елемента.
height: това е височината на елемента.

Рисуване на прости геометрични фигури

Canvas използва картезианска координатна система за рисуване. Следователно използва x-ос и y-ос, за да изрази местоположението на нещо. Местоположението 0,0 е горният ляв ъгъл, а долният десен е това, което сте задали като WIDTH и HEIGHT на платното.

Изображение от MDN

За да рисувате върху елемента Canvas, трябва да преминете през следните стъпки:

Получете референция към елемента 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, за да решите следното:

Нарисувайте Canvas с черен фон

съвет: добавете два реда под съответния TODO в /app.js, задавайки елемента ctx да бъде черен, а горните/левите координати да са 0,0, а височината и ширината да съответстват на Canvas.
Заредете текстури

съвет: добавете изображенията на играча и врага, използвайки await loadTexture и подавайки пътя на изображението. Все още няма да ги видите на екрана!
Нарисувайте героя в центъра на екрана в долната половина

съвет: използвайте API-то drawImage, за да нарисувате 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);
    }
  }
```

Резултат

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

Решение

Опитайте първо да го решите сами, но ако се затрудните, погледнете решението.

🚀 Предизвикателство

Научихте за рисуване с 2D-фокусирания Canvas API; разгледайте WebGL API и опитайте да нарисувате 3D обект.

Последващ тест

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

Научете повече за Canvas API, като прочетете за него.

Задание

Играйте с Canvas API

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

README.md Unescape Escape