This is a code challenge scaffolding for playing with 2D Collisions and User Experience!
- Drag-and-release your mouse to sling a basketball towards the goal
- Currently only supported on Desktop
- "Vanilla" Javascript (no libraries at all)
- Very minimal codebase: 200 lines of JS, and small amounts of CSS and HTML
- Implement collisions for the rim and backboard of the goal
- Detect collisions with the inner goal area
- Show a visual message to the user that they scored! Bonus points if it's flashy and has transitions or animations.
What counts as a visual message? Display some text in the middle of the screen, shoot emojis like confetti, or animate a dancing baby! (Don't do that last one)
The areas of the code left for implementation are in main.js
function checkRimCollisions(ballX, ballY, vel_x, vel_y) {
//available dimensions:
// ball_w, ball_h
// rim_w
// rim_front_h, rim_front_x, rim_front_y
// rim_back_h, rim_back_x, rim_back_y
// ball has a radius of ball_w/2
// ballX and ballY are the bottom-left corner of the ball
// ballX and ballY are the PAST version of the ball
// vel_x and vel_y will be ADDED to ballX and ballY after this function
//TODO: change vel_x and vel_y to "bounce" off of rim and backboard
return {
vel_x: vel_x,
vel_y: vel_y
}
}
function checkGoal(ballX, ballY, ballHW) {
// available dimensions:
// goal_w, goal_h
// goal_x, goal_y
//TODO: return TRUE when ball is in goal
return false;
}
function onGoal(ballNumber) {
//TODO: show a visual indicator the user scored
//it's encouraged to append elements to the body and then style them in CSS
}