Add Text!
Goals:
- Learn about Strings, another of the seven Javascript data types
- Add text output (letters and other symbols) to your Pencil Code programs using the
label
function.
Coding Snippets:
label
is a sprite-specific function. It takes an argument of type String and prints it on screen at the sprite's current location.- Change the size of a label using an optional numeric second argument.
Math and Computer Concepts:
- To create a String, enclose characters in matching sets of single or double quotes, e.g.,
'a blue string'
or"blue"
. - In the coding snippet above,
myWords
is a user-defined variable that references (i.e., points to) a string. Many build-in variables we have used all along actually point to strings. For example, the variableblue
points to the string"blue"
. - You can join two strings using
+
, an operation referred to as concatenation. In the example to the right, the variablec
references the string"PencilCode"
. - Labels appear on top of other graphics, including sprites. E.g.:
Activities:
Save each of the following in a folder called Text.
- AnalogClockFace: write a program that creates a face of an analog clock, i.e., showing numbers 1 through 12 around a circle (oriented horizontally).
- Write a program that uses
label
to print a Countdown to zero on your screen. Use thecs
function to erase each number before writing the next one. Make your solution more visually attractive by drawing a colored dot or square behind the label, and celebrate the completion of the countdown with fireworks, confetti, etc. - Create a copy of ConditionalLogic/RaceWithEnd, naming it AndTheWinnerIs. Modify the code so that the winner is announced at the end of the race. As an extra challenge, use labels to constantly update viewers about which sprite is in the lead.
- Create a human-versus-computer version of "Rock, Paper, Scissors," saving your code as RPS. Use labels to introduce the game, to count up to "shoot", and to explain the results. Use images to show what the computer chooses.
- LabeledLuckyStreak: Add labels to a copy of the LuckyStreak code from the Conditional Logic! lesson.