Pong with Multi Player but without Multi Touch
June 2017
Background
This was done as a proof of concept, to supply a work around for someone looking for simple multi player games without multitouch.
The core concept is to use the Canvas TouchUp event to move the paddles, choice of paddle determined by on which side of the board the event occurred.
Sample Runs
Designer
This is a minimal implementation, just a Canvas and Ball topped by a Horizontal Arrangement with two score labels and a Start button. During a round, the button and labels are hidden, to devote the entire screen to the Canvas.
Screen1
Screen1 is fixed at Landscape, non scrollable, centered, without Title or Status bars.
Vertical Arrangement1
Vertical Arrangement1 is centered, fill parent.
harScores
Horizontal Arrangement harScores is centered, width Fill Parent, but Height only automatic to leave room for the Canvas.
lblScorePlayer1
The score labels are all automatic in their sizes.
btnStart
The Start button is centered, set to Height automatic, but Width Fill Parent to push the two score labels apart all the way.
Canvas1
Canvas1 is set to Fill Parent. Its Line Width is set to 50, for fat paddles that are wider than the radius of the Ball, to make paddle collision possible by pixel color.
Ball1
Ball1 is set to Red, with a radius of 20, smaller than the Canvas1 Line Width, to allow for the center of the ball being over the painted paddle when it bounces off the East or West edges.
Blocks
Screen1.Initialize
At the start of a game, expose the scores and Start button, with scores reset to 0 and the ball centered.
Center
To center a ball, we have to position its upper left corner so that the center of the ball is at the midpoint of the Canvas’s Height and Width. We also need to stop the ball.
btnStart.Click
When the Start button is clicked, we hide everything but the Canvas and Ball, clear the Canvas, center the Ball, set the Ball’s Heading to a random direction, and give it some speed.
(The random direction needs improvement, to avoid too far North or South directions that bounce endlessly before reaching a paddle.)
Canvas1.TouchDown
Pause the ball while the canvas is being touched, to prevent one player from locking the other player out.
Canvas1.TouchUp
When a player removes his finger from the Canvas, we decide which paddle to move, either at x = 1 or x = Canvas1.Width, depending on which half of the Canvas was touched. We redraw the paddle at that side, at the Y position that was touched, and release the hold on the Ball to let it continue on its way.
drawBar
Redrawing a paddle is done in two steps, first whiting out the entire height of the Canvas at that location, then drawing a black paddle at that y position for a height of 4 ball radii, to make the game easy.
Ball1.EdgeReached
This event controls both ball bouncing and scoring. The Ball is momentarily made invisible to aid in paddle collision detection. For the East and West edges (3 and -3), we call value procedure hit_goalie to tell us if the paddle was hit. (must rename that to hit_paddle, wrong game model.)
If we hit the East or West edge but not the paddle, give the opponent a point and center the Ball for the next round. Otherwise, just bounce the Ball off that edge.
Hit_goalie
Since the paddles are the only black items on the Canvas, and are deliberately set wide, all we need to do is test the pixel color at the center of the (momentarily invisible) ball.
Score
To score a point, we add 1 to the corresponding Label.Text and show the Horizontal Arrangement with the scores and the Start button.
Gallery Link
ai2.appinventor.mit.edu/?galleryId=5758014207033344
More Projects
https://docs.google.com/document/d/1acg2M5KdunKjJgM3Rxpy_Rf6vT6OozxdIWglgbmzroA/edit?usp=sharing