Soccer Game

Learn how to create an awesome online soccer game!

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. Background

2.1 The first thing we are going to do is upload a background image for our game (Need Help?).

2.2 Then we will load the image into the game.

// In repl click on: code > client > src > game.js

// Scroll down until you see this code:
preload() {
	g.loadImage('players', 'logo.png'); // Click here and hit enter
// Then add this new line of code:
	g.loadImage('background', 'grass.jpg');
}

2.3 After that we will draw the background.

// In the same file, game.js

// Scroll down until you see this code:
	g.getCharacters('players', (player) => {
		if (player.id === g.myId()) {
			g.cameraFollow(player.sprite);
		}
	}); // Click here and hit enter
// Then add this new line of code:
	g.drawBackground('background', 0.8);
}

Download your zip, and upload it to blobbert.io, and you should have a background!

3. Players

3.1 We are going to add some character options. The first thing we need to do is upload all of our character images (Need Help?).

3.2 We need to set the players default image.

// In repl click on: code > client > src > game.js

// Scroll down until you see this code:
	g.loadImage('players', 'logo.png');
// And change it to say:
	g.loadImage('players', 'circle1.png');

3.3 Then we will load all of the new images.

// In the same file, game.js

// In the same spot:
	g.loadImage('players', 'circle1.png');
	g.loadImage('background', 'grass.jpg'); // Click here and hit enter
// Then add these new lines of code:
	g.loadImage('blobbert', 'circle1.png');
	g.loadImage('grunch', 'circle2.png');
	g.loadImage('neon', 'circle3.png');
	g.loadImage('nimbo', 'circle4.png');
	g.loadImage('tangles', 'circle5.png');
// End of the new code
}

3.4 Next we need to add a player select screen.

// In the same file, game.js

// Scroll down until you see this code:
	g.useLoginScreen((name) => g.connect({ name }));  // Click here and hit enter
// Then add these new lines of code:
	g.usePlayerSelectScreen({
		blobbert: 'circle1.png',
		grunch: 'circle2.png',
		neon: 'circle3.png',
		nimbo: 'circle4.png',
		tangles: 'circle5.png',
	});
// End of the new code
	g.useHowToScreen('How to play', {

3.5 After that we need to send the player’s choice to the server.

// In the same file, game.js

// In the same spot:
// Change this code:
	g.useLoginScreen((name) => g.connect({ name }));
// And make it say this:
	g.useLoginScreen((name, spriteName) => g.connect({ name, spriteName }));

Download your zip, and upload it to blobbert.io, and you should be able to choose your character!

4. Goals

4.1 We need to add the goals characters.

// In repl click on: code > client > src > game.js

// Scroll down until you see this code:
	g.addCharacters('players', 0.6);  // Click here and hit enter
// Then add this new line of code:
	g.addCharacters('goals', 0.6);
}

4.2 Then we need to upload a goal image (Need Help?).

4.3 Next we need to load the goal image.

// In the same file, game.js

// Scroll down until you see this code:
	g.loadImage('tangles', 'circle5.png'); // Click here and hit enter
// Then add this new line of code:
	g.loadImage('goals', 'goal.png');
}

4.4 Then we need to set the player depth.

// In the same file, game.js

// Scroll down until you see this code:
	g.getCharacters('players', (player) => { // Click here and hit enter
	// Then add this new line of code:
		player.sprite.depth = 5;
		if (player.id === g.myId()) {
			g.cameraFollow(player.sprite);
		}
	});

4.5 We also need to get the goals.

// In the same file, game.js

// Scroll down until you see this code:
	g.drawBackground('background', 0.8); // Click here and hit enter
// Then add this new line of code:
	g.getCharacters('goals');

4.6 In our server code we need to setup the goals.

// 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('goals');
}

4.7 Then we need to create each player’s goal.

// In the same file, room.js

// Scroll down until you see this code:
	g.createACharacter('players', client.sessionId, { x, y, ...data }); // Click here and hit enter
