Game dev 101 part 2

Game development 101, part 2 –
game dev programming
Chris Noring
@chris_noring

Second lab, gravity
https://github.com/jlooper/bletchley-park-workshop/blob/main/workshop-
makecode-gravity.md

Constructing a game – the phases
- setup,
- Create the world
- Create you + enemies
- General setup
- Listens to input from
- User, are you moving the avatar?
- Enemy movement, moves towards you or
other patterns,
- World events, is there a timer we need to care
about, other things?
- State changes, Check for state changes
- You died
- You won
- Something happened, you:
- Picked up a coin
- Picked up extra life
- Went into building, sewer pipe (mario)
- Enemy died, adjust no of enemies

Programming
Get the machine to do what you want

Programming a
set of
instructions
verbs –
something you
do
nouns, data
Crack eggs Add sugar
Whisk eggs
and sugar
Add flour
Whisk flour
eggs and sugar
Set owen to
200 C
Bake 20 min

Turn nouns and verbs to variables to
programming
// data, nouns
let eggs = 3;
let bowl = new Bowl();
let sugar = 200; // ml
let owen = new Owen();
let cakepan = new CakePan();
• Crack eggs
• Add sugar
• Whisk eggs and sugar
• Add flour
• Whisk flour eggs and
sugar
• Set owen to 200 C
• Bake 20 min
// functions , what you do, verbs
addIngredient(sugar, bowl);
addIngredient(eggs, bowl);
whisk(bowl);
addIngredient(flour, bowl);
whisk(bowl);
cakepan.fill(bowl);
owen.setTemperature(200);
owen.bake(cakePan);

Variables and functions
let firstNumber = 3;
let secondNumber = 5;
let sum = firstNumber + secondNumber;
function calc(first, second) {
return first + second;
}
let sum = calc(firstNumber, secondNumber);
Variable name Variable value
Function body, what it does
Function keyword
Function name Parameters

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>
<body>
<canvas id="myCanvas" width="200"
height="100">
</canvas>
<script src=”app.js”></script>
</body>
</head>
</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

Space game, set up
• Load asset (your ship)
• Let’s paint an image, your ship
• Let’s paint a background
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();

Next time, space game, movement

Summary
Programming is like cooking, a set of instructions
A game has phases
• Setup
• Running
• Listen for user input
• Enemy movement
• World events
State changes, takes the game forward
• You or enemy dies
• Picks up coin, you level, level is changed etc.

Game dev 101 part 2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Game dev 101 part 2

Ähnlich wie Game dev 101 part 2 (20)

Mehr von Christoffer Noring

Mehr von Christoffer Noring (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Game dev 101 part 2

Hinweis der Redaktion