|
addhtmlleavepasscode.html
|
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width">
6 <title>The Room Adventure: Additional Features</title>
7
8 <link href="/index.css" rel="stylesheet" type="text/css"/>
9 <link href="/roomadventure/rooms.css" rel="stylesheet" type="text/css"/>
10 <link rel="shortcut icon" href="http://stephenjwolf.com/coding/favicon.ico" type="image/x-icon"/>
11 </head>
12 <body>
13 <div id="body"><!-- Required div for navigation bar -->
14 <div class="imgfloater max150px"><img src="/images/SergeiStudious.png"></div>
15 <h1>The Room Adventure: Additional Features</h1>
16
17 <h2>Leave passcode entry without a penalty</h2>
18 <h4>Difficulty: ★☆☆☆☆</h4>
19 <h4><em>Requirement: Passcode Ending</em></h4>
20
21 <div class="flex-container">
22 <div>
23 <!--Explanation-->
24 <p>When the player is asked to enter the passcode, they may not know what to enter, or they may know they're not
25 ready to. In this case, the player would want to exit out without even trying to enter anything.</p>
26
27 <p>Right now, our game gives the player a penalty for leaving the passcode screen for any reason unless they gave
28 a correct answer. Let's fix this so the player can walk away if they want to without losing points.</p>
29
30 <h2>What we need to do</h2>
31 <ul>
32 <li>Update the passcode screen to tell the player they can walk away.</li>
33 <li>Add a check for a blank passcode entry and skip the penalty.</li>
34 </ul>
35 </div>
36 <div class="imgwrapper">
37 <br>
38 <!--Screenshot-->
39 <img src="/roomadventure/screenimages/passcodeleave.png"></div>
40 </div>
41
42
43 <h2></h2>
44 <p>What if the player accidentally went to the passcode panel? What if they want to leave it without trying to punch
45 anything in? As we are right now, they get a penalty for not having a correct passcode. An empty passcode is
46 considered incorrect, so they get a penalty.</p>
47
48 <p>Do you want to allow the player to walk away from the passcode panel without a penalty? If so, we have to fix
49 something.</p>
50
51 <p>Scroll to the section that best fits your code.</p>
52
53 <hr>
54 <h2>HTML version: Without the passcode hints</h2>
55 <p>First, we should tell the player they have the option of walking away.</p>
56
57 <h4>Step 1: Telling the player</h4>
58 <p>Go to your <span class="function">enterPasscode</span> function. At the top, we start a text string asking for the
59 password.</p>
60
61 <div class="code">
62 <ul>
63 <li><span class="keyword">var</span> text = <span class="string">"Enter the correct passcode to exit the
64 house."</span>;
65 </li>
66 </ul>
67 </div>
68
69 <p>Add to the string so it's something like this.</p>
70 <div class="code">
71 <ul>
72 <li><span class="keyword">var</span> text = <span class="string">"Enter the correct passcode to exit the
73 house."</span>;
74 </li>
75 <li><strong>text += <span class="string">"<br><em>(Leave the passcode blank and press Try Passcode to walk
76 away.)</em>"</span>;</strong></li>
77 </ul>
78 </div>
79
80
81 <h4 id="step2">Step 2: Checking for a blank passcode entry</h4>
82
83 <p>Now we have to check for an empty string and then skip the penalty. Go to the <span
84 class="function">checkPassword</span> function.</p>
85
86 <p>We have an <span class="keyword">if</span> check to see if the player got the passcode correct. If not, they
87 immediately lose points in the following <span class="keyword">else</span> block. You know what we need to do,
88 right?
89 </p>
90 <p>We need to insert an <span class="keyword">else if</span> check for the empty string.</p>
91
92 <div class="code">
93 <ul>
94 <li><span class="comment">//this section is already there... look down a few lines</span></li>
95 <li><span class="keyword">if</span> (<span class="object">player</span>.<span
96 class="property">guessPasscode</span> === <span class="object">passcode</span>.<span
97 class="property">exitCode</span>)
98 </li>
99 <li>{
100 <ul>
101 <li><span class="comment">//this handles a correct answer</span></li>
102 </ul>
103 </li>
104 <li>}</li>
105 <li> </li>
106 <li><strong><span class="comment">//***this part's new***</span></strong></li>
107 <li><strong><span class="keyword">else if</span> (<span class="object">player</span>.<span
108 class="property">guessPasscode</span> === <span class="string">""</span>)</strong>
109 </li>
110 <li><strong>{</strong>
111 <ul>
112 <li><span class="function">moveToRoom</span>();</li>
113 </ul>
114 </li>
115 <li><strong>}</strong></li>
116 <li> </li>
117 <li><span class="comment">//the rest of function is already below</span></li>
118 <li><span class="keyword">else</span></li>
119 <li>{
120 <ul>
121 <li><span class="comment">//give penalty</span></li>
122 </ul>
123 </li>
124 <li>}</li>
125 </ul>
126 </div>
127
128 <h4>Option 1: Don't tell the player they walked away</h4>
129 <p>When the player clicks on the Try Passcode button with a blank entry, this will clear off the passcode interface
130 and put the player back into the current room without any penalty. If you're happy with that, then you're done!</p>
131
132 <h4 id="dotell">Option 2: Tell the player they walked away</h4>
133 <p>If you want to tell the player they walked away from the passcode panel, then you'll need to make a button like the
134 penalty button. Instead of the <code><span class="function">moveToRoom</span>();</code> line above, replace it with
135 something like this.</p>
136
137 <div class="code">
138 <ul>
139 <li><span class="keyword">var</span> text = <span class="string">"<h3>You stepped away from the passcode
140 panel.</h3>"</span>;
141 </li>
142 <li><span class="object">display</span>.<span class="function">clear</span>();</li>
143 <li><span class="object">display</span>.<span class="function">found</span>(text);</li>
144 <li> </li>
145 <li><span class="keyword">var</span> button = <span class="string">"<button class='text' onclick='<span
146 class="function">moveToRoom</span>()'>OK</button>"</span>;
147 </li>
148 <li><span class="object">display</span>.<span class="function">navigation</span>(button);</li>
149 <li><span class="object">display</span>.<span class="function">image</span>(<span
150 class="object">houseImages</span>.<span class="property">exitSign</span>);
151 </li>
152 </ul>
153 </div>
154
155 <p>And that's it. Feature updated!</p>
156
157 <hr>
158 <h2>HTML version: With the passcode hints</h2>
159 <p>We have to make edits to two functions to get this to work. But they're pretty minor.</p>
160
161 <h4>Step 1: Telling the player</h4>
162 <p>Go to the <span class="function">getPasscodeHint</span> function we created for offering hints. We have two options
163 for fixing the text. We can put the explanation at the top of the text block or at the bottom.</p>
164
165 <h4>Easy fix: Explanation at the top</h4>
166 <p>At the very top of the function, we start an empty text string. Just add the information there.</p>
167
168 <div class="code">
169 <ul>
170 <li><span class="keyword">var</span> text = <span class="string">"<br><em>(Leave the passcode blank and press
171 Try Passcode to walk away.)</em>"</span>;
172 </li>
173 </ul>
174 </div>
175
176 <p>We still need to check to see if the player left the passcode blank. That part's the same as above in the section
177 without the hints.
178 <br>
179 <a href="#step2">Jump up to step 2 in the previous section.</a></p>
180
181 <h4>Longer fix: Explanation at the bottom</h4>
182 <p>To put the explanation at the bottom, you have to change the places where we ask for the passcode and put the
183 explanation there. We have one at the top of the <span class="function">getPasscodeHint</span> function inside the
184 check for a penalty and inside the code block where the player does not have enough points for a hint. </p>
185
186 <p>There's only one line to add here...</p>
187 <div class="code">
188 <ul>
189 <li></li>
190 <li><span class="if"> (<span class="object">player</span>.<span class="property">score</span> < penalty)</span>
191 </li>
192 <li>{
193 <ul>
194 <li>
195 <li>text += <span class="string">"Sorry, you don't have enough points to buy a hint."</span>;</li>
196 <li>text += <span class="string">"<p>Enter the passcode.</p>"</span>;</li>
197 <li> </li>
198 <li><span class="comment">//add this line</span></li>
199 <li><strong>text += <span class="string">"<em>(Leave the passcode blank and press Try Passcode to walk
200 away.)</em>"</span>;</strong></li>
201 <li> </li>
202 <li><span class="object">display</span>.<span class="function">broken</span>(text);</li>
203 <li><span class="keyword">return</span>;</li>
204 </ul>
205 </li>
206 <li>}</li>
207 </ul>
208 </div>
209
210 <p>And at the bottom of the function...</p>
211
212 <div class="code">
213 <ul>
214 <li>hint += <span class="string">"<p><strong>Enter the passcode.</strong></p>"</span>;
215 </li>
216 <li>text += hint;</li>
217 <li> </li>
218 <li><span class="comment">//add this line</span></li>
219 <li><strong>text += <span class="string">"<em>(Leave the passcode blank and press Try Passcode to walk
220 away.)</em>"</span>;</strong></li>
221 <li> </li>
222 <li><span class="object">display</span>.<span class="function">broken</span>(text);</li>
223 </ul>
224 </div>
225
226 <p>We still need to check to see if the player left the passcode blank. That part's the same as above in the section
227 without the hints.
228 <br>
229 <a href="#step2">Jump up to step 2 in the previous section.</a></p>
230
231
232 <h2>Now you can leave... er, wait! Don't go!</h2>
233 <h2>—Dr. Wolf</h2>
234
235 <div id="prevnext"></div>
236 <!-- required section for navigation sidebar --></div>
237 <script src="/navigator.js"></script>
238 <script>begin("roomadventure");</script>
239 <!-- end of required section for navigation sidebar -->
240 </body>
241 </html>
242