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 Day & Night

Choose an Add-On
play_circle_filled
Starting Point
Set the order in which the objects pass by.
arrow_forward
play_circle_filled
Walk to the Beat
Play music when the character moves.
arrow_forward
play_circle_filled
Day & Night
Change the day to night as the character moves forward.
arrow_forward
play_circle_filled
Passing By
Program the objects being passed to respond to the character.
arrow_forward
play_circle_filled
Scenery Change
Set costumes to a random color when they appear.
arrow_forward
  • 1. Parallax Introduction
  • 2. Scrolling Objects
  • 3. Customize Attributes
  • 4. Add More Objects
  • 5. Add-Ons
  • 6. Reflection
  • 7. Wrap-up: Parallax
  • 8. Wrap-up: Share Your Project
  • 9. Wrap-up: Show Your Project
arrow_backward Back Next arrow_forward
Transcript

In this add-on, you will make the sky turn from light to dark depending on how far the character has traveled.

To start, program the character to keep track of the distance it has travelled.

If you completed the starting point add-on, then you have already completed this first step.

Select the walking sprite, and create a variable called "traveled," which will represent how far the walking sprite has traveled from its starting point.

Add a "change traveled" block under the "next costume" block in the "when right arrow key pressed" block stack, and set the value to 20.

Add this same block in the "when left arrow key pressed" block stack, and set the value to negative 20.

Set the traveled variable to 0 under the "when the flag clicked" event.

Next, program the stage to get darker when the walking sprite moves to the right.

Select the stage, and add a "when key pressed" event.

From the dropdown menu, select "right arrow key."

Under this, add a "change effect" block, and select brightness in the dropdown.

To make the stage look darker, enter a negative number in the value space.

Tinker with this value until you find something that works well for your program.

Press the right arrow key to test.

Awesome!

But wait, if you keep pressing the right arrow key, the stage turns totally black.

To clear the brightness effect, click the stop sign.

To set a point at which the stage will stop getting darker, add a conditional statement.

Drag out an "if then" block.

Make the statement say, if the walking sprite's "traveled" variable is less than 400, then get darker when the right arrow key is pressed.

Add a "less than" block in the if portion of the “if then” statement.

On the left side, put the "traveled" variable.

On the right, enter 400.

In the “then” portion of the conditional, place the "change effect" block.

Click the flag and right arrow key to test.

The stage keeps getting darker until… the "traveled" variable reaches 400.

When the "traveled" variable is greater than 400, the stage does not do anything.

It stays at the same brightness level.

Next, program the stage to get lighter when the left arrow key is pressed.

Add a "when key pressed" event, and select "left arrow" in the dropdown.

Add a "change effect" block, and select "brightness.

To make the sky look lighter, type in a positive number into the value.

This example uses positive 1.

Click the flag and the right arrow key, then the left arrow key to test.

Great!

The sky gets darker, then lighter.

Add a "when flag clicked" event and a "clear graphic effects" block to clear the graphic effects when the program starts.

Finally, program the stars sprite to hide when the program starts, then show when the "traveled" variable is greater than 400.

Select the stars sprite, and add a "when flag clicked" block.

Program the sprite to forever check if the variable "traveled" is greater than 400.

Add a forever loop, and place an "if else" block inside it.

In the if portion, add a "greater than" block.

On the left side, add the "traveled" variable.

On the right side, type in 400.

Under this, add a "show" block.

In the else portion, add a "hide" block.

Click the flag, and press the right arrow key to test.

Awesome!

Now, it's your turn.

Program the walking sprite to keep track of the distance it has travelled.

Program the stage to get darker when the walking sprite moves to the right.

Add a conditional statement to set a point at which the stage stops getting darker.

Program the stage to get lighter when the left arrow key is pressed.

Clear graphic effects when the program starts.

Program the stars sprite to show only when the variable "traveled" is greater than 400.