-
Notifications
You must be signed in to change notification settings - Fork 11
/
chapter8.html
247 lines (175 loc) · 15.9 KB
/
chapter8.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-5459430-3");
pageTracker._trackPageview();
} catch(err) {}</script>
<meta http-equiv="Content-Type" content="text/html;charset=us-ascii" />
<title>IYOCGwP, Chapter 8 - Flow Charts</title>
<link rel="stylesheet" href="inventbook.css" type="text/css" media="all" />
</head>
<body class='chapter8body'>
<table border='0' width='100%'><tr><td><a href='chapter7.html'>Go to Chapter 7 - Using the Debugger</a></td><td align='right'><a href='chapter9.html'>Go to Chapter 9 - Hangman</a></td></tr></table>
<div style='height: 310px;'><a href='http://www.amazon.com/Invent-Your-Computer-Games-Python/dp/0982106017/'><img src='images/buyad.png' align='right'></a></div>
<div style='height: 350px;'><img src='images/chap8.png'></div>
<div class='inthischapter'><h3 id="TopicsCoveredInThisChapter">Topics Covered In This Chapter:</h3>
<ul>
<li>How to play Hangman.</li>
<li>ASCII art</li>
<li>Designing our game by drawing a flow chart before programming.</li>
</ul></div>
<p>In this chapter, we will make the design for a Hangman game. This game is more complicated than our previous game, but it is also much more fun. Because the game is advanced, we should first carefully plan it out by creating a diagram called a flow chart (explained later). In the next chapter, we will actually write out the code for Hangman.</p>
<p>In case you've never played Hangman before, let's first learn the rules for Hangman.</p>
<h2 id="HowtoPlayHangman">How to Play "Hangman"</h2>
<p>In case you don't know, Hangman is a game for two people that's usually played using paper and pencil. One player thinks of a word, and then draws a blank on the page for each letter in the word. Then the second player tries to guess letters that might be in the word. If they guess correctly, the first player writes the letter in the proper blank. If they guess incorrectly, the first player draws a single body part of the hanging man. If the second player can guess all the letters in the word before the hangman has been completely drawn, they win. But if they can't figure it out in time, the man is hanged and they lose the game!</p>
<h2 id="SampleRunofHangman">Sample Run of "Hangman"</h2>
<p>Here is an example of what the player might see when they run the Hangman program we will write later. The text that the player enters in shown in bold.</p>
<div class='samplerun'>
H A N G M A N<br />
<br />
+---+<br />
| |<br />
|<br />
|<br />
|<br />
|<br />
=========<br />
Missed letters:<br />
_ _ _<br />
Guess a letter.<br />
<span class='sampleruninput'>a</span><br />
<br />
+---+<br />
| |<br />
|<br />
|<br />
|<br />
|<br />
=========<br />
Missed letters:<br />
_ a _<br />
Guess a letter.<br />
<span class='sampleruninput'>o</span><br />
<br />
+---+<br />
| |<br />
O |<br />
|<br />
|<br />
|<br />
=========<br />
<br />
Missed letters: o<br />
_ a _<br />
Guess a letter.<br />
<span class='sampleruninput'>r</span><br />
<br />
+---+<br />
| |<br />
O |<br />
| |<br />
|<br />
|<br />
=========<br />
<br />
Missed letters: or<br />
_ a _<br />
Guess a letter.<br />
<span class='sampleruninput'>t</span><br />
<br />
+---+<br />
| |<br />
O |<br />
| |<br />
|<br />
|<br />
=========<br />
Missed letters: or<br />
_ a t<br />
Guess a letter.<br />
<span class='sampleruninput'>a</span><br />
You have already guessed that letter. Choose again.<br />
Guess a letter.<br />
<span class='sampleruninput'>c</span><br />
Yes! The secret word is "cat"! You have won!<br />
Do you want to play again? (yes or no)<br />
<span class='sampleruninput'>no</span><br />
</div>
<h2 id="ASCIIArt">ASCII Art</h2>
The graphics for hangman are all made out of keyboard characters printed on the screen. This type of graphics is called <span class='term'>ASCII art</span> (pronounced "ask-ee"), because keyboard characters (such as letters, numbers, and also all the other signs on the keyboard) are called ASCII characters. ASCII stands for American Standard Code for Information Interchange (we'll learn more about it in the Caesar Cipher chapter). Here are a couple cats done in ASCII art:</p>
<pre style='font-size: 80%'>
__________________
_____/ xx xxx \_____
_/xxx xx xxx xxx \__
__/ xxx xxx xx xxx \__
/xxxxxxxxx xx xx xx xx xxx\
^___^ / xx /\ xx xx\
| ) / / \ x xx \
|. . ) | /\ | \ xx x\
( v ) | | \ | \____ Z x \
\____ | | | \____/ \ z xxx |
| \ | | \ z |
| | \/ \ \
| \ / ____/ | |
| | | __| \____ | xxx|
| | | \ / | ___ ___------- __/ x|
| | | |-. / | | | _______ ____/ |
| | | ____/ | | o\ -------- \_/ _/ ___/ xx /
((((()(______/ |oo \ _____/ _/______/ xx/
\ \__ __/ xx /
\ \______________/ x_/
\____ _______/
\_______________________________/
</pre>
<h2 class='pagebreaker' id="DesigningaProgramwithaFlowchart">Designing a Program with a Flowchart</h2>
<p>This game is a bit more complicated than the ones we've seen so far, so let's take a moment to think about how it's put together. First we'll create a flow chart (like the one at the end of the Dragon Realm chapter) to help us visualize what this program will do. This chapter will go over what flow charts are and why they are useful. The next chapter will go over the source code to the Hangman game. A <span class='term'>flow chart</span> is a diagram that shows a series of steps as a number of boxes connected with arrows. Each box represents a step, and the arrows show how one step leads to other steps. You can trace through the flow chart by putting your finger on the "Start" box of the flow chart and following the arrows to other boxes until you get to the "End" box. You can only move from one box to another in the direction of the arrow. You can never go backwards (unless there is a second arrow going back, like in the "Player already guessed this letter" box below.) Here is the complete flow chart for the Hangman game (Figure 8-1).</p>
<p class='centeredImageP'><img src='images/8-1.png' alt='' class='centeredImage' /><br />
Figure 8-1: The complete flow chart for what happens in the Hangman game.</p>
<p>Of course, we don't <i>have</i> to make a flow chart. We could just start writing code. But often, once we start programming, we will think of things that need to be added or changed that we hadn't considered before. We may end up having to change or delete a lot of code that we had already written, which would be a waste of effort. To avoid this, it's always best to think carefully, and plan how the program will work before we start writing it.</p>
<p>The following flow chart is provided as an example of what flow charts look like and how to make them. For now, since you're just using the source code from this book, you don't need to draw a flow chart before writing code. The program is already written, so you don't have to plan anything out. But when you make your own games, a flow chart can be very handy.</p>
<h2 id="CreatingtheFlowChart">Creating the Flow Chart</h2>
<p>Keep in mind, your flow charts don't always have to look exactly like this one. As long as you understand the flow chart you made, it will be helpful when you start coding. We'll begin with a flow chart that only has a "Start" and an "End" box, as shown in Figure 8-2:</p>
<p class='centeredImageP'><img src='images/8-2.png' alt='' class='centeredImage' /><br />
Figure 8-2: Begin your flow chart with a Start and End box.</p>
<p class='pagebreaker'>Now let's think about what happens when we play Hangman. First, one player (the computer in this case) thinks of a secret word. Then the second player (the person running the program) will guess letters. Let's add boxes for these events, as shown in Figure 8-3. (The boxes that are new to each flow chart have a dashed outline around them.) The arrows show the order that the program should move. That is, first the program should come up with a secret word, and after that it should ask the player to guess a letter.</p>
<p class='centeredImageP'><img src='images/8-3.png' alt='' class='centeredImage' /><br />
Figure 8-3: Draw out the first two steps of Hangman as boxes with descriptions.</p>
<p>But the game doesn't end after the player guesses one letter. It needs to check to see if that letter is in the secret word or not.</p>
<h3 class='pagebreaker' id="BranchingfromaFlowchartBox">Branching from a Flowchart Box</h3>
<p>There are two possibilities: the letter will either be in the word or it won't be. This means we need to add <i>two</i> new boxes to our flowchart. From the "Ask player to guess a letter" box, we can only move to the "Letter is in secret word" box <i>or</i> the "Letter is not in secret word" box. This will create a branch (that is, a split) in the flow chart, as show in Figure <span class='nw'>8-4</span>:</p>
<p class='centeredImageP'><img src='images/8-4.png' alt='' class='centeredImage' /><br />
Figure 8-4: There are two different things that could happen after <br />the player guesses, so have two arrows going to separate boxes.</p>
<p class='pagebreaker'>If the letter is in the secret word, we need to check to see if the player has guessed all the letters, which would mean they've won the game. But, if the letter is not in the secret word, another body part is added to the hanging man.</p>
<p>We can add boxes for those cases too. We <b>don't</b> need an arrow from the "Letter is in secret word" box to the "Player has run out of body parts and loses" box, because it's impossible to lose as long as you are only guessing correct letters. Also, it's impossible to win as long as you are guessing only incorrect letters, so we don't need to draw that arrow either. Our flow chart now looks like Figure 8-5.</p>
<p class='centeredImageP'><img src='images/8-5.png' alt='' class='centeredImage' /><br />
Figure 8-5: After the branch, the steps continue on their separate paths.</p>
<h3 class='pagebreaker' id="EndingorRestartingtheGame">Ending or Restarting the Game</h3>
<p>Once the player has won or lost, we'll ask them if they want to play again with a new secret word. If the player doesn't want to play again, the program will end. If the program doesn't end, we think of a new secret word, as shown in Figure 8-6:</p>
<p class='centeredImageP'><img src='images/8-6.png' alt='' class='centeredImage' /><br />
Figure 8-6: The game ends if the player doesn't want to play again, or the game goes back to the beginning.</p>
<h3 class='pagebreaker' id="GuessingAgain">Guessing Again</h3>
<p>This flow chart might look like it is finished, but there's something we're forgetting: the player doesn't guess a letter just once. They have to keep guessing letters over and over until they either win or lose. We need to draw two new arrows so the flow chart shows this, as shown in Figure 8-7.</p>
<p class='centeredImageP'><img src='images/8-7.png' alt='' class='centeredImage' /><br />
Figure 8-7: The game does not always end after a guess. The new arrows (outlined) show that the player can guess again.</p>
<p class='pagebreaker'>We are forgetting something else, as well. What if the player guesses a letter that they've guessed before? Rather than have them win or lose in this case, we'll allow them to guess a different letter instead, as shown in Figure 8-8.</p>
<p class='centeredImageP'><img src='images/8-8.png' alt='' class='centeredImage' /><br />
Figure 8-8: Adding a step in case the player guesses a letter they already guessed.</p>
<h3 class='pagebreaker' id="OfferingFeedbacktothePlayer">Offering Feedback to the Player</h3>
<p>We also need some way to show the player how they're doing. In order to do this, we'll show them the hangman board, as well as the secret word (with blanks for the letters they haven't guessed yet). These visuals will let them see how close they are to winning or losing the game.</p>
<p>We'll need to update this information every time the player guesses a letter. We can add a "Show the board and blanks to the player." box to the flow chart between the "Come up with a secret word" box and the "Ask player to guess a letter" box, as shown in Figure 8-9. This box will remind us that we need to show the player an updated hangman board so they can see which letters they have guessed correctly and which letters are not in the secret word.</p>
<p class='centeredImageP'><img src='images/8-9.png' alt='' class='centeredImage' /><br />
Figure 8-9: Adding "Show the board and blanks to the player." to give the player feedback.</p>
<p>That looks good! This flow chart completely maps out everything that can possibly happen in Hangman, and in what order. Of course this flow chart is just an example-you won't really need to use it, because you're just using the source code that's given here. But when you design your own games, a flow chart can help you remember everything you need to code.</p>
<h2 id="SummaryTheImportanceofPlanningOuttheGame">Summary: The Importance of Planning Out the Game</h2>
<p>It may seem like a lot of work to sketch out a flow chart about the program first. After all, people want to play games, not look at flowcharts! But it is much easier to make changes and notice problems by thinking about how the program works before writing the code for it.</p>
<p>If you jump in to write the code first, you may discover problems that require you to change the code you've already written. Every time you change your code, you are taking a chance that you create bugs by changing too little or too much. It is much better to know what you want to build before you build it.</p>
<table border='0' width='100%'><tr><td><a href='chapter7.html'>Go to Chapter 7 - Using the Debugger</a></td><td align='right'><a href='chapter9.html'>Go to Chapter 9 - Hangman</a></td></tr></table>
<div style='height: 310px;'><a href='http://www.amazon.com/Invent-Your-Computer-Games-Python/dp/0982106017/'><img src='images/buyad.png' align='right'></a></div>
</body>
</html>