BlockOut

Use the arrow keys to bounce the projectile off of your paddle to destroy all the blocks on the screen!

Learning Objectives

Learn the basics to a basic bouncing projectile game!

• The concept of sprite
• How to spawn multiple sprites
• Sprite projectile interactions
• Setting and moving a “player”
• Setting a score increment
• Semi-random movement

Lesson Sections

• Part One: Creating the Sprites
• Part Two: Creating the Blocks
• Part Three: Finishing the Setup
• Part Four: Ball and Paddle Interactions
• Part Five: Directional Bouncing
• Part Six: Creating Block Collisions
• Part Seven: Ending the Game

Part One: Creating the Sprites

Go to the MakeCode Arcade editor and select New Project to create a new game.

Once the editor loads, you will see a green on start block already in the editor Workspace.

At first, we want to create the main player of the game which in our case will be a paddle. Drag a set mySprite to sprite of kind player from Sprites and place it in the on start block. Then click on mySprite and select rename variable. Name your variable to paddle. Then in the image editor, click on the 16x16 block until it reads 32x32. Draw a purple line near the bottom of the image.

Next, drag a set mySprite position to x y from Sprites and put it into the on start block. Set the x value to 79 and the y value to 100. Again, from Sprites, drag a set mySprite stay in screen into the on start. Change mySprite to paddle. Now in Controller, grab a move mySprite with buttons and drag it into on start. Also, change mySprite to paddle. Click the (+) sign and set the vx value to 100 and vy value to 0.

Next, we will make the projectile that will bounce against the paddle, walls, and blocks. Go into Sprites and grab a set projectile to projectile from mySprite and then place it in the on start. Click on the image editor and draw a ball. Change mySprite to paddle and set vx to 50 and vy to -55. Go to Sprites, grab a set mySprite stay in screen, and drag it into the workspace. Then set the mySprite to projectile and then change the stay in screen to destroy on wall. Keep the toggle set to OFF. Go to Sprites, grab a set projectile bounce on wall on, and drag it into on start.

Congratulations! You have now created the main sprites for the game.

Part Two: Creating the Blocks

In this part of the lesson we are going to create the blocks. Go into Loops, grab a for index from 0 to, and drag it into the workspace. Change the field input to 9. Duplicate the same block and place it inside the first loop. Now change the field input from 9 to 2. Go into Variables and create a new variable called index2. Next drag out the index2 and place it in the input of the second for loop.

Creating an Offset

In Variables drag out a set var to and place it in the second for loop. Select the drop down and rename the variable to x. From Mathgrab a _ X _ block and pull it into the set x to block. From Variables drag out an index block and drag it into the first field of the _ X _ block. Set the second field to 18.

Now, from Logic, grab an if then statement and drag it into the second loop. Drag a 0 = 0 block from Logic and place it inside the if then statement. From Math pull out a remainder of _ / _ block and move it into the first field of the equal statement. From variables, grab index2 block and drag it into the first field of the remainder. Set the second field of the remainder to 2. Lastly, set the end field of the equal statement to 1.

Now we are going to offset the blocks dependent on the row they are spawned in. From Variables grab a set x to and drag it into the if statement. Grab a 0 + 0 block from math and drag it into the set x to. Then in the first field place a 0 x 0 and then from Variables grab a index block and drag it into the first field of the 0 x 0. Now set the second field of the 0 x 0 to 18 and set the second field of the 0 + 0 to 8.

Spawning the Blocks

Now in Variables, grab a set x to and place it after the if statement. Select the drop down and then click new variable and name it tilePick. From Math grab a pick random and set it to be from 0 to 2.

Get an if then else from Logic and drag it in after the set tilePick to. Click the (+) symbol on the new if then else. In both of the if then else fields, place a 0 = 0 block from Logic. Then from Variables, drag out 2 tilePick blocks and place them in the first field of each of the 0 = 0 blocks. Set the second field of the first part to 0 and the second field of the second part to 1.

Then from Sprites grab a set mySprite to sprite of kind player block. Select the first drop down and create a new name called tile. Then click player and select add a new kind and name it block. Draw a picture of a block in the sprite editor. Duplicate this block and set it in the else if section and the else section. Draw different tiles for each part.

Lastly, from Sprites grab a set mySprite position to and drag it in after the if then else if then else block. Click mySprite and select tile. Then drag from Variables a x block and place it in the x field of the set mySprite position to. In the y field drag a 0 + 0 block and place it there. In the first field, drag a 0 x 0 block there and set the second field of the 0 x 0 block to 18. In the first part of the 0 x 0 block, put in a a index2 block from Variables. In the last field of the 0 + 0 block set it to 20.

Part Three: Finishing the Setup

Now on to finish the set up of the game. From Info grab a set score to 0 block and drag it into the on start. Change the 0 to 1. From Scene grab a set background color to and set it to light pink. Lastly, from Variables grab a set var to and drag it into on start. Click the drop down and hit new variable, and make a variable called direction, and set its value to 1.

