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</h1> 16 <h2>Asking the Player for a Name: Text Version</h2> 17 <h4>Difficulty: ★☆☆☆☆</h4> 18 <h4><em>Requirement: Basic game</em></h4> 19 20 <div class="flex-container"> 21 <div> 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"><br><img src="/roomadventure/screenimages/getplayernameprompt.png"></div> 33 </div> 34 35 36 <h3>Step 1</h3> 37 <p>Go into your <code><span class="function">startGame</span>()</code> function and find the line where we get the 38 <span class="object">player</span> object. It's near the top of the function.</p> 39 <div class="code"> 40 <ul> 41 <li><span class="object">player</span> = <span class="function">getPlayer</span>();</li> 42 </ul> 43 </div> 44 45 <h3>Step 2</h3> 46 <p>We're going to use JavaScript's <span class="function">prompt</span> function to ask the player for their name. We 47 will also include a default value in case they want to use that instead. The default value is an optional argument, 48 so you could leave it out, but then the dialogues would look a little funny.</p> 49 50 <p>Add the new code.</p> 51 <div class="code" id="step2"> 52 <ul> 53 <li><span class="object">player</span> = <span class="function">getPlayer</span>(); <span class="comment">//already 54 there</span></li> 55 <li><span class="keyword">var</span> newName = <span class="function">prompt</span>(<span class="string">"What's 56 your name?"</span>, <span class="string">"Lica"</span>); 57 </li> 58 <li><span class="keyword">if</span> (newName)</li> 59 <li>{ 60 <ul> 61 <li><span class="object">player</span>.<span class="property">name</span> = newName;</li> 62 </ul> 63 </li> 64 <li>}</li> 65 </ul> 66 </div> 67 68 <p>We're being a little over-cautious here. The <code><span class="function">getPlayer</span>()</code> function sets 69 <span class="string">"Lica"</span> as a default name already. We also put <span class="string">"Lica"</span> in the 70 <span class="function">prompt</span>'s default answer. If the player just hits enter, that's the name that will be 71 used.</p> 72 73 <p>So why bother with the <span class="keyword">if</span> statement? It's just in case the player deletes the name and 74 leaves the field blank. You could leave out the <span class="keyword">if</span> check and just leave the variable 75 assignment (<code><span class="object">player</span>.<span class="property">name</span> = newName;</code>) if you 76 prefer.</p> 77 78 <p>If you don't want the <span class="keyword">if</span> statement, you could shorten this even further and do this 79 instead.</p> 80 <div class="code"> 81 <ul> 82 <li><span class="object">player</span> = <span class="function">getPlayer</span>(); <span class="comment">//already 83 there</span></li> 84 <li><span class="object">player</span>.<span class="property">name</span> = <span 85 class="function">prompt</span>(<span class="string">"What's your name?"</span>, <span 86 class="string">"Lica"</span>); 87 </li> 88 </ul> 89 </div> 90 91 <h3>Step 3</h3> 92 <p>Now go through the text strings in your game and add calls to <code><span class="object">player</span>.<span 93 class="property">name</span></code> wherever you'd like to use the name. We're already inside the <span 94 class="function">startGame</span> function, so let's make a minor change while we're here.</p> 95 96 <p><strong>Be careful.</strong> Remember that <code><span class="object">player</span>.<span 97 class="property">name</span></code> is a variable and it has to be outside any sets of quotation marks for it to 98 work. You have to make sure you concatenate correctly. That just means you need to use the plus sign to add the 99 variable. Look at these generic examples so you see what I'm talking about.</p> 100 101 <h4>Syntax Samples</h4> 102 <div class="code"> 103 <ul> 104 <li><span class="object">player</span>.<span class="property">name</span> + <span class="string">", how are 105 you?"</span>; 106 </li> 107 <li><span class="string">"That's a really cool hat, "</span> + <span class="object">player</span>.<span 108 class="property">name</span> + <span class="string">"!"</span>; 109 </li> 110 <li><span class="string">"Code name: "</span> + <span class="object">player</span>.<span 111 class="property">name</span>; 112 </li> 113 </ul> 114 </div> 115 <p>Pay close attention to the starting and ending quotes in each example. You should see that <code><span 116 class="object">player</span>.<span 117 class="property">name</span></code> is never inside the quotes, even in the second example. There, the quotes 118 open, you have some text, then they close, and <em>then</em> the name is added in, then a new set of quotes opens, 119 with text, and then closes. It's a lot to look at, so take your time with it.</p> 120 121 <p>It's easy to cause a <span class="keyword">Syntax Error</span> by forgetting the plus signs!</p> 122 123 <h4>Updating startGame()</h4> 124 <p>When we first made the game, we told the player what their name was. It's kind of odd to leave it that way. If 125 someone types in "Kevin" then game says, "You are Kevin...". Um, yeah, I know. So let's make a change.</p> 126 127 <div class="code"> 128 <ul> 129 <li><span class="comment">//Let's change this line</span></li> 130 <li>text += <span class="string">"You are "</span> + <span class="object">player</span>.<span class="property">name</span>; 131 </li> 132 <li> </li> 133 <li><span class="comment">//and make it something like this</span></li> 134 <li>text += <span class="string">"Hello, "</span> + <span class="object">player</span>.<span 135 class="property">name</span> + <span class="string">". It's a new day"</span>; 136 </li> 137 </ul> 138 </div> 139 <p>Currently, the next line of the text string says <span class="string">"and you are in a house"</span>. I added the 140 <span class="string">"It's a new day"</span> part so the sentence would make sense without me having to change 141 anything else. But it's your game too, go go right ahead and change the text to whatever you want!</p> 142 143 <h4>Update some other text strings</h4> 144 <p>These are just suggestions. Change whatever you want!</p> 145 146 <div class="code"> 147 <ul> 148 <li><span class="comment">//inside showScore()</span></li> 149 <li><span class="function">alert</span>(<strong><span class="object">player</span>.<span 150 class="property">name</span> + <span class="string">"'s Score: "</span></strong> + <span 151 class="object">player</span>.<span class="property">score</span>); 152 </li> 153 <li> </li> 154 <li><span class="comment">//inside showInventory()</span></li> 155 <li><span class="keyword">var</span> text = <strong><span class="object">player</span>.<span 156 class="property">name</span> + <span class="string">"'s Inventory: "</span></strong>; 157 </li> 158 159 <li> </li> 160 <li><span class="comment">//inside checkPlayAgain()</span></li> 161 <li><span class="keyword">var</span> text = <span class="string">"Would you like to play again,"</span> + <strong><span 162 class="object">player</span>.<span class="property">name</span> + <span class="string">"? "</span></strong>; 163 </li> 164 </ul> 165 </div> 166 167 <p>Where else would you want to use the player's name?</p> 168 169 170 <h2>Happy Coding!</h2> 171 <h2>—Dr. Wolf</h2> 172 173 <div id="prevnext"></div> 174 <!-- required section for navigation sidebar --> 175 </div> 176 <script src="/navigator.js"></script> 177 <script>begin("roomadventure");</script> 178 <!-- end of required section for navigation sidebar --> 179 </body> 180 </html> 181