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 18 <h2>Offering passcode hints</h2> 19 <h4>Difficulty: ★★★☆☆</h4> 20 <h4><em>Requirement: Passcode Ending</em></h4> 21 22 <div class="flex-container"> 23 <div> 24 <p>In our game, we give the player some hints when they get their passcode pieces. I used fruit names and let the 25 player figure out they have to put them in alphabetical order. The player may not recognize this, so let's give 26 them some help.</p> 27 28 <h2>What we need to do</h2> 29 <ul> 30 <li>Add a button for the player to click for a hint.</li> 31 <li>Pick a hint from a list (or only have one).</li> 32 <li>Charge some points for the hint (optional).</li> 33 </ul> 34 </div> 35 <div class="imgwrapper"> 36 <br> 37 <img src="/roomadventure/screenimages/hintbutton01.png"></div> 38 </div> 39 40 41 <h2 id="skip">Step 1: Add a hint button</h2> 42 <p>When the passcode screen with the number pad is up, let's add a button the player can click to ask for a hint.</p> 43 <p>I want the hint to have a 5 point cost for the player, but you can leave that out if you want to. I'm going to add 44 that when we update the <span class="function">getPasscode</span> function a little further down, but we'll set up 45 some of the code to handle it before then.</p> 46 47 <h3>Go to the <span class="function">enterPasscode</span> function</h3> 48 <p>Find this line of code near the bottom of the function.</p> 49 50 <div class="code"> 51 <ul> 52 <li> 53 buttons += <span class="string">"<br><button id='passcode' onclick='<span class="function">checkPasscode</span>()'>Try 54 Passcode</button>"</span>; 55 </li> 56 </ul> 57 </div> 58 59 <p>Where do you want your hint button? Above the Try Passcode button or below it? That determines where you're putting 60 the next lines of code. Me? I'm putting the new button above.</p> 61 62 <p>I'm also focusing on some flexible code in case we change our minds later and don't want a cost. All we'd have to 63 do is set the cost to zero the <span class="keyword">if</span> statement will take of showing the cost or not.</p> 64 65 <div class="code"> 66 <ul> 67 <li><span class="comment">//let's build the hint button</span></li> 68 <li>buttons += <span class="string">"<br><button id='hintButton' "</span>;</li> 69 <li>buttons += <span class="string">"onclick='<span class="function">getPasscodeHint</span>()'>"</span>; 70 </li> 71 <li>buttons += <span class="string">"Ask for a hint"</span>;</li> 72 <li> </li> 73 <li><span class="comment">//if there will be a cost, then let's show the player's score and the cost</span> 74 </li> 75 <li><span class="keyword">if</span> (<span class="object">passcode</span>.<span class="property">hintCost</span>) 76 </li> 77 <li>{ 78 <ul> 79 <li>buttons += <span class="string">"<br>("</span> + <span class="object">passcode</span>.<span 80 class="property">hintCost</span> + <span class="string">" points.)"</span>; 81 </li> 82 <li><span class="object">display</span>.<span class="function">score</span>();</li> 83 </ul> 84 </li> 85 <li>} 86 </li> 87 <li> </li> 88 <li><span class="comment">//this closes the hint button</span></li> 89 <li>buttons += <span class="string">"</button>"</span>;</li> 90 91 <li> </li> 92 <li><span class="comment">//this line is already in the code; if you want your hint button below this, then move 93 the above code below this line</span></li> 94 <li> 95 buttons += <span class="string">"<br><button id='passcode' onclick='<span class="function">checkPasscode</span>()'>Try 96 Passcode</button>"</span>; 97 </li> 98 </ul> 99 </div> 100 101 102 <h2>Step 2: Starting the <span class="function">getPasscodeHint</span> function</h2> 103 104 <p>We're going to create a new function to handle the hints. You may or may not want a cost when the player asks for a 105 hint. You may even change your mind later one way or the other. Because of that, we're going to make the first part 106 flexible. It requires an <span class="keyword">if</span> statement to see in there is a value in <code><span 107 class="object">passcode</span>.<span class="property">hintCost</span></code>.</p> 108 <p>We also need to make sure the player has enough points for the hint.</p> 109 110 <h4>Let's handle any hint cost issues first</h4> 111 112 <div class="flex2"> 113 <div> 114 <div class="code"> 115 <ul> 116 <li><span class="keyword">function</span> <span class="function">getPasscodeHint</span>()</li> 117 <li>{ 118 <ul> 119 <li><span class="keyword">var</span> text = <span class="string">""</span>;</li> 120 <li><span class="keyword">if</span> (<span class="object">passcode</span>.<span 121 class="property">hintCost</span>) 122 </li> 123 <li>{ 124 <ul> 125 <li> 126 <li><span class="comment">//let's make sure the player has the points they need, otherwise we'll let 127 them know and exit the function</span></li> 128 <li><span class="keyword">if</span> (<span class="object">player</span>.<span 129 class="property">score</span> < <span class="object">passcode</span>.<span 130 class="property">hintCost</span>) 131 </li> 132 <li>{ 133 <ul> 134 <li> 135 <li>text += <span class="string">"Sorry, you don't have enough points to buy a hint."</span>;</li> 136 <li>text += <span class="string">"<p>Enter the passcode.</p>"</span>;</li> 137 <li><span class="object">display</span>.<span class="function">broken</span>(text);</li> 138 <li><span class="keyword">return</span>;</li> 139 </ul> 140 </li> 141 <li>}</li> 142 <li> </li> 143 <li><span class="comment">//okay, let's take points from the player now</span> 144 <li>text += <span class="string">"<p><em>You bought a hint for " + <span class="object">passcode</span>.<span 145 class="property">hintCost</span> + " points.</em></p>"</span>; 146 </li> 147 <li><span class="object">player</span>.<span class="property">score</span> -= <span class="object">passcode</span>.<span 148 class="property">hintCost</span>; 149 </li> 150 <li><span class="object">display</span>.<span class="function">score</span>();</li> 151 </ul> 152 </li> 153 <li>}</li> 154 </ul> 155 </li> 156 <li> </li> 157 <li><span class="comment">//there's more of this function to come shortly...</span></li> 158 </ul> 159 </div> 160 161 162 <p>Again, if you ever decide to get rid of the hint cost, you only need to change the point value back in the 163 <span 164 class="function">getPasscode</span> function. All of the <span class="keyword">if</span> checks will handle 165 the change automatically so you don't ever have to remove it!</p> 166 </div> 167 <div class=""> 168 <figure><img src="/roomadventure/screenimages/hintbutton02nopoints.png" alt="Can't buy a hint."> 169 <figcaption>Can't buy a hint.</figcaption> 170 </figure> 171 </div> 172 173 </div> 174 175 <h2>Step 3: Making hints</h2> 176 <p>You have a choice. You can have just one standard hint or you can make a few. It's up to you and I'll show you both 177 ways.</p> 178 179 <p>This is essentially the same process as in the text version of this feature, with a couple of exception. Instead of 180 <span class="function">alert</span>, we'll use our <span class="object">display</span> object. We don't have a <span 181 class="keyword">while</span> loop in our HTML version. And we can add some HTML formatting to the text so it 182 looks nicer.</p> 183 184 185 <h3>Offering a single hint</h3> 186 <div class="flex2"> 187 <div> 188 <p>If you only want to have one hint to offer, then you could do something like this. I still made it sort of a 189 puzzle for the player, but you can be more direct if you want.</p> 190 191 <div class="code"> 192 <ul> 193 <li> 194 <ul> 195 <li><span class="keyword">var</span> hint = <span class="string">"In Kindergarten, you learned a song that 196 sounds like <em>Twinkle, Twinkle, Little Star</em>"</span>; 197 </li> 198 <li>hint += <span class="string">" but it's about something being in a specific order."</span>; 199 </li> 200 <li>hint += <span class="string">" Your clues have code words that should be put in that same 201 order."</span>; 202 </li> 203 <li>hint += <span class="string">"<p><strong>Enter the 204 passcode.</strong></p>"</span>; 205 </li> 206 <li>text += hint;</li> 207 <li><span class="object">display</span>.<span class="function">broken</span>(text);</li> 208 </ul> 209 </li> 210 <li>} <span class="comment">//this closes the function</span></li> 211 </ul> 212 </div> 213 214 <p>That does it for the single hint. You're all finished with this feature. But maybe add some style! <a href="#skip4">See below.</a></p> 215 </div> 216 <div class=""> 217 <figure><img src="/roomadventure/screenimages/hintbutton03singlehint.png" alt="One hint option"> 218 <figcaption>One hint option</figcaption> 219 </figure> 220 </div> 221 222 </div> 223 224 <h3>Offering several hints</h3> 225 <p>In the interest of expanding your coding knowledge and practice, let's create multiple hints. I'm going to create a 226 set of hints in an array and then randomly pick a hint each time the player asks for one. This means the player 227 could be unlucky and get the same hint more than once (unless we control for that) but I think that makes it more 228 interesting.</p> 229 230 231 <h4>Leaving an unfinished function</h4> 232 <p>We're going to jump out of the <span class="function">getPasscodeGuess</span> function for a few minutes. You might 233 get some errors showing up, but we'll fix them.</p> 234 235 236 <h4>Updating getPasscode() [top]</h4> 237 <p>At the top of the function, we recreate the <span class="object">passcode</span> object. Now, ever though we can 238 create new properties on the fly by just assigning them, it's better practice to show that we intend to do so if we 239 can.</p> 240 241 <p>For good code readability, let's add a <span class="property">hints</span> property to the <span class="object">passcode</span> 242 object. And here, we'll set the cost for the hint, which you could make <code>0</code> if you don't want a cost.</p> 243 244 <div class="code"> 245 <ul> 246 <li>passcode =</li> 247 <li>{ 248 <ul> 249 <li><span class="property">reward</span>: 100,</li> 250 <li><span class="property">penalty</span>: 25,</li> 251 <li><span class="property">exitCode</span>: <span class="string">""</span>,</li> 252 <li><span class="property">codes</span>: [],</li> 253 <li><span class="property">rooms</span>: []<strong>, <span class="comment">//remember the comma 254 here</span></strong></li> 255 <li><strong><span class="property">hints</span>: [], <span class="comment"> //add this</span> </strong> 256 </li> 257 <li><strong><span class="property">hintCost</span>: 5</strong></li> 258 </ul> 259 </li> 260 <li>};</li> 261 </ul> 262 </div> 263 264 265 <h4>Updating getPasscode() [bottom]</h4> 266 <p>When we make the clues for the player and the passcode, let's also call for the hints to be created.</p> 267 <p>To make it easy to find where to put this, go to the very bottom of the <span class="function">getPasscode</span> 268 function.</p> 269 270 <div class="code"> 271 <ul> 272 <li> 273 <ul> 274 <li><span class="object">passcode</span>.<span class="property=">hints</span> = <span class="function">makePasscodeHints</span>(passcode); 275 <span 276 class="comment">//new</span> 277 </li> 278 <li><span class="keyword">return</span>; <span class="comment">//already there</span></li> 279 </ul> 280 </li> 281 </ul> 282 </div> 283 284 <h4>Creating the makePasscodeHints() function</h4> 285 <p>We made a global set of hints. Now we'll copy that set so we can use it without making changes to the original 286 set.</p> 287 288 <div class="code"> 289 <ul> 290 <li><span class="keyword">function</span> <span class="function">makePasscodeHints</span>(passcode)</li> 291 <li>{ 292 <ul> 293 <li><span class="keyword">var</span> hints = [];</li> 294 <li>hints.<span class="function">push</span>(<span class="string">"<em>Twinkle, Twinkle, Little Star</em> 295 sounds like another song you learned in Kindergarten that reminds us of a certain order."</span>); 296 </li> 297 <li>hints.<span class="function">push</span>(<span class="string">"A group of animals had a race. The aardvark 298 finished first. The bunny was second. The cat was a purrfect third. The dog defended fourth. The elephant 299 was fifth."</span>); 300 </li> 301 <li>hints.<span class="function">push</span>(<span class="string">"Two friends were at the zoo. Rodger went 302 and FED the horses, but he did it wrong. Instead, his buddy STU did it right."</span>); 303 </li> 304 <li> </li> 305 <li><span class="comment">//How about some really helpful hints?</span></li> 306 <li><span class="keyword">var</span> exitCode = <span class="object">passcode</span>.<span 307 class="property">exitCode</span>; 308 </li> 309 <li><span class="keyword">for</span> (<span class="keyword">var</span> i = 0; i < exitCode.<span 310 class="property">exitCode</span>.<span 311 class="property">length</span>; i += 3) 312 </li> 313 <li>{ 314 <ul> 315 <li><span class="keyword">var</span> index = <span class="object">Math</span>.<span 316 class="function">floor</span>(<span 317 class="object">Math</span>.<span class="function">random</span>() * exitCode.<span 318 class="property">length</span>); 319 </li> 320 <li>hints.<span class="function">push</span>(<span class="string">"Passcode digit #"</span> + (index + 1) 321 + <span class="string">" is "</span> + exitCode.<span class="function">substring</span>(index, 1)); 322 </li> 323 </ul> 324 </li> 325 <li>}</li> 326 <li><span class="keyword">return</span> hints;</li> 327 </ul> 328 </li> 329 <li>}</li> 330 </ul> 331 </div> 332 333 334 <h4>Finishing the getPasscodeGuess function</h4> 335 336 337 <p>We left this function unfinished which is probably showing you some errors. Let's wrap it up finally. We have 338 everything we need now, so we just need to pick a hint to show.</p> 339 340 <p>This goes at the bottom of the <span class="function">getPasscodeGuess</span> function we were creating.</p> 341 <div class="flex2"> 342 <div> 343 <div class="code"> 344 <ul> 345 <li> 346 <ul> 347 <li><span class="comment">//make a copy of the global hints so we don't alter them accidentally</span> 348 </li> 349 <li><span class="keyword">var</span> hints = <span class="object">passcode</span>.<span class="property">hints</span>.<span 350 class="function">slice</span>(); 351 </li> 352 <li> </li> 353 <li><span class="comment">//now let's pick a hint</span></li> 354 <li><span class="keyword">var</span> hintNumber = <span class="object">Math</span>.<span 355 class="function">floor</span>(<span 356 class="object">Math</span>.<span class="function">random</span>() * hints.<span 357 class="property">length</span>); 358 </li> 359 <li><span class="keyword">var</span> hint = <span class="string">"Hint #"</span> + (hintNumber + 1) + 360 <span 361 class="string">" of "</span> + hints.<span class="property">length</span> + <span class="string">": 362 "</span>; 363 </li> 364 <li>hint += hints[hintNumber];</li> 365 <li>hint += <span class="string">"<p><strong>Enter the 366 passcode.</strong></p>"</span>; 367 </li> 368 <li>text += hint;</li> 369 <li><span class="object">display</span>.<span class="function">broken</span>(text);</li> 370 <li> </li> 371 <li><span class="comment">//if you want to remove the hint from the list, add this</span></li> 372 <li><span class="comment">//note: the list of hints will be reset if the player guesses wrong and tries 373 again</span> 374 </li> 375 <li>hints.<span class="function">splice</span>(hintNumber, 1);</li> 376 </ul> 377 </li> 378 <li>} <span class="comment">//this closes the function</span></li> 379 </ul> 380 </div> 381 </div> 382 <div class=""> 383 <figure><img src="/roomadventure/screenimages/hintbutton04multihint.png" alt="Multiple hints option"> 384 <figcaption>Multiple hints option</figcaption> 385 </figure> 386 </div> 387 </div> 388 389 <h2 id="skip4">Step 4: Styling the new hint button</h2> 390 <p>This is optional, but why not add some hint button flair? Feel free to style the button however you like.</p> 391 <p>Remember, because the hint button is inside the navigation pane, we have to target it through inheritance.</p> 392 393 <div class="code"> 394 <ul> 395 <li>#<span class="function">navigation</span> #<span class="function">hintButton</span> { 396 <ul> 397 <li><span class="property">color</span>: #2f2475;</li> 398 <li><span class="property">background-color</span>: orange;</li> 399 <li><span class="property">width</span>: auto;</li> 400 <li><span class="property">height</span>: auto;</li> 401 <li><span class="property">padding</span>: 8px;</li> 402 <li><span class="property">border-radius</span>: 15px;</li> 403 <li><span class="property">border-style</span>: inset;</li> 404 </ul> 405 </li> 406 <li>}</li> 407 </ul> 408 </div> 409 410 <p>That was a lot of pieces to add multiple hints, but it will enrich the game even more, especially if you get 411 creative with your hints or change the format of the game.</p> 412 413 414 <h2>Happy Coding!</h2> 415 <h2>—Dr. Wolf</h2> 416 417 <div id="prevnext"></div> 418 <!-- required section for navigation sidebar --> 419 </div> 420 <script src="/navigator.js"></script> 421 <script>begin("roomadventure");</script> 422 <!-- end of required section for navigation sidebar --> 423 </body> 424 </html> 425