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!