Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    AI - Bouncing Ball with Motion Sensor (Difficulty: 3)

    Tutorials
    1
    1
    833
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

      Key Topics Covered

      • Video sensing extension
      • Paint Costumes
      • Using variables
      • Picking a random number
      • Printing Text

       
       

      Introduction

       

      Motion sensors allow your program to detect movement from the camera and use it as a form of input — no keyboard or mouse needed! This opens up exciting possibilities:

      • People with disabilities who can’t use a keyboard or mouse can still interact with your project.
      • Patients needing physical rehabilitation can benefit from motion-based games that get them moving.
      • It’s a hands-free way to play — all you need is a camera!

      In this tutorial, you’ll build a game where the player moves a paddle using body motion to stop a ball from falling off the screen.

      6222f604-89c3-4207-803f-0b16260ba7ce.gif

       
       

      Step 1 - Add the Video Sensing Extension

       

      In the CreatiCode playground, create a new project, and add the video sensing extension first. See this page for instructions:

      https://www.forum.creaticode.com/topic/458/the-video-sensing-extension

       
       

      Step 2 - Draw a Bouncing Board

       

      Delete the default dog sprite. Then, paint a new costume for the “Empty1” sprite — draw a symmetrical rectangle that will serve as the paddle. Rename the sprite to “Board”.

      7bc11a0c-7962-4a08-9d25-fc426b688f55.png

       
       

      Step 3 - Set Initial Board Position

       

      When the game starts, the board should be moved to the bottom center of the stage:

      80e2fcbf-c075-4160-bf40-1b33eba48762.png

       
       

      Step 4 - A Forever Loop to Read the Motion Data

       

      Since the board will be controlled by the video sensor data, let’s use a forever loop to repeatedly read the motion data into 2 variables named “motion” and “direction”:

      cf9906ad-cc7d-4a4e-a4c3-c1ef71bd6ea1.png

      Now you can see these 2 variables’ values as you move left or right in front of the camera:

      4257e738-c729-478a-b3d8-da90bf70b753.gif

       
       

      Step 5 - Set “Board Speed”

       

      Create a variable named “board speed” to represent how fast the board moves. We’ll link it to the “motion” value. If the motion is strong, the board should move faster. For example:

      • Set board speed to motion / 8
      • If motion is below 20, set board speed to 0 (to ignore tiny movements or noise)

      6c70167b-9f55-404f-baba-6bc6351bd397.png

      You can verify that the board speed is 0 when you are not moving:

      8a098993-e94b-4197-8ea6-796836a0f0b6.gif

       
       

      Step 6 - Move the Board Left or Right

       

      Use “board speed” and “direction” to control the board’s position:

      • If direction > 0, the motion is to the right — move the board right.
      • If direction < 0, the motion is to the left — move the board left.

      d2a5874e-f509-4168-8d60-0b24e069e9e9.png
       
      Now your board should follow your body movements smoothly:
       

      61b80ee3-1132-4659-9a1b-045a105caa5b.gif

       
       

      Step 7 - Keep the Board Inside the Stage

       

      The board might drift off the screen edges. Prevent this by checking its X position and keeping it between -150 and 150.

      b6c80370-b04d-4a12-a12f-6db0f7f32913.png

      Now the board will stay within the stage:

      42079b00-0ceb-4de2-987d-2f273de1ca62.gif

       
       

      Step 8 - Add a New Sprite for the Ball

       

      Add a new sprite: Beachball

      • Set its size to 50
      • Move it to the top of the stage (y = 160) when the program starts

      33b858c3-68ba-4eb3-b236-a0dc49591f60.png

       
      It will look like this:

      c1ea5d4a-20e7-493b-a4fb-f9e7eb281775.png

       
       

      Step 9 - Point the Ball in a Random Direction

       

      Make the ball start by pointing down-right, using a random angle between 105 and 165 degrees.

      af60b397-2da9-4bc2-af2d-2e5570432e9a.gif

       
       

      Step 10 - Move and Bounce Forever

       

      Use a forever loop to keep the ball moving. Let it bounce whenever it hits the edge.

      e12f1758-4aef-431d-95a3-1b0da3793b9e.png

       
      Here’s what it should look like:

      95e19ca9-d9fc-4fd8-8bae-642f35080222.gif

       
       

      Step 11 - Stop When the Ball Falls to the Bottom

       

      The game ends when the ball hits the bottom of the stage. You can check if its Y position is less than -160 to stop the program.

      1f915cbf-c16b-4d5e-b56a-b68eef40c376.png
       
      Now the ball stops if it falls to the bottom:

      d32fd6ed-ada0-497a-bed4-7c35a7c50539.gif

       
       

      Step 12 - Make the Ball Bounce Off the Board

       

      If the ball touches the board, it should bounce upward. The math is simple:

      • If the direction is positive (e.g., 160°), the rebound is 180 - direction (e.g., 20°).
      • If the direction is negative (e.g., -135°), the rebound is -180 - direction (e.g., -45°).

       
      60a70435-41b3-40b4-a69d-a3b25606a311.png
       

      cfe25dd6-dd83-4021-94f1-882c41179648.png

       
      Therefore, here is the code for the direction calculation:

      1a90e09c-8067-447b-9e71-c23ab75d7f67.png
       
      Now the ball correctly bounces off the board:
       
      c829f942-1970-419b-a16c-b2326c89812d.gif

       
       

      Step 13 - Count the Saves

       

      To make it fun, let’s keep a score for how many times the ball has been saved by the board.

      • Create a variable called “counter”.
      • Set it to 0 at the start.
      • Increase it by 1 every time the ball touches the board.
      • Display it on the stage:

       
      b3f40345-4312-4293-a36e-9c54446315bf.png
       
      Now you’ll see the score on the top right:
       
      6222f604-89c3-4207-803f-0b16260ba7ce.gif

       
       

      Step 14 - Hide the Camera Video (Optional)

       

      If you prefer, you can hide the camera video by making it 100% transparent, then you can use a regular backdrop instead.

      7b840086-0001-4e15-b16e-9397cd346994.png

       
       

      Step 15 - Fix a Ball Rebound Bug

       

      If you test the game for a while, you will find a small issue. Sometimes the ball would get stuck on the board like this:

      e95b0253-f36c-4b88-9857-64c592f7b5dc.gif

       
      Try to fix this issue yourself before continuing.

       
       
       
       
       
       
       
       
       
       
       
       
       
      The problem is that when the ball rebounds off the board and moves up, it might touch the board again in the next update, so it will rebound towards the bottom again.

      To fix this, only allow a rebound if the ball is moving downward. That means:

      • Its direction is between 90° to 180° or -90° to -180°.
      • In other words, if abs(direction) > 90, then allow rebound.

      82e0619f-a327-4357-b331-7a43bc56d842.png

      Here is the final result:

      71acc18d-fdeb-4b30-8d9e-7dd559418414.gif

       
       

      Additional Challenges

       

      You can now customize and improve your game! Here are some fun ideas to try:

      • Increase difficulty: Make the ball move faster after each bounce.
      • Smarter bouncing: Adjust the ball’s rebound direction based on how the board is moving.
      • Add obstacles: Include some targets that the player must hit with the ball to win the game.
      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • First post
        Last post