|
addtextleavepasscode.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 a
28 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 alert 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/textpasscodehint04.png"></div>
40 </div>
41
42
43 <h2></h2>
44 <p>There's one last thing to consider. What if the player accidentally went to the passcode panel? What if they want
45 to leave it without trying to punch anything in? As we are right now, they get a penalty for not having a correct
46 passcode. An empty passcode is 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 <h2>Text version: Without the passcode hints</h2>
54 <p>First, we should tell the player they have the option of walking away.</p>
55
56 <h4>Step 1: Telling the player</h4>
57 <p>Go to your <span class="function">moveToRoom</span> function and look for the line that has a <span
58 class="function">prompt</span> asking for the password.</p>
59
60 <div class="code">
61 <ul>
62 <li><span class="keyword">var</span> guessPasscode = <span class="function">prompt</span>(<span class="string">"What's
63 the passcode?"</span>);
64 </li>
65 </ul>
66 </div>
67
68 <p>Update the string to something like this.</p>
69 <div class="code">
70 <ul>
71 <li><span class="keyword">var</span> guessPasscode = <span class="function">prompt</span>(<span class="string">"What's
72 the passcode? (Leave it blank to walk away.)"</span>);
73 </li>
74 </ul>
75 </div>
76
77 <h4>Step 2: Checking for a blank passcode entry</h4>
78
79 <p>Now we have to check for an empty string and then skip the penalty. You should still be inside the <span
80 class="function">moveToRoom</span> function where we just updated the passcode string.</p>
81
82 <p>We have an <span class="keyword">if</span> check to see if the player got the passcode correct. If not, they
83 immediately lose points in the following <span class="keyword">else</span> block. You know what we need to do,
84 right?
85 </p>
86 <p>We need to insert an <span class="keyword">else if</span> check for the empty string.</p>
87
88 <div class="code">
89 <ul>
90 <li><span class="comment">//this section is already there... look down a few lines</span></li>
91 <li><span class="keyword">if</span> (guessPasscode === <span class="object">passcode</span>.<span
92 class="property">exitCode</span>)
93 </li>
94 <li>{
95 <ul>
96 <li><span class="comment">//this handles a correct answer</span></li>
97 </ul>
98 </li>
99 <li>}</li>
100 <li> </li>
101 <li><strong><span class="comment">//***this part's new***</span></strong></li>
102 <li><strong><span class="keyword">else if</span> (guessPasscode === <span class="string">""</span>)</strong>
103 </li>
104 <li><strong>{</strong>
105 <ul>
106 <li><strong><span class="function">alert</span>(<span class="string">"You walked away from the panel."</span>);
107 </strong></li>
108 </ul>
109 </li>
110 <li><strong>}</strong></li>
111 <li> </li>
112 <li><span class="comment">//the rest of function is already there</span></li>
113 <li><span class="keyword">else</span></li>
114 <li>{
115 <ul>
116 <li><span class="comment">//give penalty</span></li>
117 </ul>
118 </li>
119 <li>}</li>
120 </ul>
121 </div>
122
123 <p>And that's it. Feature updated!</p>
124
125
126 <h2>Text version: With the passcode hints</h2>
127 <p>We have to make edits to two functions to get this to work. But they're pretty minor.</p>
128
129 <h4>Step 1: Telling the player</h4>
130 <p>In the <span class="function">getPasscodeGuess</span> function we created for offering hints, we have a section
131 that creates a text string that asks for the passcode. This is where we need to make a change.</p>
132
133 <p>Find the first line below and then add the second one.</p>
134
135 <div class="code">
136 <ul>
137 <li>text += <span class="string">"Please type in the passcode below. "</span>; <span class="comment">//already
138 there</span></li>
139 <li>text += <span class="string">"Leave it blank to walk away."</span>; <span class="comment">//add this</span>
140 </li>
141 </ul>
142 </div>
143
144 <h4>Step 2: Checking for a blank passcode entry</h4>
145 <p>Now we have to check for an empty string and then skip the penalty. This takes place inside the <span
146 class="function">moveToRoom</span> function. This change is exactly the same as the text version above without the
147 hint feature.</p>
148
149 <p>We have an <span class="keyword">if</span> check to see if the player got the passcode correct. If not, they
150 immediately lose points in the following <span class="keyword">else</span> block. You know what we need to do,
151 right?
152 </p>
153
154 <p>We need to insert an <span class="keyword">else if</span> check for the empty string.</p>
155
156 <div class="code">
157 <ul>
158 <li><span class="comment">//this section is already there... look down a few lines</span></li>
159 <li><span class="keyword">if</span> (guessPasscode === <span class="object">passcode</span>.<span
160 class="property">exitCode</span>)
161 </li>
162 <li>{
163 <ul>
164 <li><span class="comment">//this handles a correct answer</span></li>
165 </ul>
166 </li>
167 <li>}</li>
168 <li> </li>
169 <li><strong><span class="comment">//***this part's new***</span></strong></li>
170 <li><strong><span class="keyword">else if</span> (guessPasscode === <span class="string">""</span>)</strong>
171 </li>
172 <li><strong>{</strong>
173 <ul>
174 <li><strong><span class="function">alert</span>(<span class="string">"You walked away from the panel."</span>);
175 </strong></li>
176 </ul>
177 </li>
178 <li><strong>}</strong></li>
179 <li> </li>
180 <li><span class="comment">//the rest of function is already there</span></li>
181 <li><span class="keyword">else</span></li>
182 <li>{
183 <ul>
184 <li><span class="comment">//give penalty</span></li>
185 </ul>
186 </li>
187 <li>}</li>
188 </ul>
189 </div>
190
191 <p>And that's it. Feature updated!</p>
192
193
194 <h2>Now you can leave... er, wait! Don't go!</h2>
195 <h2>—Dr. Wolf</h2>
196
197 <div id="prevnext"></div>
198 <!-- required section for navigation sidebar --></div>
199 <script src="/navigator.js"></script>
200 <script>begin("roomadventure");</script>
201 <!-- end of required section for navigation sidebar -->
202 </body>
203 </html>
204