Catch the Falling Objects

Step 2: Create Your Variables

You will have three variables that you will create before the setup function: the falling object, the player, and the score. Typically, you name your variables using camelCase, with no spaces and a capital letter to separate words.

Since player and fallingObj will be sprites, you don’t need to set them equal to anything. Set the initial score to 0.

Note: Don’t forget the semicolon at the end of every line of code!

let spriteOne;
        let variable = 0;

Step 3: Creating Sprites

Create two new sprites in the setup function:

spriteOne = new Sprite(x, y, w, h);
        spriteTwo = new Sprite(x, y, d);

The x and y represent the position of the sprite. The w and h represent the width and height of the sprite. If you want a circle instead of a rectangle, use d for diameter.

Step 4: Sprite Colliders

A sprite's collider is used to detect collisions with other sprites. By default, sprites have a 'dynamic' physics collider that allows the sprite to move freely and be affected by gravity. 'Static' colliders can't be moved, and 'kinematic' colliders can be moved programmatically but not by other sprites. They also won't collide with other kinematic colliders.

To set the collider type, you add it after the size. You can set them by using the first letter of the collider type name: 'd', 's', 'k'.

spriteOne = new Sprite(x, y, w, h, 'k');

Step 5: Sprite Movement - Falling Object

Think about the type of movement the fallingObj sprite and the player sprite need. Velocity is often used in video games to simulate moving objects. This is because velocity tells us how quickly an object is moving and in what direction. Since we want to change the vertical motion of our sprite, we use the y-position. The number sets the speed and direction.

spriteOne.vel.y = #;

Step 6: Sprite Movement - Player

In the draw function, use kb.pressing('key') within an if statement to control the player's movement.

if (kb.pressing("left")) {
          spriteOne.vel.x = #;
        }

Step 7: Sprite Trail

You might notice that both sprites are leaving a sort of trail when they are moving. This is because every time they move, they are drawing themselves over and over. We can fix this by setting the background in the draw function instead of the setup function.

Step 8: Keeping Sprites in the Screen - Falling Object

First, update the position of player and fallingObj so that player starts at the bottom and fallingObj starts at the beginning. To send back fallingObj to the top once it reaches the bottom, use an if statement.

if (spriteOne.y >= height) {
          spriteOne.y = 20;
          spriteOne.x = random(width);
        }

Step 9: Keeping Sprites in the Screen - Player

To keep the player sprite from moving out of the screen, use an if statement to check the x-position.

if (spriteOne.x < #) {
          spriteOne.x = #;
        }

Step 10: Sprites Colliding

At the end of the draw function, add an if statement that checks whether the falling object is colliding with the player.

if (spriteOne.collides(spriteTwo)) {
          spriteOne.direction = "down";
        }

Step 11: Adding the Score and Instructions

Use the text function to draw the score to the top left corner of the screen and the instructions to the top right of the screen.

fill(#); // This sets the color, use RGB
        textSize(#);
        textFont("Verdana");
        text("Score: " + score, x, y);

Step 12: Updating the Score

At the moment, the score is not changing. To change the score, increment it when the player sprite and the fallingObj sprite collide.

score = score + 1;

Step 13: Winning and Losing

Create two if statements in the draw function, one for when the user wins and another for when the user loses.

if (score == winningScore) {
          // Winning logic
        }

        if (score == losingScore) {
          // Losing logic
        }

Step 14: Adding Images

Upload three image files: one for a background, one for the falling object, and one for the player. Move them all into the assets folder. Create variables for each image and load them in the preload function.

let backgroundImg;
        let spriteOneImg;
        let spriteTwoImg;

        function preload() {
          backgroundImg = loadImage("assets/nightsky.jpg");
          spriteOneImg = loadImage("assets/player.png");
          spriteTwoImg = loadImage("assets/fallingObj.png");
        }

Step 15: Adding Background Image

In the draw function, use the image function to display the background image. You may need to resize the image to fit the canvas in the setup function.

image(backgroundImg, 0, 0);

Step 16: Adding Sprite Images

Assign images to the player and fallingObj sprites, and remove the numbers that represent the size. Resize the images as necessary.

spriteOne = new Sprite(spriteOneImg, x, y, "k");