Part Four: Ball and Paddle Interactions

To create the interaction, go to Sprites and grab an on sprite of kind player overlaps othersprite of kind player and drag it anywhere in your workspace. Change the first player to projectile and check that the second is set to player. Next, from Sprites, grab a set mySprite velocity to and place it in the on sprite of kind player overlaps. Drag sprite from the overlaps block and drag it into the mySprite section of the velocity block.

Back in Sprites grab a mySprite x block and drag it into the vx field. Drag the sprite out of the overlap block and place it over the mySprite in the vx field. Now click the x drop down and select vx (velocity x).

From Math grab a 0 x 0 block and place it in the vy section of the velocity block. Set the first field of the block to -1 and, in Sprites, grab a mySprite x and drag it into the second field. Click the drop down and select vy (velocity y). Drag sprite from the overlap block and place it over the mySprite in the mySprite vy.

Part Five: Directional Bouncing

When our ball collides with a block, we want to be able to detect which side the block bounced on. In our implementation, we are going to create a function for this event. To do this, go under Advanced to find the Functions and click Make a Function.... The function editor then pops up. Type in getPos where it says doSomething. This will mean the position of the ball relative to the block. Click on Sprite in the upper bar. A new parameter is now added. Name it to sprite. Again, click on Sprite in the upper bar. Another parameter pops up, name it to otherSprite.

From Logic grab a if then else block and place it in the function. Now from Logic, grab a _ or _ block and place it in the if statement.

From Logic grab a 0 < 0 block and place it in the first field of the _ or _ block. Next, in the first field of the 0 < 0 block, place a mySprite x from Sprites. Drag sprite from the function block and place it on the mySprite. In the second field, place a 0 - 0 block from Math. Set the second field to 8. In the first part of the 0-0 block, place a mySprite x. Drag an otherSprite from the function and place it in the mySprite.

Duplicate the entire block (the one that started as jsut the 0 < 0) and place it in the second field of the or conditional statement. Change the < sign to a > sign. Then, in the math block, change the - sign to a + sign. In the if statement then place a set var to from Variables. Click the dropdown and select direction. Then type in 1. In the else statement place a set var to from Variables. Click the dropdown and select direction. Then type in 0.

Congrats, we have now made a function!

Part Six: Creating Block Collisions

In our game, when the player collides with a block, the ball should bounce, the block should be destroyed, and the score should increment.

From Sprites grab a on sprite of kind player overlaps and place it in the workspace. Change the first kind from player to projectile. Then for the second kind, change it from kind player to kind block. From Info drag out a change score by 1 and place it in the new overlap block. Then in Functions, grab a call getPos mySprite mySprite and place it after the score block.

Now grab an if then else block from Logic and place it after the call getPos. From Logic grab a 0 = 0 block and place it in the if statement. Set the second 0 to 1. From Variables drag a direction and place it in the spot for the first 0.

In the first part of the if statement, place a set mySprite velocity to from Sprites. Drag a sprite from the overlaps block and place it over the mySprite. In the vx field, drag a 0 x 0 block from Math. In the first field of the 0 x 0 block type in -1 and in the second field, drag in a mySprite x from Sprites. Drag a sprite from the :overlaps block and place it over the mySprite. Then select the drop down and change it to vx (velocity x). In the vy section, drag in a 0 x 0 block from Math and set the first field to -1. Pull in a mySprite x from Sprites. Drag a sprite from the overlaps block and place it over the mySprite. Then select the drop down and change it to vy (velocity y).

Duplicate the entire set mySprite velocity to block and place it in the else statement. Drag out the vx and vy fields and switch them. In the first field that corresponds to vx, set the drop down to vx (velocity x). In the second field that corresponds to vy, and inside the -1x(sprite)vx velocity x, change the drop down to vy (velocity y).

Lastly, outside of the if statement, drag a destroy mySprite from Sprites. Drag an otherSprite from the overlaps block and place it over the mySprite.

Part Seven: Ending the Game

From Loops drag out a forever block and place it anywhere in the workspace. From Logic drag out an if then block and place it in the forever loop. From Logic drag out a 0 > 0 block and place it in the if statement. Set the second field to 119. Then from Sprites drag out a mySprite x and place it in the first field. Set the mySprite to projectile and the x to bottom. Inside the if statement drag in a game over lose block from Game. Click the (+) symbol and set the effect to slash.

Then from Logic, drag out an if then block and place it in the forever loop. From Logic drag out a 0 = 0 block and place it in the if statement. Set the second field to 30. For the first field, drag in score from Info. Inside the if statement drag in a game over lose block from Game. Switch the toggle to WIN and then click the (+) symbol set the effect to brighten.

Now we have a fully functioning game!

Final Game