// Then add this new line of code:
	g.createACharacter('goals', client.sessionId, { x, y });

4.8 Finally we need to delete a goal when someone leaves.

// In the same file, room.js

// Scroll down until you see this code:
onLeave(client) {
	g.deleteACharacter('players', client.sessionId); // Click here and hit enter
// Then add this new line of code:
	g.deleteACharacter('goals', client.sessionId);
}

Download your zip, and upload it to blobbert.io, and each player should now have a goal!

5. Soccer Balls

5.1 First we need to upload the picture of our soccer ball (Need Help?).

5.2 Then we need to setup the soccer ball characters.

// In repl click on: code > client > src > game.js

// Scroll down until you see this code:
	g.addCharacters('goals', 0.6); // Click here and hit enter
// Then add this new line of code:
	g.addCharacters('soccerBalls', 0.2);
}

5.3 Next we need to load the soccer ball image.

// In the same file, game.js

// Scroll down until you see this code:
	g.loadImage('goals', 'goal.png'); // Click here and hit enter
// Then add this new line of code:
	g.loadImage('soccerBalls', 'ball.png');
}

5.4 Finally we need to get the soccer balls.

// In the same file, game.js

// Scroll down until you see this code:
	g.getCharacters('goals'); // Click here and hit enter
// Then add this new line of code:
	g.getCharacters('soccerBalls');
}

5.5 In our server code we need to setup the soccer balls.

// In repl click on: code > server > rooms > room.js

// Scroll down until you see this code:
	g.setupCharacters('goals'); // Click here and hit enter
// Then add this new line of code:
	g.setupCharacters('soccerBalls');
}

5.6 Then we need to add a ball.

// In the same file, room.js

// Scroll down until you see this code:
	g.createACharacter('goals', client.sessionId, { x, y }); // Click here and hit enter
// Then add these new lines of code:
	this.addABall();

5.7 Finally we need to create one ball for every two players.

// In the same file, room.js

// Scroll down until you see this code:
	g.handleActions(actions, data);
}
// Click on the empty line and press enter
// Then add these new lines of code:
addABall() {
	const playersPerBall = 2;
	const numOf = (t) => Object.keys(this.state[t]).length;
	if (
		numOf('players') % playersPerBall === 0 &&
		numOf('soccerBalls') < numOf('players') / playersPerBall
	) {
		g.createACharacter('soccerBalls',
			g.nextCharacterId('soccerBalls'), {
				x: GAME_WIDTH / 2,
				y: GAME_HEIGHT / 2,
			});
	}
} // Click here and hit enter
// End of the new code
onUpdate(dt) {

Download your zip, and upload it to blobbert.io, and a soccer ball should appear once 2 players join!

6. Kick the ball

6.1 The first thing we need to do is set all of our characters as circles.

// In repl click on: code > server > rooms > room.js

// Scroll down until you see these lines of code:
	g.setupCharacters('players');
	g.setupCharacters('goals');
	g.setupCharacters('soccerBalls');
// Then change them to:
	g.setupCharacters('players', 'circle');
	g.setupCharacters('goals', 'circle');
	g.setupCharacters('soccerBalls', 'circle');

6.2 After that we need to do is add some values to our soccerBalls.

// In the same file, room.js

// Scroll down until you see this code:
			g.nextCharacterId('soccerBalls'), {
				x: GAME_WIDTH / 2,
				y: GAME_HEIGHT / 2, // Click here and hit enter
			// Then add these new lines of code:
				dx: 0,
				dy: 0,
			// End of the new code
			});

6.3 Next we need to make the soccerBalls move based on those values.

// In the same file, room.js

