Introduction
So far, you've probably coded a game in MakeCode Arcade using the Blocks interface. However, there are limitations to using it. For example, wouldn't it be useful if we could create more player characters by re-using certain blocks, which will limit errors and needless duplication? With classes, we can! However, at this time of writing, there are no blocks with the category 'Class'. We can overcome this problem by using Javascript interface!Â
In this guide, we'll teach you the basics about object-oriented programming and how to implement it using the Javascript interface.
Complete this guide to start creating more efficiently-made and complex MakeCode Arcade games.
In this guide, we'll teach you the basics about object-oriented programming and how to implement it using the Javascript interface.
Complete this guide to start creating more efficiently-made and complex MakeCode Arcade games.
Tools
-
-
-
-
let wizard = sprites.create(img` . . . . . . f f f f . . . . . . . . . . f f f 2 2 f f f . . . . . . . f f f 2 2 2 2 f f f . . . . . f f f e e e e e e f f f . . . . f f e 2 2 2 2 2 2 e e f . . . . f e 2 f f f f f f 2 e f . . . . f f f f e e e e f f f f . . . f f e f b f 4 4 f b f e f f . . f e e 4 1 f d d f 1 4 e e f . . . f e e d d d d d d e e f . . . . . f e e 4 4 4 4 e e f . . . . . e 4 f 2 2 2 2 2 2 f 4 e . . . . 4 d f 2 2 2 2 2 2 f d 4 . . . . 4 4 f 4 4 5 5 4 4 f 4 4 . . . . . . . f f f f f f . . . . . . . . . . f f . . f f . . . . . `) let warrior = sprites.create(img` . . . . . . 5 . 5 . . . . . . . . . . . . f 5 5 5 f f . . . . . . . . . f 1 5 2 5 1 6 f . . . . . . . f 1 6 6 6 6 6 1 6 f . . . . . . f 6 6 f f f f 6 1 f . . . . . . f 6 f f d d f f 6 f . . . . . f 6 f d f d d f d f 6 f . . . . f 6 f d 3 d d 3 d f 6 f . . . . f 6 6 f d d d d f 6 6 f . . . f 6 6 f 3 f f f f 3 f 6 6 f . . . f f d 3 5 3 3 5 3 d f f . . . . f d d f 3 5 5 3 f d d f . . . . . f f 3 3 3 3 3 3 f f . . . . . . f 3 3 5 3 3 5 3 3 f . . . . . . f f f f f f f f f f . . . . . . . . f f . . f f . . . . . `)
-
function playerSelection() { game.showLongText("Player Selection"); let wizard = sprites.create(img` . . . . . . f f f f . . . . . . . . . . f f f 2 2 f f f . . . . . . . f f f 2 2 2 2 f f f . . . . . f f f e e e e e e f f f . . . . f f e 2 2 2 2 2 2 e e f . . . . f e 2 f f f f f f 2 e f . . . . f f f f e e e e f f f f . . . f f e f b f 4 4 f b f e f f . . f e e 4 1 f d d f 1 4 e e f . . . f e e d d d d d d e e f . . . . . f e e 4 4 4 4 e e f . . . . . e 4 f 2 2 2 2 2 2 f 4 e . . . . 4 d f 2 2 2 2 2 2 f d 4 . . . . 4 4 f 4 4 5 5 4 4 f 4 4 . . . . . . . f f f f f f . . . . . . . . . . f f . . f f . . . . . `) let warrior = sprites.create(img` . . . . . . 5 . 5 . . . . . . . . . . . . f 5 5 5 f f . . . . . . . . . f 1 5 2 5 1 6 f . . . . . . . f 1 6 6 6 6 6 1 6 f . . . . . . f 6 6 f f f f 6 1 f . . . . . . f 6 f f d d f f 6 f . . . . . f 6 f d f d d f d f 6 f . . . . f 6 f d 3 d d 3 d f 6 f . . . . f 6 6 f d d d d f 6 6 f . . . f 6 6 f 3 f f f f 3 f 6 6 f . . . f f d 3 5 3 3 5 3 d f f . . . . f d d f 3 5 5 3 f d d f . . . . . f f 3 3 3 3 3 3 f f . . . . . . f 3 3 5 3 3 5 3 3 f . . . . . . f f f f f f f f f f . . . . . . . . f f . . f f . . . . . `) scene.setBackgroundColor(9); } function createLevel (num: number) { levelTileMaps = [img` . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 . . . . . 6 . . . . . . . . 6 6 . . . . 6 . . . . . . . 6 . . 6 6 . . . 6 6 6 6 . . . . . 6 6 6 6 . . . 6 . . . 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . `, img` . . . . . . . . . . . . . . . . . . . . . . . . . . 6 6 6 6 6 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 . . . . . . . . . . . 6 . . . . . . . . . . 6 . . . . . . . . 6 . . . . . . . 6 . . 6 6 . 6 . . . . . 6 . . 6 . . . 6 . . . . 6 . . . . . . 6 6 . 6 6 6 6 6 6 . . . 6 6 6 . 6 6 . 6 6 . . . . 6 . . . . . 6 6 6 6 6 6 6 6 6 6 6 . 6 6 6 6 6 6 6 6 6 6 . . . . 6 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . `, img` . . 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 . . . . . . . . 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 . . . . . . . . . . . 6 . 6 . . . . . . . 6 6 6 6 . . . . . 6 6 6 . . . . . . 6 6 . . . 6 6 . . . . . . 6 6 6 6 6 6 . . . 6 6 6 6 6 6 6 6 6 6 6 6 6 . . . 6 . . . 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . `, img` . . . . . . . . . . . . . 6 6 6 6 . . . . . . . . . . . . . . 6 . . . . . . . . . . . . . . 6 6 . . . . . . . . . . . . . . . 6 . . . . . . . . . . . . . . . 6 . . . . . . . . 6 . . . 6 6 6 6 . . . . . . . . . . . . . . . 6 . . . . . 6 . 6 6 . . . . . . 6 . . . . . 6 6 6 6 6 6 . . . . . . . . . 6 6 6 6 6 . . . . . . 6 . . . . 6 6 6 6 6 6 6 6 6 . . . . . . 6 6 6 6 6 6 6 . . . . . 6 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . `] scene.setTileMap(levelTileMaps[num]) scene.setTile(8, img` c c c c c c c c c c c c c c c c b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b a b b b b b b b b b b b b b b b a a b b b b b b a b b b b a a b c c a a c c c c c a b b a c c c f f c c f f f f f f c c f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f `, true) scene.setTile(6, img` . . f c c c c c c c c c c f . . . c 5 5 5 5 5 5 5 5 5 5 5 5 c . f 5 6 6 6 6 6 6 6 6 6 6 6 6 6 f c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c c 5 6 6 6 6 6 6 6 6 6 6 6 6 f c f 5 6 6 6 6 6 6 6 6 6 6 6 6 f f . c f f f f f f f f f f f f c . . . . c c c c c c c c c c . . . `, true) character.setPosition(25, 88) clearItems() generateCoins() generateItems() generateEnemies() }
-
function playerSelection() { game.showLongText("Player Selection"); let wizard = sprites.create(img` . . . . . . f f f f . . . . . . . . . . f f f 2 2 f f f . . . . . . . f f f 2 2 2 2 f f f . . . . . f f f e e e e e e f f f . . . . f f e 2 2 2 2 2 2 e e f . . . . f e 2 f f f f f f 2 e f . . . . f f f f e e e e f f f f . . . f f e f b f 4 4 f b f e f f . . f e e 4 1 f d d f 1 4 e e f . . . f e e d d d d d d e e f . . . . . f e e 4 4 4 4 e e f . . . . . e 4 f 2 2 2 2 2 2 f 4 e . . . . 4 d f 2 2 2 2 2 2 f d 4 . . . . 4 4 f 4 4 5 5 4 4 f 4 4 . . . . . . . f f f f f f . . . . . . . . . . f f . . f f . . . . . `) let warrior = sprites.create(img` . . . . . . 5 . 5 . . . . . . . . . . . . f 5 5 5 f f . . . . . . . . . f 1 5 2 5 1 6 f . . . . . . . f 1 6 6 6 6 6 1 6 f . . . . . . f 6 6 f f f f 6 1 f . . . . . . f 6 f f d d f f 6 f . . . . . f 6 f d f d d f d f 6 f . . . . f 6 f d 3 d d 3 d f 6 f . . . . f 6 6 f d d d d f 6 6 f . . . f 6 6 f 3 f f f f 3 f 6 6 f . . . f f d 3 5 3 3 5 3 d f f . . . . f d d f 3 5 5 3 f d d f . . . . . f f 3 3 3 3 3 3 f f . . . . . . f 3 3 5 3 3 5 3 3 f . . . . . . f f f f f f f f f f . . . . . . . . f f . . f f . . . . . `) scene.setBackgroundColor(9); } playerSelection();
-
-
-
class Player { name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } class HumanPlayer extends Player { constructor(name: string) { super(name); } move(distanceInMeters = 5) { console.log("Walking..."); super.move(distanceInMeters); } } class ComputerPlayer extends Player { constructor(name: string) { super(name); } move(distanceInMeters = 45) { console.log("Walking..."); super.move(distanceInMeters); } }
-
class Player { name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } class HumanPlayer extends Player { constructor(name: string) { super(name); } move(distanceInMeters = 5) { console.log("Walking..."); super.move(distanceInMeters); } } class ComputerPlayer extends Player { constructor(name: string) { super(name); } move(distanceInMeters = 45) { console.log("Walking..."); super.move(distanceInMeters); } } let sam = new HumanPlayer("Sammy"); let opponent: Player = new ComputerPlayer("Opponent"); sam.move(); opponent.move(50);
-
-
-
class Player { public name: string; public constructor(theName: string) { this.name = theName; } } new Player("Tom").name;
-
class Player { private name: string; constructor(theName: string) { this.name = theName; } } new Player("Tom").name; // Error: 'name' is private;
-
class Player { protected name: string; constructor(name: string) { this.name = name; } } class HumanPlayer extends Player { private role: string; constructor(name: string, role: string) { super(name); this.role = role; } public getOpeningSpeech() { return `Hello, my name is ${this.name} and I am a ${this.role}.`; } } let tim = new HumanPlayer("Tim", "Wizard"); console.log(tim.getOpeningSpeech()); // this will output 'Hello, my name is Tim and I am a Wizard' console.log(tim.name); // error
-
namespace SpriteKind { export const Warrior = SpriteKind.create() export const Wizard = SpriteKind.create() export const Boss = SpriteKind.create() export const Chest = SpriteKind.create() export const Sword = SpriteKind.create() export const Shield = SpriteKind.create() export const Wand = SpriteKind.create() } sprites.onOverlap(SpriteKind.Warrior, SpriteKind.Chest, function (mainSprite, hitSprite) { chestsCollected++; music.baDing.play(); hitSprite.destroy(); })
-