Place Blocks

Learn how to create an awesome online soccer game!

1. in game.js, Add addCharacters function to add the blocks to your game.
code/client/src/game.js

	g.addCharacters('blocks', 0.5);
}


2. in game.js, Add loadImage functions to add the block images
code/client/src/game.js

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


3. In game.js, Add getCharacters function to add the blocks to the game.
code/client/src/game.js

g.getCharacters('blocks');


4. In game.js, Add an if statement so that when you click the moouse it will place a block.
code/client/src/game.js

if (g.canSend()) {
		g.sendAction('placeBlock', {x, y});
	}


5. In room.js, Add setupCharacters, function to setup the block.
code/client/src/game.js

g.setupCharacters('blocks');

6. In room.js, Add the blocks into the game.
code/client/src/game.js

	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'});
		}
	},


7. In room.js, Add code so that the balls collide with the blocks.
code/client/src/game.js

	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);
		}
	});


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


Add Blocks
Soccer Game

Need Help?

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

Click Here for Help