Concept
For my Week 10 assignment, I decided to create a game inspired by football (soccer) and Daniel Shiffman’s Angry Birds slingshot mechanic. I came across a matter.js cloth sketch that moved like a football net, which sparked the idea to bring that into my sketch. I wanted to add a twist: instead of just launching the ball like in Angry Birds, the ball would interact with the goal net, creating a realistic effect. When the ball hits the net, it doesn’t just pass through—it actually impacts the net, which bends and moves as if hit by a real object. This reaction gives the game extra depth and makes scoring feel even more satisfying. Players use the slingshot to aim and score while racing against a 10-second timer. A goal counter keeps track of the number of goals scored, so you can try to beat your best score.
Embedded Sketch
Key Features
- Slingshot Mechanic: You use the slingshot to aim and launch the ball, trying to score goals by hitting the target.
- Interactive Goal Net: The net moves and reacts when the ball hits it, making the game feel more dynamic and realistic.
- Scoring: Each time you score, your goal count increases, and you get a satisfying visual of your progress.
- Physics-Based Collision: The ball interacts with both the goal and the net particles, which makes for a more immersive experience.
Code I’m Proud Of:
The piece of code I’m really proud of in this project is the way the ball interacts with the net. I wanted to make it so that when the ball hits the net, the net doesn’t just stay rigid or let the ball pass through like it’s not even there. Instead, it reacts and moves as though it’s actually impacted, which makes the game feel more real and satisfying.
Here’s the simplified idea: whenever the ball hits a certain area, which I’ve defined as the “goal box,” the code checks if the ball is near any of the net’s “particles.” These particles represent different points on the net that can move when hit by the ball. If the ball is close enough, a force is applied to these particles, which makes them move in response, simulating a realistic impact on the net. The ball’s velocity is then reduced to simulate a “catch,” which gives a nice effect of the ball being absorbed by the net.
// Define the area for the goal box (where the net is located)
let goalBoxX = width / 4 - 40;
let goalBoxY = 20;
let goalBoxW = goalBoxWidth;
let goalBoxH = goalBoxHeight;
if (
ball.body.position.x > goalBoxX &&
ball.body.position.x < goalBoxX + goalBoxW &&
ball.body.position.y > goalBoxY &&
ball.body.position.y < goalBoxY + goalBoxH
) {
// If the ball hasn't already scored, increase the goal count
if (!ball.scored) {
goalCount++;
ball.scored = true;
}
// Check for a "collision" with the net particles
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
let particle = particles[i][j];
let distance = dist(
ball.body.position.x,
ball.body.position.y,
particle.x,
particle.y
);
if (distance < ball.r + w / 2) {
// Apply force to the particle to simulate movement
let forceX = (particle.x - ball.body.position.x) * 2;
let forceY = (particle.y - ball.body.position.y) * 2;
particle.addForce(new Vec2D(forceX, forceY));
// Slow the ball down to simulate a "catch"
Matter.Body.setVelocity(ball.body, { x: 0, y: 0 });
}
}
}
}
Future Work / Reflections
Creating this game was both fun and challenging, especially figuring out how to make the net realistically react to the ball. Seeing it finally work as I imagined was super rewarding! Moving forward, I’d like to add more levels and maybe obstacles to make scoring harder. I would like to play with the positioning of the ball when it regenerates and maybe try to randomize that however, overall I am really proud of what I created.