Microsoft | Development for beginners (Episode 28)

This lesson covers the basics of GitHub, a platform to host and manage changes to your code.

 · 5 phút đọc.

This lesson covers the basics of GitHub, a platform to host and manage changes to your code.

The Canvas

The canvas is an HTML element that by default has no content; it’s a blank slate. You need to add to it by drawing on it.

✅ Read more about the Canvas API on MDN.

Here’s how it’s typically declared, as part of the page’s body:

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

Above we are setting the id, width and height.

  • id: set this so you can obtain a reference when you need to interact with it.

  • width: this is the width of the element.

  • height: this is the height of the element.

Drawing simple geometry

The Canvas is using a cartesian coordinate system to draw things. Thus it uses an x-axis and y-axis to express where something is located. The location 0,0 is the top left position and the bottom right is what you said to be the WIDTH and HEIGHT of the canvas.

To draw on the canvas element you will need to go through the following steps:

  1. Get a reference to the Canvas element.

  2. Get a reference on the Context element that sits on the canvas element.

  3. Perform a drawing operation using the context element.

Code for the above steps usually looks like so:

// 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

✅ The Canvas API mostly focuses on 2D shapes, but you can also draw 3D elements to a web site; for this, you might use the WebGL API.

You can draw all sorts of things with the Canvas API like:

– Geometrical shapes, we’ve already showed how to draw a rectangle, but there is much more you can draw.

– Text, you can draw a text with any font and color you wish.

– Images, you can draw an image based off of an image asset like a .jpg or .png for example.

✅ Try it! You know how to draw a rectangle, can you draw a circle to a page? Take a look at some interesting Canvas drawings on CodePen. Here’s a particularly impressive example.

Load and draw an image asset

You load an image asset by creating an Image object and set its src property. Then you listen to the load event to know when it’s ready to be used. The code looks like this:

Load asset

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

Load asset pattern

It’s recommended to wrap the above in a construct like so, so it’s easier to use and you only try to manipulate it when it’s fully loaded:

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

To draw game assets to a screen, your code would look like this:

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

Now it’s time to start building your game

What to build

You will build a web page with a Canvas element. It should render a black screen 1024_768. We’ve provided you with two images:

– Hero ship.

– 5_5 monster.

Locate the files that have been created for you in the your-work sub folder. It should contain the following:

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

Open the copy of this folder in Visual Studio Code. You need to have a local development environment setup, preferably with Visual Studio Code with NPM and Node installed. If you don’t have npm set up on your computer, here’s how to do that.

Start your project by navigating to the your_work folder:

cd your-work
npm start

The above will start a HTTP Server on address http://localhost:5000. Open up a browser and input that address. It’s a blank page right now, but that will change

Note: to see changes on your screen, refresh your browser.

Add code

Add the needed code to your-work/app.js to solve the below

  1. Draw a canvas with black background. Tip: add two lines under the appropriate TODO in /app.js, setting the ctx element to be black and the top/left coordinates to be at 0,0 and the height and width to equal that of the canvas.

  2. Load textures. Tip: add the player and enemy images using await loadTexture and passing in the image path. You won’t see them on the screen yet!

  3. Draw hero in the center of the screen in the bottom half. Tip: use the drawImage API to draw heroImg to the screen, setting canvas.width / 2 – 45 and canvas.height – canvas.height / 4);

  4. Draw 5_5 monsters. Tip: Now you can uncomment the code to draw enemies on the screen. Next, go to the createEnemies function and build it out.

First, set up some constants:

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;

then, create a loop to draw the array of monsters onto the screen:

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

Result

The finished result should look like so:

Solution

Please try solving it yourself first but if you get stuck, have a look at a solution.

🚀 Challenge

You’ve learned about drawing with the 2D-focused Canvas API; take a look at the WebGL API, and try to draw a 3D object.

Share:
Quay lại.

Có thể bạn chưa đọc

Xem tất cả »

Đăng ký nhận bảng tin hàng tuần

Liên lạc trao đổi

Liên lạc thông qua Instagram

Thông qua Instagram, bạn có thể trao đổi trực tiếp và tức thời, cũng như cập nhật những thông tin mới nhất từ nhavantuonglai.

Tức thời

Bạn có thể gửi và nhận tin nhắn nhanh chóng, trực tiếp, giúp những vấn đề cá nhân của bạn được giải quyết tức thời và hiệu quả hơn.

Thân thiện

Vì tính chất là kênh liên lạc nhanh, nên bạn có thể bỏ qua những nghi thức giao tiếp thông thường, chỉ cần lịch sự và tôn trọng thì sẽ nhận được sự phản hồi đầy thân thiện, thoải mái từ tác giả.

Trao đổi trên email

Thông qua email cá nhân, bạn có thể trao đổi thỏa thuận hợp tác, kết nối chuyên sâu và mang tính chuyên nghiệp.

Tin cậy

Trong một số trường hợp, email được dùng như một tài liệu pháp lý, chính vì vậy mà bạn có thể an tâm và tin cậy khi trao đổi với tác giả thông qua email.

Chuyên nghiệp

Cấu trúc của email đặt tính chuyên nghiệp lên hàng đầu, nên những thông tin, nội dung được viết trong email từ tác giả sẽ luôn đảm bảo điều này ở mức cao nhất.