// Scroll down until you see this code:
onUpdate(dt) {
// Then add these new lines of code:
	const friction = (dv) => dv > -0.01 && dv < 0.01 ? 0 : dv - dv / 6000;
	g.getAllCharacters('soccerBalls', (ball) => {
		g.move(ball, 'x', ball.dx);
		g.move(ball, 'y', ball.dy);
		const bounceX = (ball.x <= ball.width / 2 ||
			ball.x >= GAME_WIDTH - ball.width / 2) ? -1 : 1;
		const bounceY = (ball.y <= ball.height / 2 ||
			ball.y >= GAME_HEIGHT - ball.height / 2) ? -1 : 1;
		ball.dx = bounceX * friction(ball.dx);
		ball.dy = bounceY * friction(ball.dy);
	});
// End of the new code
}

6.4 After that, we need to set the values when we kick the ball.

// In the same file, room.js

// Right after the code we just added:
		ball.dy = friction(ball.dy);
	}); // Click here and hit enter
// Then add these new lines of code:
	g.handleCollision('players', 'soccerBalls', (player, ball) => {
		ball.dx = g.getXTowards(player, ball.x, ball.y);
		ball.dy = g.getYTowards(player, ball.x, ball.y);
	});
// End of the new code
}

Download your zip, and upload it to blobbert.io, and you should be able to kick the soccer ball!

7. Score a goal

7.1 First we need to add data to the players.

// In repl click on: code > server > rooms > room.js

// Scroll down until you see this line of code:
	g.createACharacter('players', client.sessionId, { x, y, ...data });
// And change it to say this:
	g.createACharacter('players', client.sessionId,
		{ ...data, x, y, score: 0, lives: 3, block3s: 0, block5s: 0 });

7.2 Then we need to add a kicker to the ball.

// In the same file, room.js

// Scroll down until you see this code:
	g.createACharacter('soccerBalls',
		g.nextCharacterId('soccerBalls'), {
			x: GAME_WIDTH / 2,
			y: GAME_HEIGHT / 2,
			dx: 0,
			dy: 0, // Click here and hit enter
		// Then add this new line of code:
			kicker: '',
		});

7.3 Next we need to keep track of who kicked the ball last.

// In the same file, room.js

// Scroll down until you see this code:
	g.handleCollision('players', 'soccerBalls', (player, ball) => {
		ball.dx = g.getXTowards(player, ball.x, ball.y);
		ball.dy = g.getYTowards(player, ball.x, ball.y); // Click here and hit enter
		// Then add this new line of code:
		ball.kicker = player.id;
	});

7.4 Next we need to update the lives and scores when a goal is made.

// In the same file, room.js

// In the same spot:
		ball.dy = g.getYTowards(player, ball.x, ball.y);
		ball.kicker = player.id;
	}); // Click here and hit enter
// Then add these new lines of code:
	g.handleCollision('goals', 'soccerBalls', (goal, ball) => {
		if (ball.kicker !== goal.id) {
			g.getACharacter('players', ball.kicker).score += 1;
			g.getACharacter('players', goal.id).lives -= 1;
			g.deleteACharacter('soccerBalls', ball.id);
			setTimeout(() => this.addABall(), 3000);
		}
	});
// End of the new code
}

7.5 Finally we need to add a game over check.

// In repl click on: code > client > src > game.js

// Scroll down until you see this code:
	g.getCharacters('players', (player) => {
		player.sprite.depth = 5;
		if (player.id === g.myId()) {
			g.cameraFollow(player.sprite);
		} // Click here and hit enter
// Then add these new lines of code:
	},
	() => {},
	(id, attr, value) => {
		if (id === g.myId() && attr === 'lives' && value <= 0) {
			location.reload();
		}
// End of the new code
	});

Download your zip, and upload it to blobbert.io, and you should be able to score goals!

8. Block Shop

8.1 First we need to upload pictures of our blocks (Need Help?).

8.2 Then we need to create our store items.

// In repl click on: code > client > src > game.js

// Scroll down until you see this code:
	g.useStore('Block Shop', [
		// Add Store Items here! // Click here and hit enter
	// Then add these new lines of code:
		new g.StoreItem('block3.png', '3 Block', 'Points', 3, 'buy3'),
		new g.StoreItem('block5.png', '5 Block', 'Points', 4, 'buy5'),
	// End of the new code
	]);

