3. Recap, game dev
in your browser
// 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
4. Draw on the web
• JavaScript, the programming language
• Canvas, we can paint things on it like:
• Images
• Primitives like rectangles
• Let’s paint someting:
index.html
app.js
<html>
<head></head>
<body>
<canvas id="myCanvas" width="200"
height="100">
</canvas>
<script src=”app.js”></script>
</body>
</html>
// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas")
//2. set the context to 2D to draw basic sha
ctx = canvas.getContext("2d");
//3. fill it with the color red
ctx.fillStyle = 'red’;
//4. and draw a rectangle with these paramet
setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, he
5. Get started on the space game project
• https://github.com/microsoft/Web-Dev-For-Beginners
• Unzip
• Download VS Code, https://code.visualstudio.com/download
• Install Live Server Extension
6. Our project
• index.html
• app.js
• hero.png
<html>
<head></head>
<body>
<canvas id="myCanvas" width="200"
height="100">
</canvas>
<script src=”app.js”></script>
</body>
</html>
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);
}
})
}
async function run() {
const heroImg = await
loadAsset('hero.png’)
canvas =
document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.drawImage(heroImg,
canvas.width/2,canvas.height/2);
}
run();
7. Space game, set up
• Load asset (your ship)
• Let’s paint an image, your ship
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);
}
})
}
async function run() {
const heroImg = await loadAsset('hero.png’)
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.drawImage(heroImg,
canvas.width/2,canvas.height/2);
}
run();
8. Run our
project
• Install VS Code
• Install Live server
extension
• View > Command palette
• Live Server: Open with
Live Server
9. Drawing hero and enemies
window.onload = async() => {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
const heroImg = await loadTexture('assets/player.png’)
const enemyImg = await loadTexture('assets/enemyShip.png’)
ctx.fillStyle = 'black’;
ctx.fillRect(0,0, canvas.width, canvas.height);
ctx.drawImage(heroImg, canvas.width/2 - 45, canvas.height -
(canvas.height /4));
createEnemies(ctx, canvas, enemyImg);
};
function createEnemies(ctx, canvas, enemyImg) {
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);
}
}
}
function loadTexture(path) {
return new Promise((resolve) => {
const img = new Image();
img.src = path;
img.onload = () => {
resolve(img);
}})
}
10. Let’s make it move
• User key press
• Game moves enemies at
regular intervals
• Change position of ship and
enemies
• Redraw
12. Event emitter – avoid messy code
Event
emitter
Pressing space
Enter
Arrow keys
Move hero
Shoot
Restart game
Capture keypress
Raise event
13. Event emitter, listen for events, send them
where they need to go
class EventEmitter {
constructor() {
this.listeners = {};
}
on(message, listener) {
if (!this.listeners[message]) {
this.listeners[message] = [];
}
this.listeners[message].push(listener);
}
emit(message, payload = null) {
if (this.listeners[message]) {
this.listeners[message].forEach((l) => l(message,
payload));
}
}
22. Summary
• We’ve learned to make games in MakeCode, we saw how to add gravity
• You’ve been introduced to coding in JavaScript and for the Web
• What’s next? Keep building games, start with MakeCode, start looking at the code
tab (instead of the block), modify, that’s how I started
• Pick up programming, https://github.com/microsoft/Web-Dev-For-Beginners
• https://www.w3schools.com/
• Look at these https://github.com/leereilly/games learn to read code, modify
• Super Mario in JavaScript, https://github.com/robertkleffner/mariohtml5
• It takes months to get good at coding, years to be a game dev, don’t forget to
have fun
• Here is the space game as MakeCode, https://makecode.com/_98TWHKJJ6Jt4 lot
simpler right, go and make it yours, modify, good luck out there
Notas do Editor
DOM tree, what a page is, a list of hierarchical nodes, that we can change
Canvas, what we can point on, also a Node
A canvas a has a contexr, what we actually interact with when we paint something