App Inventor Canvas Game

App Inventor Canvas GameIn this part of my App Inventor video tutorial I make a App Inventor canvas game. The game is a simple paddle ball game.

You’ll learn about image sprites, how App Inventor animation works and all the cool built in features included with AI. With Image Sprite, Ball and Canvas you can make some pretty nice games. I keep everything simple so that it is easy to understand. All of the blocks follow the video below.

If you like videos like this, it helps my Google rankings if you share this with Google Plus with a click here [googleplusone]

App Inventor Blocks

Click the image below a few times to view it full screen.

App Inventor Pong Blocks

App Inventor Design View

App Inventor Pong Design

App Inventor Design Settings

Screen1 : Scrollable : No, ScreenOrientation : Portrait

HorizontalArrangement1 : Width, Height : Fill Parent

Canvas1 : BackGroundImage : board.png, Width, Height : Fill Parent
PaddleImageSprite : Picture : paddle.png :
Ball1 : Standard

HorizontalArrangement2 : Width : Fill Parent
PaddingLabel : Width : 5 px
StatsLabel : Text : Hits : 0 Lives : 3, Width : 220 px
StartButton : Width : 80 px

8 Responses to “App Inventor Canvas Game”

  1. Roni Stiawan says:

    The Code Blocks Editor is really bad on windows 🙁
    is there any way to fix that?

  2. fekri says:

    Hi Derek

    first of all thank you for all whar are you doing for helping others to get through develloping barriers , I learn a lot from
    your turorials realy i find theme very helpful .

    but my question to day has something to with the comments system like yours, i Have a site web and i want to let the user leave a comment but i want that I can reply the user’s comment singulary in the same box comment ,as you doing now Roni put a comment and you replied him in the same box anf if there’s another commenter he gonne just click the button reply and so on , a discussion grouped by a group of comments , can you help me on that.?
    thank you

  3. Michael Allen says:

    Hi Derek,

    I am working on the Pong game app and I need the URL to find the necessary images. Could you let me have it in a reply, please.

    Thank you and best regards.


  4. Johny AppInventor says:

    Hi Derek,
    Help me please, with adding lives to pong game…
    I’d like to add 3 lives, and when ball touches the bottom, I want to lose 5 points and reduce a live.
    Please if you can make a screenshoot of the blocks of how can I make it…
    I’ll be thankful if you give me an instruction of doing it…

    • Derek Banas says:

      Hi Johny,

      The lives can easily be added to by changing the value from lives to 6 instead of 3. To find out if the ball hits the bottom. Check the x and y position when it hits the wall.

      X is the number of pixels away from the left edge of the Canvas
      Y is the number of pixels away from the top edge of the Canvas

      I hope that helps 🙂

Leave a Reply

Your email address will not be published.