Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

arrow_back Broken Screen


In this add-on, you will add a broken screen game feature to your animation.

The user must continually press the spacebar to hold onto the phone.

If they stop pressing the spacebar for one second the phone screen breaks!

First, draw a broken screen.

Click the stage, then the backdrops tab.

Right click on the blue desk backdrop to duplicate it.

Use the line and pencil tools to create a broken screen.

Try different colors and shapes to get your desired look.

When the flag is clicked, the screen should start unbroken.

Click the scripts tab, and add a “when flag clicked” block and a “switch backdrop” block.

Change the dropdown to the unbroken screen backdrop.

The screen should break only if the user has not pressed the spacebar within a one second interval.

To measure time elapsed, use the timer block from the sensing menu.

Click the checkbox next to “timer.”

The timer keeps track of the seconds passed since the flag was clicked.

Click the flag to see the timer run.

Reset the timer to zero using the "reset timer” block.

Use this block to constantly measure how long it has been since the space bar has been pressed.

Drag out the “reset timer” block.

Then, attach a “when key pressed” block and change the value to “space.”

Test it out by clicking the flag.

Each time you hit the spacebar, the timer resets.

Next, program the stage to change to the broken screen when the timer is greater than 1.

Drag out an “if” block and attach it under the “switch backdrop” block.

Add a “greater than” operator, and put a “timer” block from the sensing menu in the first value, and type the number 1 in the second value.

Add a “switch costume” block inside the “if” statement, and change the backdrop to “blue desk 2,” which is the broken screen.

Test by clicking the flag.

When the program starts, the code checks to see if the timer is greater than 1, but nothing happens.

That’s because the timer only checks once.

The program should check continuously, so add a “forever” loop around the “if” statement.

Test this.


After 1 second, the broken screen appears.

Test again, only this time continuously press the space key.

Pressing “space” keeps the broken screen from appearing.

Add sounds to emphasize the broken effect.

The starter project contains crash sounds that you can add to your program.

Click on the sounds tab to sample them, and find one you like.

Then, go back to the scripts tab, add a “play sound until done” block, and change the dropdown to the sound you chose.


If you'd like, add other sound effects.

This example uses the "scream-female" sound.

Test your program.

To stop the code in the forever loop after the phone cracks, add a “stop all” block from the control menu inside the “if” statement.

The entire program shouldn’t stop, just the code in this block stack, so change the dropdown to “this script.”

Next, add a “say” block to the “you” sprite to to tell the user how to keep the phone from cracking.

To make the game start after the instructions, go to the stage and add a “wait” block above the “forever” loop.

This keeps the user from losing while the instructions are being given.

This example uses 2 seconds in the “wait” block.

Decide whether or not the players will see the timer by checking or unchecking the box beside the “timer.”

Now, it’s your turn.

Duplicate the screen backdrop, and use the paint editor to draw a broken screen.

Keep the broken screen backdrop from appearing using “when key pressed” and “reset timer” blocks.

Program the broken screen to appear using “switch backdrop,” “greater than,” “timer,” “forever,” and “If” blocks.

Program a sound effect using “play sound until done” and “stop this script” blocks.”

Finally, use the “you” sprite to give instructions by adding a “wait” block to delay the timer.

Choose an Add-On
Welcome Screen (Part 1 of 2)
Program a welcome screen for your phone.
Welcome Screen (Part 2 of 2)
Program a welcome screen for your phone.
Animate the thumbs holding your phone.
Later That Day
Add a second scene in which the sprites will interact outside the text conversation
Broken Screen
Add a broken screen game feature to your animation.
Answer the Phone Call
Create an incoming call notification so the user can answer the phone.
Animate an accessory, like headphones or phone cases, to express yourself.
arrow_backward Back
Next arrow_forward
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!