Add Goals

Learn how to create an awesome online soccer game!

1. In game.js, Add addCharacters to add a new character for the Soccer Goal.
code/client/src/game.js

	g.addCharacters('goals', 0.6);


2. Upload the new image 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 the goals using the loadImage function.
code/client/src/game.js

	g.loadImage('goals', 'goal.png');


4. In game.js, Add the players depth.
code/client/src/game.js

		player.sprite.depth = 5;
		if (player.id === g.myId()) {
			g.cameraFollow(player.sprite);
		}
	});


5. In game.js, Add the goals using getCharacters Function so the they render in your game.
code/client/src/game.js

	g.getCharacters('goals');


6. In room.js, Add setupCharacters function to display the Goals.
code/client/src/game.js

	g.setupCharacters('goals');


7. In room.js Add CreateaChracter function to add Goals for each player.
code/client/src/game.js

	g.createACharacter('goals', client.sessionId, { x, y });


8. in room.js, Add deleteACharacter function so that players are removed when the leave the game.
code/client/src/game.js

	g.deleteACharacter('goals', client.sessionId);


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


Add More Characters
Add Soccer Balls

Need Help?

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

Click Here for Help