Add Soccer Balls

Learn how to create an awesome online soccer game!

2. Upload the new image for the Soccer Ball to the Assets folder in Repl.
  1. Find the downloaded images. Need help?
  2. Open the asset folder in repl, click: code > client > asset
  3. Click and drag your files into this folder. Make sure your files are named something very easy and obvious (it is best to not use spaces or symbols), for example “zombies.png” or “shark.png”.

3. In game.js, Add addCharacters function to add the soccer balls.
code/client/src/game.js

	g.addCharacters('soccerBalls', 0.2);


3. In game.js Add loadImage function to load the soccer balls.
code/client/src/game.js

	g.loadImage('soccerBalls', 'ball.png');


4. In game.js, Add getCharacters function to get the soccer balls.
code/client/src/game.js

	g.getCharacters('soccerBalls');


5. In, room.js, Add setupCharacters function so the server loads the soccer balls.
code/client/src/game.js

	g.setupCharacters('soccerBalls');


6. In room.js, Add addABall function so it adds a ball for every two players.
code/client/src/game.js

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


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


Add Goals
Adding Kicking

Need Help?

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

Click Here for Help