The best way to learn is by making things you care about and sharing them with others.
And that's what Game Lab is all about.
Have you ever wanted to...
- Make Pong in 30 lines of code?
- Create the Chrome dino game in 50?
- Or... even better... make a delightful game that doesn't exist yet?
Then get building with Game Lab!
You should be able to get started in Game Lab with very little experience programming but you should still be able to have fun with it even if you're an expert. Enjoy and we'd love to see what you make!
(and scroll down for a brief tutorial to get started) !
Learning from functional examples is the best way to get started building games with Game Lab.
Below we have created a series of short examples with code that works, that grow from creating a character on the screen to creating a more complicated game.
Initialize the game engine (this should already be written for you when you open the editor)
const e = createEngine(gameCanvas, 300, 300);
const e = createEngine(gameCanvas, 300, 300);
e.add({
tags: ["test"],
x: 188,
y: 69,
sprite: test_sprite,
scale: 4,
})
e.start();
const e = createEngine(gameCanvas, 300, 300);
e.add({
tags: ["test"],
solid: true,
x: 135,
y: 114,
sprite: test_sprite,
scale: 4,
update(obj) {
obj.vy += 2;
}
})
e.add({
tags: ["floor"],
solid: true,
x: -6,
y: 283,
sprite: floor,
scale: 11,
})
e.start();
const e = createEngine(gameCanvas, 300, 300);
e.add({
tags: ["test"],
solid: true,
x: 135,
y: 114,
sprite: test_sprite,
scale: 4,
update(obj) {
obj.vy += 2;
}
})
e.add({
tags: ["floor"],
solid: true,
x: -6,
y: 283,
sprite: floor,
scale: 11,
})
e.start();
const e = createEngine(gameCanvas, 300, 300);
e.add({
tags: ["test"],
solid: true,
x: 135,
y: 114,
sprite: test_sprite,
scale: 4,
collides(me, them) {
if (e.pressedKey(" ")) {
if (them.hasTag("floor")) me.vy -= 19;
}
},
update(obj) {
obj.vy += 2;
if (e.heldKey("ArrowLeft")) obj.x -= 3;
if (e.heldKey("ArrowRight")) obj.x += 3;
}
})
e.add({
tags: ["floor"],
solid: true,
x: -6,
y: 283,
sprite: floor,
scale: 11,
})
e.start();
const e = createEngine(gameCanvas, 300, 300);
const ctx = e.ctx;
e.add({
tags: ["player"],
sprite: test_sprite,
scale: 3,
solid: true,
x: 50,
y: 16,
collides(me, them) {
if (them.hasTag("platform")) me.vx = them.vx;
if (e.pressedKey(" ")) {
if (them.hasTag("platform")) me.vy -= 11;
}
},
update: (obj) => {
obj.ay = 0.4;
if (e.heldKey("ArrowLeft")) obj.x -= 3;
if (e.heldKey("ArrowRight")) obj.x += 3;
},
})
const addPlatform = (x, y) => e.add({
tags: ["platform"],
sprite: floor,
scale: 3,
solid: true,
x: x,
y: y,
vx: -1,
bounce: -1,
update: (obj) => {
if (obj.x < 0) obj.vx = 1;
if (obj.x + obj.width > e.width) obj.vx = -1
},
})
addPlatform(50, 200);
addPlatform(20, 100);
e.start();
const e = createEngine(gameCanvas, 300, 300);
e.add({
update() {
e.ctx.fillStyle = "pink";
e.ctx.fillRect(0, 0, e.width, e.height);
}
})
e.start();
const e = createEngine(gameCanvas, 300, 300);
const ctx = e.ctx;
e.add({
tags: ["player"],
sprite: test_sprite,
scale: 2,
x: 150,
y: 50,
update: (obj) => {
if (e.heldKey("ArrowUp")) obj.y -= 3;
if (e.heldKey("ArrowDown")) obj.y += 3;
},
})
e.add({
tags: ["target"],
sprite: floor,
scale: 3,
x: 112,
y: 232,
collides(me, them) {
if (them.hasTag("player")) e.remove("target");
}
})
e.start();Refer to the following example for all the available object properties:
e.add({
tags: ["tag-name"],
solid: true,
x: 178,
y: 126,
vx: 1,
vy: 3,
ax: 0,
ay: 0,
sprite: ball,
scale: 2,
bounce: 1,
origin: [0, 0], // x: 0 - 1, y: 0 - 1, "left|center|right top|center|bottom", "center"
collides(me, them) {
if (them.hasTag("tag-name")) {
me.vx *= 1.3;
me.vy *= 1.3;
}
},
update: (obj) => {
if (e.heldKey("ArrowDown")) obj.y += 3;
if (e.pressedKey("ArrowUp")) obj.y -= 3;
if (obj.y < 0) obj.vy *= -1;
if (obj.y > e.height - obj.height) obj.vy *= -1;
if (obj.x < 0) {
e.end();
e.addText("Blue Wins", e.width/2, e.height/2, { color: "blue", size: 32 })
}
if (obj.x > e.width - obj.width) {
e.end();
e.addText("Red Wins", e.width/2, e.height/2, { color: "red", size: 32 })
}
},
})
This could be because you made your game in an old version of Game Lab.
Game Lab is in active development. We want to make sure you can play the games you make even if they aren't compatible with the newest version of the editor. If you made a game and need to run it on an old version of Game Lab you can use this site: https://game-lab-server-1.maxwofford.repl.co/[SEMANTIC_VERSION]/index.html
For example the first release of Game Lab is available here: https://game-lab-server-1.maxwofford.repl.co/0.1.0/index.html
Check out a minimal example game: Superb Macedonian Plumber Bro.
As we said before people learn best when they make things that they care about which they can share with others. This learning philosophy is called constuctionism and Game Lab is a type of microworld. It's an environment where you can discover programming by using it to express yourself.
Game Lab could also be considered a minimalist fantasy console sort of like Pico-8.
Join #gamelab-dev on the Hack Club Slack to join the development discussion
The Hack Club Game Lab requires a local HTTP server to run in development. Here's how to get it running on your own machine.
Clone repo:
$ git clone https://github.com/hackclub/game-lab
Start a local HTTP server inside the repo:
$ cd game-lab/
$ python3 -m http.server 3000
And then go to https://localhost:3000 in your web browser, and it should work!
The Hack Club Game Lab is open source and licensed under the MIT License. Fork, remix, and make it your own! Pull requests and other contributions greatly appreciated.