Text Engine and Hangman Game!
Vineet Srivastava
https://wibyte.in
In this lesson, we will …
2
https://wibyte.in
All right, what is a text engine?
3
https://wibyte.in
Why can’t I just use sprites/backdrops?
At first, we may think we can just use sprites/backdrops for the purpose of displaying text.
That is what we have been doing all this while.
But notice, when we take this approach, we cannot change the text that is displayed on the screen when the program is running.
4
https://wibyte.in
Using Sprites/Backdrops for text
5
Paint a sprite
Use the text tool in the costume editor
Adjust the FONT /Colour/Size
https://wibyte.in
Now we can use this in code
6
As shown in this example, we can change how the text appears, but we CANNOT change what the text is.
For this reason, we cannot use this method for programs where we do not know exactly what text we may be writing during the program.
https://wibyte.in
How to create a text engine
There are two main styles:
Using a combination of costumes and cloning/stamping.
Purely using PEN
Literally ‘drawing’ every character
There is in fact a degree of similarity in both the approaches.
7
https://wibyte.in
Our Approach
8
STEP 1: Create a sprite with all letters and characters as costumes.
STEP 2: Use Cloning/Stamping to write 1 letter anywhere on the screen.
STEP 3: Extend this logic to write complete sentences and phrases
https://wibyte.in
Step 1: Create Costumes
9
Important points:
https://wibyte.in
Once all the letters have been added …
Notice, once all the letters have been added, we will have 52 costumes created. This is a time-taking process :(
10
https://wibyte.in
Add the extra costumes.
We also need to add a few other costumes, like SPACE, COMMA, FULL STOP, EXCLAMATION MARK etc.
In all the cases, however, we will name the costume the same as the character itself.
11
Notice, this is laborious work –takes about 15-20 mins to create all these costumes, name them and so on.
https://wibyte.in
Notice the extra costumes created
12
Notice, we have again made sure that the costume name is the same as the charater that we want to display.
https://wibyte.in
Now, on to the code
Let us start with a single letter.
Can we ‘write’ a single letter anywhere on the screen.
Recall, we already have all the letters as part of sprite costumes.
All we thus need to do is to go to a specific x, y location and either create a clone OR use stamp.
13
https://wibyte.in
Let’s create a MYBLOCK
14
Notice, this block takes three inputs:
Go to the requested location
Switch costume to the LETTER that is to be printed. Remember, the costume name is the same as the letter itself
Create a CLONE of the sprite
MYBLOCK DEFINITION
MYBLOCK USAGE
https://wibyte.in
An Alternative implementation
15
Notice, this block takes three inputs:
Go to the requested location
Switch costume to the LETTER that is to be printed. Remember, the costume name is the same as the letter itself
STAMP (from the PEN extension)
MYBLOCK DEFINITION
MYBLOCK USAGE
https://wibyte.in
Cloning vs Stamping
16
Where Cloning wins!
Where Stamping Wins!
Letters can be given additional code, for example, to move around, change size, graphic effects etc.
Letters appear crisp, high resolution
No Limit on the number of letters displayed on the screen
Stamps stay on the screen even after the code stops
https://wibyte.in
So which one to use?
For a simple text engine, with static letters, it is fine to use either.
�For now, we will use STAMPING.
This way the text that we display does not disappear when the game stops.
We just make sure that the sprite is sized correctly.
17
https://wibyte.in
Examples
18
See changes in the ‘x’ value
https://wibyte.in
Extending our MyBlock
Next, we will extend this block to write a sentence.
The idea is similar, we will read letters one by one and render them by changing the x-value.
(Recall this is similar to what we did for placing BUILDINGS in the NOOR game).
19
https://wibyte.in
Extending Our Earlier MyBlock
20
Create a counter variable – The purpose of this variable is to look through EVERY letter in the ‘text’
Notice, these blocks are from the OPERATORS section. In a way they are similar to list blocks. Since any text message (a string) can be thought of as a list of characters.
Once the previous letter is stamped, move to the next letter by incrementing the counter
Change x (This ensures that the text appears in an horizontal orientation)
https://wibyte.in
Examples
21
https://wibyte.in
Run without Screen Refresh
Notice that the text appears letter by letter.
In order to avoid this, we can run this myblock with the option ‘RUN WITHOUT SCREEN REFRESH’.
Notice, this does not change the LOGIC, but makes the entire text appear all at once!
22
https://wibyte.in
Two Potential Improvements
There are two clear improvements that we can make to the text engine:
23
https://wibyte.in
But for now, Hangman
Having said that, the basic text engine we have is good enough for us to proceed with the HANGMAN game.
24
https://wibyte.in
Rules for the HANGMAN game
25
https://wibyte.in
HANGMAN SPRITE
We create a HANGMAN sprite with 8 costumes, as shown:
26
1
2
3
4
5
6
7
8
https://wibyte.in
LIST OF WORDS
27
https://wibyte.in
To obtain list of words
Please visit the class page, https://wibyte.in/advanced-class-course-material/.
Navigate to Class-10, Hangman.
Look for the link, 5-letter-words!
(Click and download to your computer).
28
https://wibyte.in
LIST OF WORDS
29
We had previously obtained a list of words from the Internet.
Notice, after importing, the list has 5757 elements. This IMPORT needs to be done only once.
https://wibyte.in
How will the game play
We will pick up one word randomly from the list of words.
The PLAYER will have to guess this word, letter by letter.
There will be a place on the screen to display the letters.
If the letter that the player guesses is present in the word, we will display it on the screen at the right place.
Else we will increase the HANGMAN costume number.
30
https://wibyte.in
Initial Settings
31
Pick a word at random from the list of words.
https://wibyte.in
Letter Space Sprite
We will use a letter space sprite to create markers for where the letters guess by the user will appear.
32
COSTUME
Notice this code will create 5 stamps of this sprite
STAGE
https://wibyte.in
What Happens when the user enters a letter
33
https://wibyte.in
First, let’s put together the top level structure
34
gameOver is a variable that indicates if the game is over. We set it to 0 in the beginning, and repeat the game UNTIL it becomes 1.
While the game is still going on, we ask the player to guess a letter.
Subsequent actions depend on whether the chosenWord contains the letter that the player has guessed.
https://wibyte.in
What if the letter is NOT in the chosenWord
35
If the chosenWord does not contain the letter, broadcast ‘wrong answer’ and wait.
Notice, by using broadcast and wait we ensure that the code does not move forward until the subsequent actions are completed.
https://wibyte.in
On the HANGMAN Sprite
36
In the start, set to costume 1
On receiving the broadcast ‘WrongAnswer’, go to the next costume. If costume number is 8 (Recall there were totally 8 costumes), set gameOver to 1, indicating that the game is over.
https://wibyte.in
Steps if the guessed letter is part of the word
37
Find out where (all) does the letter occur in the word
Display the letter at the correct positions on the screen
Update the word that has been guess this far
Check whether the guessedWord is same as the chosen word
1 Myblock each for these three
Find Occurrences
Display Letter
Update Answer
Check for completion
https://wibyte.in
Example
Say chosenWord = ‘apple’.
User enters: ‘e’
Letter ‘e’ is present in the chosenWord.
It occurs at position 5.
User enters: ‘p’
Letter ‘p’ is present in the chosenWord.
It occurs at positions 2 and 3.
38
e
e
p
p
guessedWord = ‘ e’
guessedWord = ‘ pp e’
https://wibyte.in
Implementing this idea in code
To implement this idea in code, we will make use of multiple lists.
39
https://wibyte.in
If the letter is IN the chosenWord
40
If the chosenWord contains ‘Answer’, then find in which all positions the letter occurs.
https://wibyte.in
Determine Occurrences
For every letter, we will add all the occurrences in a list called ‘Occurrences’.
41
First, delete the list ‘occurrences’
Go through every letter of the word. If the letter of the word matches ‘letter’, add the location of the letter to the list occurrences.
Notice, cntr is acting like a ‘counter variable’ here, making sure we look at every letter of the word.
https://wibyte.in
Example
42
Letter entered = ‘f’
Letter entered = ‘z’
chosenWord is ‘fuzzy’. Hence the list occurrences contains 1.
chosenWord is ‘fuzzy’. Hence the list occurrences contains 3, 4.
https://wibyte.in
Printing the guessed letter
Next, we would want to display the correctly guessed letter. But where should we display it?
Clearly, the letters need to be displayed at the x-location of the correct letterSpace. Hence, while displaying the letterSpaces, we need to keep track of their x-positions (This is much like the Memory Game)
We can make use of the list Occurrences for this purpose.
43
https://wibyte.in
x Positions of letterSpaces
44
Notice the list xPositions contains the x locations of the letterSpaces. This is exactly what we did in the Memory Game for the building positions.
https://wibyte.in
Displaying Text
45
Notice, the list xPositions contains the x- locations of the letterSpaces.
The list Occurrences contains the positions where the letter appears in the chosen word.
We use cntr as a counter variable.
And use the two lists to display the letter.
See this statement very carefully.
item(cntr) of Occurrences tells us WHICH position of the 5-letter word did the letter appear in.
item () of x-positions is used to determined WHERE on screen does the letter get displayed.
We create another MyBlock
https://wibyte.in
Displaying text (Example)
Letter ‘t’ occurs at position 1 and position 4. As seen in the list Occurrences.
The x-positions corresponding to these are -100 and 50 respectively, as seen from the list xPositions. (Items 1 and 4 respectively). �Hence, the x-position for the letters need to be item (item (1) of Occurrences) of xPositions) and (item (2) of Occurrences) of xPositions)
46
https://wibyte.in
Call this MyBlock in the code
47
https://wibyte.in
Let’s see where we are
We now have the facility to let the user enter letters and, if the letter is present in the word, display the letters at the correct place.
But we need to still form the ‘complete’ word that the user has answered so far.
This will be done using a List called GuessedLetters.
48
https://wibyte.in
The List guessedLetters
49
As always, we first DELETE all the items of the guessedLetters list. Next, we add 5 ‘SPACES’ to this.
Notice, by adding <SPACE> to the list 5 times, we ensure that the LIST has 5 items. Else the list may have ended up empty.
https://wibyte.in
Updating the GuessedList
This may look confusing, but really this is the same code as what we used for displaying the letters of the word. This is not surprising, because we are trying to put the letters in the same items where we were displaying them on the screen.
50
We scan through the list ‘Occurrences’.
On all the positions where the letter occurs, we replace the corresponding item on the guessedLetters List.
https://wibyte.in
Example (Guessed List)
51
Notice, the list guessedLetters is keeping track of the letters that have been correctly guessed previously.
https://wibyte.in
Converting GuessedList to a word
In order for us to compare the guessed word to the chosen word, we need to either
Convert the chosenWord to a LIST
OR
Convert the GuessedList to a word.
We will choose the second approach – its more logical.
52
https://wibyte.in
Enhance the UpdateAnswer MyBlock
53
Set the word ‘guessedWord’ to EMPTY
Keep forming the guessedWord. Notice wherever the answer has not been provided, we will get a SPACE.
https://wibyte.in
54
Notice how the variable ‘guessedWord’ is getting updated.
https://wibyte.in
Has the player won?
Notice we added updateAnswer Myblock here
Checking if the guessedWord is the same as the chosenWord
55
https://wibyte.in
Ending Conditions
56
Player Won
PlayerLost
IN this case, display the word at the end of the game
https://wibyte.in
And you are all set!
57
https://wibyte.in