8.3 Next we need to create the buy actions.

// In repl click on: code > server > rooms > room.js

// Scroll down until you see this code:
const actions = {
	moveUp: () => g.move(player, 'y', -speed),
	moveDown: () => g.move(player, 'y', speed),
	moveLeft: () => g.move(player, 'x', -speed),
	moveRight: () => g.move(player, 'x', speed), // Click here and hit enter
// Then add these new lines of code:
	buy3: () => g.purchase(player, 'score', 3, 'block3s', 1),
	buy5: () => g.purchase(player, 'score', 4, 'block5s', 1),
// End of the new code
};

Download your zip, and upload it to blobbert.io, and you should be able to buy blocks!

9. Place blocks

9.1 First we need to add block characters.

// In repl click on: code > client > src > game.js

// Scroll down until you see this code:
	g.addCharacters('soccerBalls', 0.2); // Click here and hit enter
// Then add this new line of code:
	g.addCharacters('blocks', 0.5);
}

9.2 Then we need to load our block images.

// In the same file, game.js

// Scroll down until you see this code:
	g.loadImage('soccerBalls', 'ball.png'); // Click here and hit enter
// Then add these new lines of code:
	g.loadImage('block1', 'block1.png');
	g.loadImage('block2', 'block2.png');
	g.loadImage('block3', 'block3.png');
	g.loadImage('block4', 'block4.png');
	g.loadImage('block5', 'block5.png');
// End of the new code
}

9.3 Next we need to get our blocks.

// In the same file, game.js

// Scroll down until you see this code:
	g.getCharacters('soccerBalls'); // Click here and hit enter
// Then add this new line of code:
	g.getCharacters('blocks');
}

9.4 We also need to place a block when we click.

// In the same file, game.js

// Scroll down until you see this code:
click(x, y) {
// Click on the empty line
// Then add these new lines of code:
	if (g.canSend()) {
		g.sendAction('placeBlock', {x, y});
	}
// End of the new code
}

9.5 Then we need to setup the blocks.

// In repl click on: code > server > rooms > room.js

// Scroll down until you see this line of code:
	g.setupCharacters('goals', 'circle');
	g.setupCharacters('soccerBalls', 'circle'); // Click here and hit enter
// Then add this new line of code:
	g.setupCharacters('blocks');
}

9.6 After that we need to add the blocks into the game.

// In the same file, room.js

// Scroll down until you see this code:
	buy3: () => g.purchase(player, 'score', 3, 'block3s', 1),
	buy5: () => g.purchase(player, 'score', 4, 'block5s', 1), // Click here and hit enter
// Then add these new lines of code:
	placeBlock: ({ x, y }) => {
		if (player.block5s > 0) {
			g.createACharacter('blocks', g.nextCharacterId('blocks'),
				{x, y, health: 5, spriteName: 'block5'});
		} else if (player.block3s > 0) {
			g.createACharacter('blocks', g.nextCharacterId('blocks'),
				{x, y, health: 3, spriteName: 'block3'});
		}
	},
// End of the new code
};

9.7 Finally we need to have the ball run into the blocks.

// In the same file, room.js

// Scroll down until you see this code:
			g.deleteACharacter('soccerBalls', ball.id);
			setTimeout(() => this.addABall(), 3000);
		}
	}); // Click here and hit enter
// Then add these new lines of code:
	g.handleCollision('soccerBalls', 'blocks', (ball, block) => {
		ball.dx = g.getXTowards(block, ball.x, ball.y);
		ball.dy = g.getYTowards(block, ball.x, ball.y);
		const bh = block.health - 1;
		if (bh > 0) {
			block.health = bh;
			block.spriteName = `block${bh}`;
		} else {
			g.deleteACharacter('blocks', block.id);
		}
	});
// End of the new code
}

Download your zip, and upload it to blobbert.io, and you should be able to place down blocks!

10. 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?


Need Help?

Proofread your code, check with your team and classmates, and if you’re still stuck!

Join us on Google Meet