History

leestott 7cfaffabb5 🌐 Update translations via Co-op Translator		3 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Build a Space Game Part 2: Draw Hero and Monsters to Canvas

Pre-Lecture Quiz

Pre-lecture quiz

The Canvas

The canvas is an HTML element that starts off empty; it's like a blank sheet of paper. You can add content to it by drawing on it.

✅ Read more about the Canvas API on MDN.

Here's how it's typically defined as part of the page's body:

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

In the code above, we are setting the id, width, and height.

id: This allows you to reference the canvas when you need to interact with it.
width: This defines the width of the canvas.
height: This defines the height of the canvas.

Drawing simple geometry

The canvas uses a Cartesian coordinate system to draw shapes. This means it uses an x-axis and y-axis to determine where things are placed. The position 0,0 is the top-left corner, and the bottom-right corner corresponds to the width and height of the canvas.

Image from MDN

To draw on the canvas, follow these steps:

Get a reference to the canvas element.
Get a reference to the context object associated with the canvas.
Perform a drawing operation using the context object.

The code for these steps typically looks like this:

// 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 is primarily designed for 2D graphics, but you can also create 3D graphics on a webpage using the WebGL API.

With the Canvas API, you can draw a variety of things, such as:

Geometric shapes: We've already shown how to draw a rectangle, but there are many other shapes you can create.
Text: You can draw text in any font and color you like.
Images: You can display images from assets like .jpg or .png files.

✅ Try it! Now that you know how to draw a rectangle, can you draw a circle on the page? Check out some creative Canvas drawings on CodePen. Here's a particularly impressive example.

Load and draw an image asset

To load an image asset, create an Image object and set its src property. Then, listen for the load event to know when the image is ready to use. 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 a good idea to wrap the code above in a reusable structure, so you can easily use it and ensure the image is fully loaded before manipulating it:

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 on the screen, your code might 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 create a webpage with a canvas element. The canvas should display a black screen with dimensions 1024x768. We've provided two images for you:

Hero ship:
5x5 monster grid:

Recommended steps to start development

Locate the files provided in the your-work subfolder. It should contain the following:

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

Open this folder in Visual Studio Code. Make sure you have a local development environment set up, preferably with Visual Studio Code, NPM, and Node installed. If you don't have npm installed, here's how to set it up.

Start your project by navigating to the your_work folder:

cd your-work
npm start

This will start an HTTP server at http://localhost:5000. Open a browser and go to that address. The page will be blank for now, but that will change soon.

Note: To see updates on your screen, refresh your browser.

Add code

Add the necessary code to your-work/app.js to complete the following tasks:

Draw a canvas with a black background.

Tip: Add two lines of code under the appropriate TODO in /app.js to set the ctx element's background to black. Set the top-left coordinates to 0,0 and the height and width to match the canvas dimensions.
Load textures.

Tip: Use await loadTexture to load the player and enemy images by passing their file paths. You won't see them on the screen just yet!
Draw the hero in the center of the screen, near the bottom.

Tip: Use the drawImage API to draw heroImg on the screen. Set the coordinates to canvas.width / 2 - 45 and canvas.height - canvas.height / 4.

Draw a 5x5 grid of monsters.

Tip: Uncomment the code to draw enemies on the screen. Then, go to the createEnemies function and complete it.

Start by defining 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;

Next, create a loop to draw the array of monsters on 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 final result should look like this:

Solution

Try solving this on your own first, but if you get stuck, you can check out the solution.

🚀 Challenge

Now that you've learned how to draw with the 2D-focused Canvas API, explore the WebGL API and try creating a 3D object.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Learn more about the Canvas API by reading about it.

Assignment

Play with the Canvas API

Disclaimer:
This document has been translated using the AI translation service Co-op Translator. While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.