Adding Kicking

Learn how to create an awesome online soccer game!

1. In room.js, Change the setupCharacters functions to be circles.
code/client/src/game.js

	g.setupCharacters('players', 'circle');
	g.setupCharacters('goals', 'circle');
	g.setupCharacters('soccerBalls', 'circle');


2. In room.js, add a dx and dy.
code/client/src/game.js

	dx: 0,
	dy: 0,


3. In room.js, add come code so that the balls move inside the onUpdate(dt) function.
code/client/src/game.js

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


4. In room.js, Add the values for the collision right after the code we just added.
code/client/src/game.js

	g.handleCollision('players', 'soccerBalls', (player, ball) => {
		ball.dx = g.getXTowards(player, ball.x, ball.y);
		ball.dy = g.getYTowards(player, ball.x, ball.y);
	});


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


Add Soccer Balls
Add Scoring A Goal

Need Help?

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

Click Here for Help