1. Follow the build your game tutorial
To start, follow the game setup tutorial video from the tutorials tab on the codecontest.org website. You should now have a movable character, and be able to have multiple players join your server.
2. Add the background
First, make sure that you have the image that you want for your background added to your asset folder (Need Help?). Then, in the game.js file in our preload function we’ll write a loadImage function like this:
g.loadImage('background', 'background.png');
After that we stay in the game.js file and write a drawBackground function in our create function, which will look like this:
Added Code:
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
g.cameraFollow(player.sprite);
}
});// Click here and hit enter
// Then add this new line of code:
g.drawBackground( 'background', 3, 500, 2000 );
Then we need to go into the game.js file and delete the cameraBounds() method.
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
g.cameraBounds()
//delete it
And change the game width in the top of the room.js file
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
const GAME_WIDTH = 2000;
//change it to this
const GAME_WIDTH = 600;
Now we just need to change the numbers in our createACharacter function in our onJoin function in the room.js file and add a couple new variables.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.createACharacter('players', client.sessionId, { x: 200, y: 200, ...data});
//change it to this
g.createACharacter('players', client.sessionId, { x: 270, y: 1990, safe: false, speed: 5, spriteName: "players" });
Download your zip, and upload it to blobbert.io, and your game board should be set up!
3. Create Enemies
First, we need to go into the preload function in game.js and add a new image named after the new character set.
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
preload() {// Click here and hit enter
// Then add this new line of code:
g.loadImage('enemy', 'enemy.png');
In the room.js file we need to put a setupCharacters function in the onInit function.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.setupCharacters('players');// Click here and hit enter
// Then add this new line of code:
g.setupCharacters('enemy');
Then, in the game.js file we need to put an addCharacters function in the init function.
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
g.addCharacters('players', 0.5);// Click here and hit enter
// Then add this new line of code:
g.addCharacters("enemy", .5)
And a getCharacters function in the create function.
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
g.drawBackground( 'background', 3, 500, 2000 );// Click here and hit enter
// Then add this new line of code:
g.getCharacters("enemy")
Next, in the room.js file in the onInit function. We’re going to put a createACharacter function in a for loop.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.setupCharacters('enemy');// Click here and hit enter
// Then add this new line of code:
let i;
for (i = 0; i < 15; i++) { g.createACharacter('enemy', g.nextCharacterId('enemy'), { x: Math.floor((Math.random() * 500) + 1), y: Math.floor((Math.random() * 1900) + 1) }) }
Download your zip, and upload it to blobbert.io, and you should be able to see enemies!
4. Add enemy movement and collision
To do this we’ll go into our
onUpdatefunction in ourroom.jsfile and add ahandleCollisionfunction that sends our characters back to the start. ```javascript // In repl click on: code > server > rooms > room.js
// Scroll down until you see this code: onUpdate(dt) {// Click here and hit enter // Then add this new line of code: g.handleCollision(‘players’, ‘enemy’, (player) => { if (player.safe === false) { player.x = 270; player.y = 1980; } });
Then, in the `onUpdate` function in our `room.js` file we put a `getAllCharacters` _function_. (for our callback function we will set up some if else statements for the movement.
```javascript
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
if (player.safe === false) {
player.x = 270;
player.y = 1980;
}
});// Click here and hit enter
// Then add this new line of code:
g.getAllCharacters('enemy', (enemy, i) => {
if (enemy.x <= 575 && enemy.right == true) {
g.move(enemy, 'x', .01 * i + .1);
}
else if (enemy.x >= 25) {
enemy.right = false;
g.move(enemy, 'x', -.01 * i - .1);
}
else {
enemy.right = true;
}
});
Download your zip, and upload it to blobbert.io, and you should be able to interact with enemies!
5 set up safe zones and end zone
First, we’ll go into our game.js file and use an addLocations function above our addCharacters function.
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
g.setSize(GAME_WIDTH, GAME_HEIGHT);// Click here and hit enter
// Then add this new line of code:
g.addLocations('safeZone');
Then, still in the game.js file in the create function we’‘ll put a getLocations function above our getCharacters functions.
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
g.useStore('The Store', [
// Add Store Items here!
]);// Click here and hit enter
// Then add this new line of code:
g.getLocations('safeZone');
Then we will move into our room.js file in our onInit function and use a setupLocations function above our setupCharacters functions
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.setBounds(GAME_WIDTH, GAME_HEIGHT);// Click here and hit enter
// Then add this new line of code:
g.setupLocations('safeZone');
Now we are going to use 3 createLocations functions right under the setupLocations function that we just wrote, to create three different locations on the map.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.setupLocations('safeZone');// Click here and hit enter
// Then add this new line of code:
g.createALocation('safeZone', g.nextLocationId('safeZone'), { x: -47, y: 1940, width: 670, height: 100 }, '6cdc00', player => {
player.safe = true;
});
g.createALocation('safeZone', g.nextLocationId('safeZone'), { x: -47, y: 1000, width: 670, height: 100 }, '6cdc00', player => {
player.safe = true;
});
g.createALocation('safeZone', g.nextLocationId('safeZone'), { x: -47, y: 0, width: 670, height: 100 }, '6cdc00', player => {
g.getAllCharacters('players', player => { player.x = 270, player.y = 1990, player.spriteName = 'players' });
});
Now we will go into our onUpdate function in the room.js file and add a getAllCharacters function and a handleLocations function.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
else {
enemy.right = true;
}
});// Click here and hit enter
// Then add this new line of code:
g.getAllCharacters('players', player => { player.safe = false })
g.handleLocations('safeZone', 'players');
Now when we make it to the end our players are sent back to the first, later we’ll set up level’s so that we progress every time we make it to the end.
Download your zip, and upload it to blobbert.io, and you should be able to use the safe zones!
6. Set up name tags
To set up a name tag we will go into our
room.jsfile and add anattachTofunction in our onJoin function right after ourcreateACharacterfunction. ```javascript // In repl click on: code > server > rooms > room.js
// Scroll down until you see this code: g.createACharacter(‘players’, client.sessionId, { x: 270, y: 1990, safe: false, speed: 5, spriteName: “players” });// Click here and hit enter // Then add this new line of code: g.attachTo(‘players’, client.sessionId, { name: ‘nameTag’, x: -50, y: -60, type: ‘text’, text: data.name });
You can change where the name tag is created by changing the x and y values.
> **Download your zip, and [upload it](/tutorials/uploadtoserver/) to [blobbert.io](https://blobbert.io/), and you should be able to use the name tags!**
# 7. Set up scoring
First we need to add to go to the `room.js` file and put a `setupCharacters` _function_ in the `onInit` _function_.
```javascript
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.setupLocations('safeZone');// Click here and hit enter
// Then add this new line of code:
g.setupCharacters("team");
Then, in the game.js file we need to put an addCharacters function in the init function.
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
g.addCharacters("enemy", .5)// Click here and hit enter
// Then add this new line of code:
g.addCharacters("team")
And a getCharacters function in the create function.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.getCharacters("enemy")// Click here and hit enter
// Then add this new line of code:
g.getCharacters("team")
Now to get it working, we just need to go into our room.js file in the onInit function and use a createACharacter function to create our team character.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.setupCharacters("team");// Click here and hit enter
// Then add this new line of code:
g.createACharacter('team', 'team', { x: 10000, y: 10000, name: 'Level', score: 1 });
Now in the room.js file in the onInit function in the third createALocation function that we wrote, we’ll tell the score to up, and the difficulty to increase.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.createALocation('safeZone', g.nextLocationId('safeZone'), { x: -47, y: 0, width: 670, height: 100 }, '6cdc00', player => {// Click here and hit enter
// Then add this new line of code:
let team = g.getACharacter('team', 'team')
team.score += 1
g.getAllCharacters('enemy', enemy => { g.deleteACharacter('enemy', enemy.id) })
for (i = 0; i < team.score + 15; i++) { g.createACharacter('enemy', g.nextCharacterId('enemy'), { x: Math.floor((Math.random() * 500) + 1), y: Math.floor((Math.random() * 1900) + 1), right: true }) }
Download your zip, and upload it to blobbert.io, and you should be able to complete levels for score!
8. Set up Co-op gameplay
First, in the room.js file, we’ll change the speed in our onMessage function
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
const speed = 10;// Click here and hit enter
// Then add this new line of code:
const speed = player.speed;
Now, in the game.js file in our preload function we add a new image. First make sure you have the image in your asset folder (Need Help?).
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
preload() {// Click here and hit enter
// Then add this new line of code:
g.loadImage('grave', 'Grave.png')
Then, we need to change our handleCollision function for players and enemies in the onUpdate function in the room.js file.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.handleCollision('players', 'enemy', (player) => {
if (player.safe === false) {
player.x = 270;
player.y = 1980;
}
});
//Change it to this code:
g.handleCollision('players', 'enemy', (player) => {
if (player.safe == false) {
player.spriteName = "grave";
player.speed = 0;
let result = true;
g.getAllCharacters('players', player => {
if (player.speed == 5) {
result = false;
}
})
if (result == true) {
g.getACharacter('team', 'team').score = 1;
g.getAllCharacters('players', player => { player.x = 270, player.y = 1990, player.spriteName = 'players', player.speed = 5 });
}
}
});
Then we’ll add a handleCollision function for our players. We will put this in a setTimeout function. This will be written in our onUpdate function in the room.js file.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.getAllCharacters('players', player => { player.x = 270, player.y = 1990, player.spriteName = 'players', player.speed = 5 });
}
}
});// Click here and hit enter
// Then add this new line of code:
setTimeout(function () { g.handleCollision('players', 'players', (player1) => { if (player1.speed == 0) { player1.speed = 5, player1.spriteName = 'players' } }) }, 500);
And we should now have a fully functioning game! Feel free to customize it and change or add whatever you like!
Download your zip, and upload it to blobbert.io, and you should be able to save your friends if they get hit!
*Bonus
If you want to change your character image with each level you complete you can do this last step.
The first thing we will need to do is add 20 images into our preload function and name them accordingly:
// In repl click on: code > client > src > game.js
// Scroll down until you see this code:
preload(){
g.loadImage('player1', 'player1.png');
g.loadImage('player2', 'player2.png');
g.loadImage('player3', 'player3.png');
g.loadImage('player4', 'player4.png');
g.loadImage('player5', 'player5.png');
g.loadImage('player6', 'player6.png');
g.loadImage('player7', 'player7.png');
g.loadImage('player8', 'player8.png');
g.loadImage('player9', 'player9.png');
g.loadImage('player10', 'player10.png');
g.loadImage('player11', 'player11.png');
g.loadImage('player12', 'player12.png');
g.loadImage('player13', 'player13.png');
g.loadImage('player14', 'player14.png');
g.loadImage('player15', 'player15.png');
g.loadImage('player16', 'player16.png');
g.loadImage('player17', 'player17.png');
g.loadImage('player18', 'player18.png');
g.loadImage('player19', 'player19.png');
g.loadImage('player20', 'player20.png');
Then, we will go into our room.js file into our onUpdate function and change our setTimeout function to look like this
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
setTimeout(function () { g.handleCollision('players', 'players', (player1) => { if (player1.speed == 0) { player1.speed = 5; player1.spriteName = `players` } }) }, 500);
//change it to this
g.handleCollision('players', 'players', (player1) => { if (player1.speed == 0) { player1.speed = 5; player1.spriteName = `player${g.getACharacter('team', 'team').score}` } }) }, 500);
Then we’ll change the getAllCharacters function that’s inside of the if statement in our onUpdate function.
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.getAllCharacters('players', player => { player.x = 270; player.y = 1990; player.spriteName = `players`; player.speed = 5 });
//change it to this
g.getAllCharacters('players', player => { player.x = 270; player.y = 1990; player.spriteName = `player${g.getACharacter('team', 'team').score}`; player.speed = 5 });
Then we’ll change the createACharacter function in our onJoin function to look like this:
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.createACharacter('players', client.sessionId, { width: 75, height: 75, x: 270, y: 1990, safe: false, speed: 5, spriteName: `players` });
// change it to this
g.createACharacter('players', client.sessionId, { width: 75, height: 75, x: 270, y: 1990, safe: false, speed: 5, spriteName: `player${g.getACharacter('team', 'team').score}` });
Then we’ll change the first getAllCharacters in our createALocation function in the onInit function to look like this:
// In repl click on: code > server > rooms > room.js
// Scroll down until you see this code:
g.getAllCharacters('players', player => { player.x = 270; player.y = 1990; player.spriteName = `players` });
//change it to this
g.getAllCharacters('players', player => { player.x = 270; player.y = 1990; player.spriteName = `player${team.score}` });
Download your zip, and upload it to blobbert.io, and you should be able to change your character’s image every level!
9. Moving forward
Congrats! You finished this tutorial! But that doesn’t mean your game is done! You can still customize, add new features and improve it as much as you like. What’s Next?