Basketball Game in MIT App Inventor | App Inventor Basketball Game

TL;DR

Create a visible-but-transparent basket sprite so collision events fire while the hoop area stays visually unobtrusive.

Briefing Cornell Notes

Briefing

A simple MIT App Inventor basketball game hinges on one trick: an “invisible” basket sprite that stays transparent enough to look like part of the court, yet remains detectable for collision events. The setup starts by creating a new project called “basketball,” centering the screen layout, and drawing a court background on a Canvas. Two ball sprites are added: a visible ball (radius 13, dark orange paint, 50 ms movement interval) and a second “basket” sprite (radius 10) placed over the hoop area. The basket sprite is kept visible for collision detection, but its paint color and opacity are adjusted so it’s effectively not seen.

Gameplay begins when the player flings on the screen. The ball’s speed is set to the fling speed multiplied by 7, and its direction (heading) is set to match the fling’s heading. A Clock component runs at a 200 ms interval, and it’s used to position the basket sprite after a short delay. That delay matters because initialization using screen properties (like screen height) can behave inconsistently on iPhone; moving the hoop positioning logic into the timer avoids misplacement.

When the timer fires, the basket’s X coordinate is calculated to center it horizontally on the Canvas (Canvas width divided by 2, adjusted by the basket radius). The Y coordinate is set to a fixed value (50 in the tutorial), with the note that it may need adjustment depending on the court image.

Scoring and ball resets are handled through a dedicated procedure called reset ball. On reset, the ball’s speed is set to zero so it stops drifting, then the ball is placed back near its starting position—centered horizontally and offset upward by subtracting 200 from the Canvas height. A global score variable is initialized to 0, and the score is redrawn on the Canvas whenever a successful collision occurs.

Collision logic ties everything together: when the basket sprite collides with the ball, the game resets the ball, clears the Canvas, increments the global score by 1, and draws updated text (“score: <value>”) centered on the Canvas. The ball is also managed at the edges: if it reaches the top or bottom edges, it resets using reset ball; if it hits the left or right edges, it bounces instead of resetting.

The result is a playable, physics-like flinging basketball mechanic built from App Inventor primitives—Canvas drawing, sprite collisions, edge detection, and a timer-based workaround for device-specific initialization quirks. It’s a compact blueprint for turning touch gestures into a scoring game without complex custom physics.

Cornell Notes

The game uses two sprites—one visible ball and one transparent “basket” sprite—to detect hoop hits while keeping the hoop area visually clean. A fling gesture sets the ball’s speed (fling speed × 7) and direction (fling heading). A Clock with a 200 ms delay positions the basket after startup to avoid iPhone issues with screen-property initialization. Scoring happens on basket–ball collision: the ball resets, the Canvas clears, the global score increments, and centered text is redrawn. Edge handling resets the ball on top/bottom hits and bounces it on left/right hits.

Why keep the basket sprite “visible” but transparent instead of fully invisible?

Collision detection in MIT App Inventor requires the sprite to be visible. The tutorial keeps the basket sprite visible, then makes it effectively disappear by choosing a paint color similar to the court’s hoop area and reducing opacity. That preserves collision events while preventing the basket from looking like a separate object.

How does the fling gesture translate into ball movement?

The ball’s speed is set from the fling speed multiplied by 7 (using a multiplication block on the ball’s speed property). The ball’s heading/direction is set to the fling’s heading, so the ball travels in the same direction as the player’s swipe.

What role does the Clock component play, and why not use Screen Initialize?

The Clock fires every 200 ms and is used to set the basket sprite’s position shortly after startup. The tutorial avoids doing this in Screen Initialize because screen-property-based calculations (like screen height) can fail or behave inconsistently on iPhone. Disabling the timer after the first positioning prevents repeated repositioning.

How is the basket positioned on the Canvas?

The basket’s X coordinate is computed to center it horizontally: Canvas width divided by 2, adjusted using the basket radius (so the sprite aligns over the hoop area). The Y coordinate is set to 50 in the tutorial, with the explicit warning that it may need adjustment depending on the court image used.

What does reset ball do, and when is it called?

reset ball sets the ball speed to 0, then places the ball back near its starting point: centered horizontally and offset vertically by subtracting 200 from Canvas height. It’s called after a successful basket collision (to prepare for the next shot) and when the ball hits the top or bottom edges.

How does scoring update on a successful shot?

On collision between the basket sprite and the ball, the game calls reset ball, clears the Canvas, increments a global score variable by 1, and draws the updated score text centered on the Canvas using Canvas draw text (with Canvas width ÷ 2 for centering).

Review Questions

What specific properties are set from the fling event to control the ball’s speed and direction?
Describe the difference in behavior when the ball hits the top/bottom edges versus the left/right edges.
Why does the tutorial use a delayed timer to position the basket, and what problem does it aim to avoid on iPhone?

Key Points

1
Create a visible-but-transparent basket sprite so collision events fire while the hoop area stays visually unobtrusive.
2
Map touch flings to gameplay by setting ball speed to (fling speed × 7) and ball heading to the fling heading.
3
Use a Clock with a short delay (200 ms) to position sprites using screen properties, avoiding iPhone initialization quirks.
4
Center the basket horizontally using Canvas width ÷ 2 and adjust with the basket radius; set Y based on the court image layout.
5
Centralize ball reset logic in a reset ball procedure that stops motion (speed = 0) and repositions the ball to its starting point.
6
Increment a global score on basket–ball collision, clear the Canvas, and redraw centered score text each time.
7
Handle edges differently: reset on top/bottom hits, bounce on left/right hits to keep play continuous.

Highlights

Collision detection requires the basket sprite to remain visible; transparency is achieved through paint color and reduced opacity, not by unchecking Visible.

A 200 ms timer delay positions the basket after startup to sidestep iPhone problems with screen-property initialization.

Scoring is tightly coupled to collisions: each basket hit resets the ball, clears the Canvas, increments the global score, and redraws centered text.

Edge logic creates game rhythm: top/bottom hits reset the shot, while left/right hits cause a bounce.

Topics

MIT App Inventor
Sprite Collisions
Touch Fling Controls
Canvas Drawing
Game Logic

Basketball Game in MIT App Inventor | App Inventor Basketball Game | #appinventor #mitappinventor