1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/html"> 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: HTML Version</h1> 16 <h2>Asking the Player for a Name</h2> 17 <h4>Difficulty: ★★★☆☆</h4> 18 19 <div class="flex-container"> 20 <div> 21 22 <p>You can have the player include their name in the game. Then add some references to it throughout. This can 23 help bring a player into the experience.</p> 24 25 <h2>What we need to do</h2> 26 27 <ul> 28 <li>We need to have a place for the player to get a name.</li> 29 <li>We need to update the game text to make use of the name.</li> 30 </ul> 31 </div> 32 <div class="imgwrapper"> 33 <br> 34 <img src="/roomadventure/screenimages/getplayername.png"></div> 35 </div> 36 37 <p>We need to give a way for the player to include their name, and in HTML, that's not as easy as using the <span 38 class="function">prompt</span> command. You could use it, though. It would give your game a popup box again. If 39 you're okay with that, just follow the steps above for the text version.</p> 40 41 <p>We essentially have two options, an <code><input></code> tag or a <code><textarea></code> tag. Formally 42 speaking, an <code><input></code> tag is part of a larger set of tags called a <code><form></code>. It's 43 supposed to be inside a <code><form></code> tag, but we can use it without doing that.</p> 44 45 <p>In either case, we can limit the number characters and control the size of each element. We will need a place to 46 put it on the screen so the player can type it in.</p> 47 48 <p>Again, there are more official ways of coding these in, but we're going to create a text string and use that, like 49 we've done for our navigation and inventory buttons.</p> 50 51 <h2>Delete the text version if you inserted it</h2> 52 <p>If you installed the text version of this feature using <span 53 class="function">prompt</span>, then you need to delete it first. If you didn't put it in, then move on to the 54 next step.</p> 55 <p>Jump over to the text version and take out code from step 2. <a href="../addontext/addtextname.html#step2">Here's a 56 shortcut link</a>.</p> 57 <p>With that code gone, you're to install the HTML version.</p> 58 59 <h2>Go into startGame()</h2> 60 <p>Unless we really want to change things up, then we can't get the player's name before the game information is 61 displayed. Let's keep this simple. We'll explain the game and have a place there for the player to type in a 62 name.</p> 63 <p>But because of that, we need to change part of the starting text first.</p> 64 65 <h3>Step 1</h3> 66 <p>Let's make the welcome more generic by taking out the player's name here. Otherwise, it will say <span 67 class="string">Lica</span>, or whatever you put in the <span class="object">player</span>'s <span 68 class="property">name</span> property.</p> 69 70 <div class="code"> 71 <ul> 72 <li><span class="comment">//Let's delete the first line and update the second</span></li> 73 <li>text += <span class="string">"You are "</span> + <span class="object">player</span>.<span class="property">name</span>; 74 <span class="comment">//delete this line</span></li> 75 <li>text += <span class="string">" and you are in a house"</span>;</li> 76 <li> </li> 77 <li><span class="comment">//and make it something like this</span></li> 78 <li>text += <span class="string">"You are in a house"</span>;</li> 79 </ul> 80 </div> 81 <p>It's a subtle change, but it's needed.</p> 82 83 <h3>Step 2</h3> 84 <p>Let's tell the player that they can type in their name. We'll use our <code><span 85 class="object">display</span>.<span class="function">broken</span>()</code> method for this.</p> 86 <p>You still need to be inside your <span class="function">startGame</span> function. But now, go to the very end of 87 the function, right before the closing brace. Then add something like this.</p> 88 89 <div class="code"> 90 <ul> 91 <li><span class="keyword">function</span> <span class="function">startGame</span>()</li> 92 <li>{ 93 <ul> 94 <li><span class="comment">//all startGame code is above here, but this new code goes <em>before</em> the 95 closing brace</span></li> 96 <li><span class="object">display</span>.<span class="function">broken</span>(<span class="string">"Type your 97 name in the box below, then press Start Game."</span>); 98 </li> 99 </ul> 100 </li> 101 <li>} <span class="comment"> //← this brace was already there</span></li> 102 </ul> 103 </div> 104 105 <p>That's just one line of code, but we are going to add more in the next step, right below that.</p> 106 107 <h3>Step 3</h3> 108 <p>Now we need to give the player a place to type their name in. Now we have to choose between the 109 <code><input></code> tag and the <code><textarea></code> tag. I like the look of the 110 <code><input></code> box, so I'm using that.</p> 111 112 <p>You're still inside <span class="function">startGame</span> at the bottom of the function where you just added the 113 code from the last step.</p> 114 115 <p>We'll create a text string here to make the element and then we'll display it.</p> 116 117 <div class="code"> 118 <ul> 119 <li><span class="keyword">var</span> nameBox = <span class="string">"<input id='playerName' value='"</span> + 120 <span class="object">player</span>.<span class="property">name</span> + <span class="string">"'>"</span>; 121 </li> 122 <li> </li> 123 <li><span class="object">display</span>.<span class="function">found</span>(nameBox);</li> 124 </ul> 125 </div> 126 127 128 <h3>Step 4</h3> 129 <p>Next we need to capture the name when the player clicks the start button. This means we need to make the start 130 button call a new function we're going to create and then <em>that</em> new function will actually start the game. 131 </p> 132 <p>Here's one more thing to do inside of the <span class="function">startGame</span> function.</p> 133 134 <div class="code"> 135 <ul> 136 <li><span class="comment">//Find this line</span></li> 137 <li><span class="keyword">var</span> button = <span class="string">"<button id='start' onclick='<span 138 class="function">moveToRoom</span>()'>Start Game</button>"</span>; 139 </li> 140 <li> </li> 141 <li><span class="comment">//change <em>moveToRoom</em> to <em>getName</em></span></li> 142 <li><span class="keyword">var</span> button = <span class="string">"<button id='start' onclick='<span 143 class="function"><strong>getName</strong></span>()'>Start Game</button>"</span>; 144 </li> 145 </ul> 146 </div> 147 148 <h3>Step 5</h3> 149 <p>And now let's make that new function. Finally, move out of <span class="function">startGame</span> so we can make 150 our new function. Remember, the new function can go anywhere, but don't put it inside any other sets of braces in 151 the code.</p> 152 153 <div class="code"> 154 <ul> 155 <li><span class="keyword">function</span> <span class="function">getName</span>()</li> 156 <li>{ 157 <ul> 158 <li><span class="keyword">var</span> nameBox = <span class="object">document</span>.<span class="function">getElementById</span>(<span 159 class="string">"playerName"</span>); 160 </li> 161 <li><span class="keyword">if</span> (nameBox && nameBox.<span class="property">value</span> !== <span 162 class="string">""</span>) 163 </li> 164 <li>{ 165 <ul> 166 <li><span class="object">player</span>.<span class="property">name</span> = nameBox.<span 167 class="property">value</span></li> 168 </ul> 169 </li> 170 <li>}</li> 171 <li><span class="function">moveToRoom</span>();</li> 172 </ul> 173 </li> 174 <li>}</li> 175 </ul> 176 </div> 177 <h4>Code Breakdown</h4> 178 <p>The line with <code><span class="keyword">var</span> nameBox</code> should be familiar. That's how we get access to 179 an element on a webpage.</p> 180 <p>This line is being cautious: <span class="keyword">if</span> (nameBox && nameBox.<span 181 class="property">value</span> !== <span class="string">""</span>) 182 </p> 183 <p> 184 What we're doing here is making sure the input box exists by first just checking for <code>nameBox</code>. Well, it 185 ought to exist because we created it in the function right before this! But this is a protection for later. What if 186 you make some code changes and try to use the <span class="function">getName</span> function at some other point? 187 This first check let's you use the default name from the <span class="object">player</span> object and not cause an 188 error. 189 </p> 190 <p>We also check to make sure the box wasn't empty with <code>nameBox.<span 191 class="property">value</span> !== <span class="string">""</span></code>. It <em>shouldn't</em> be empty because we 192 gave the box a starting value when we create it. But if the user deletes the name, then this will also go back to 193 using the default name. Now, if the user just presses the space bar in the box, well, we're not going to control for 194 that here.</p> 195 <p>So, as long as the box exists <strong>and (&&)</strong> there is a value typed into the box, then we assign that as 196 the player's name. Whew.</p> 197 198 <h3>Step 6</h3> 199 <p>This step is optional, but why not take a minute and give the input box some style? If you want to do this, pop on 200 over to your CSS file and add some style properties. Use whatever you want. Here's what I'm going with.</p> 201 202 <div class="code"> 203 <ul> 204 <li><span class="function">#playerName</span> { 205 <ul> 206 <li><span class="property">border</span>: slateblue 15px outset;</li> 207 <li><span class="property">padding</span>: 10px;</li> 208 <li><span class="property">background-color</span>: #2f2475; <span class="comment">/* dark slateblue */</span> 209 </li> 210 <li><span class="property">color: orange</span>;</li> 211 <li><span class="property">font-size</span>: 1.1em;</li> 212 <li><span class="property">font-weight</span>: bold;</li> 213 <li><span class="property">text-align</span>: center;</li> 214 </ul> 215 </li> 216 <li>}</li> 217 </ul> 218 </div> 219 220 <h3>Step 7</h3> 221 <p>We've collected the player's name and now we should use it, right? We had to get rid of it in the <span 222 class="function">startGame</span> function because we didn't want to create another popup-type of situation. The 223 only other place the name is used in our game by default is at the end.</p> 224 225 <p>So now would be a good time to go through other dialogue areas in the game and make use of the name!</p> 226 <p>Be careful of your syntax. 227 <br> 228 Don't add a name to the <span class="function">startGame</span> function. 229 <br> 230 Remember to use our <span class="object">display</span> object instead of any <span class="function">alert</span>s 231 or such. 232 </p> 233 234 <h4>Syntax Samples</h4> 235 <div class="code"> 236 <ul> 237 <li><span class="object">player</span>.<span class="property">name</span> + <span class="string">", how are 238 you?"</span>; 239 </li> 240 <li><span class="string">"That's a really cool hat, "</span> + <span class="object">player</span>.<span 241 class="property">name</span> + <span class="string">"!"</span>; 242 </li> 243 <li><span class="string">"Code name: "</span> + <span class="object">player</span>.<span 244 class="property">name</span>; 245 </li> 246 </ul> 247 </div> 248 <p>Pay close attention to the starting and ending quotes in each example. You should see that <code><span 249 class="object">player</span>.<span 250 class="property">name</span></code> is never inside the quotes, even in the second example. There, the quotes 251 open, you have some text, then they close, and <em>then</em> the name is added in, then a new set of quotes opens, 252 with text, and then closes. It's a lot to look at, so take your time with it.</p> 253 254 <p>It's easy to cause a <span class="keyword">Syntax Error</span> by forgetting the plus signs!</p> 255 256 <h4>Update some other text strings</h4> 257 <p>These are just suggestions. Change whatever you want!</p> 258 259 <div class="code"> 260 <ul> 261 <li><span class="comment">//inside showScore()</span></li> 262 <li><span class="function">alert</span>(<strong><span class="object">player</span>.<span 263 class="property">name</span> + <span class="string">"'s Score: "</span></strong> + <span 264 class="object">player</span>.<span class="property">score</span>); 265 </li> 266 <li> </li> 267 <li><span class="comment">//inside showInventory()</span></li> 268 <li><span class="keyword">var</span> text = <strong><span class="string">"<h3>"</span> + <span class="object">player</span>.<span 269 class="property">name</span> + <span class="string">"'s Inventory</h3>"</span></strong>; 270 </li> 271 272 <!-- <li> </li> 273 <li><span class="comment">//inside checkPlayAgain()</span></li> 274 <li><span class="keyword">var</span> text = <span class="string">"Would you like to play again,"</span> + <strong><span 275 class="object">player</span>.<span class="property">name</span> + <span class="string">"? "</span></strong>; 276 </li>--> 277 </ul> 278 </div> 279 280 <p>Where else would you want to use the player's name?</p> 281 282 283 <h2>Happy Coding!</h2> 284 <h2>—Dr. Wolf</h2> 285 286 <div id="prevnext"></div> 287 <!-- required section for navigation sidebar --> 288 </div> 289 <script src="/navigator.js"></script> 290 <script>begin("roomadventure");</script> 291 <!-- end of required section for navigation sidebar --> 292 </body> 293 </html> 294