Adding Kicking

Learn how to create an awesome online soccer game!

1. In room.js, Change the setupCharacters functions to be circles.

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

---

2. In room.js, add a dx and dy.

	dx: 0,
	dy: 0,

---

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

		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.

	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

← Previous

Add Scoring A Goal

Next →