|
addhtmliteminotherlocation.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>Make sure items are not found in the rooms they're needed in</h2>
18 <h4>Difficulty: ★★☆☆☆</h4>
19 <h4><em>Requirement: randomizeItems function</em></h4>
20
21 <div class="flex-container">
22 <div>
23
24 <!--Explanation-->
25 <p>When randomizing items, it's possible for the computer to put <code>fixWith</code> items inside the room that
26 needs it for its <code>brokenThing</code>. This isn't much fun, and it happens more often the fewer rooms you
27 have.</p>
28
29 <p>Let's make some tweaks to the <span class="function">randomizeItems</span> function to keep this from
30 happening.</p>
31
32 <p>We're going to use a <em>brute force</em> method to fix this problem. The computer's going to keep shuffling
33 the items over and over until everything is scattered properly. Unless you have thousands of rooms, or few rooms
34 with lots of repeat items, this should work just fine.</p>
35
36 <h2>What we need to do</h2>
37 <ul>
38 <li>Create a loop for the computer to check if any <code>itemFound</code> items are inside rooms with a matching
39 <code>fixWith</code>.
40 </li>
41 <li>If so, that's no good.</li>
42 <li>Repeat the loop and randomize the locations again if needed.</li>
43 </ul>
44 </div>
45 <div class="imgwrapper">
46 <br>
47 <!--Screenshot-->
48 <img src="/roomadventure/screenimages/shuffleitems.png">
49 </div>
50 </div>
51
52 <h2>Step 1: Go inside the randomizeItems functions</h2>
53 <p>All of our work will be inside the <span class="function">randomizeItems</span> function, so go there.</p>
54
55 <p>We have two <code>for...in</code> loops, one that makes a list of items and then one that shuffles them. Find the
56 space between these loops.</p>
57
58 <p><strong>Note:</strong> If you added the feature that allows you to keep certain items from being shuffled, then you
59 already have another loop where I'm telling you to look. The new code you're adding here would go below that.</p>
60
61 <div class="code">
62 <ul>
63 <li>
64 <ul>
65 <li>
66 <ul>
67 <li>items.<span class="function">push</span>(<span class="object">room</span>.<span
68 class="property">fixWith</span>);
69 </li>
70 </ul>
71 </li>
72 <li>}</li>
73 <li><span class="comment">//if you added the optional feature to prevent certain items from being moved, then
74 you have another loop here</span></li>
75 <li> </li>
76 <li><strong><span class="comment">//this is were we're starting to add some code</span></strong></li>
77 <li> </li>
78 <li><span class="keyword">for</span> (<span class="keyword">var</span> rooms <span class="keyword">in</span>
79 <span class="object">availableRooms</span>)
80 </li>
81 </ul>
82 </li>
83 </ul>
84 </div>
85
86 <h2>Step 2: Initializing the variables</h2>
87 <p>We need to create two variables in order for this to work. We're declaring them outside the loop so they're
88 recreated over and over.</p>
89
90 <p>These go in the spot noted in the code above.</p>
91
92 <div class="code">
93 <ul>
94 <li>
95 <ul>
96 <li><span class="keyword">var</span> itemsCopy = items.<span class="function">slice</span>();</li>
97 <li><span class="keyword">var</span> stillShuffling;</li>
98 <li></li>
99 </ul>
100 </li>
101 </ul>
102 </div>
103
104 <h2>Step 3: Begin the loop</h2>
105
106 <p>We don't know how many times the shuffling will have to happen, so a <span class="keyword">while</span> loop makes
107 the most sense here. However, we want to make sure the items get shuffled at least once. For this, we're using a
108 variation, the <code>do...while</code> loop.</p>
109
110 <p>We're going to be wrapping our randomizing part of the function in the loop.</p>
111
112 <p>Right under the variable declarations you just created, add these lines.</p>
113
114 <div class="code">
115 <ul>
116 <li>
117 <ul>
118 <li><span class="keyword">do</span></li>
119 <li>{
120 <ul>
121 <li><span class="comment">//restore the original <em>items</em> array each time through the loop</span>
122 </li>
123 <li>items = itemsCopy.<span class="function">slice</span>();</li>
124 <li>stillShuffling = <span class="keyword">false</span>;</li>
125 </ul>
126 </li>
127 </ul>
128 </li>
129 </ul>
130 </div>
131
132 <p>First, we need to make a copy of the <code>items</code> array. We may need to be changing it over and over, so we
133 have to keep the original copy intact. Because we have the <code>items</code> array referred to several times in the
134 loop below, we're making things easier on ourselves. We're making a copy of the original <code>items</code> array
135 and we'll restore it every time so we don't have to update all the <code>items</code> uses to <code>itemsCopy</code>.
136 </p>
137
138 <p>We will also need a flag variable for our loop. We're going to first assume that everything is shuffled perfectly.
139 But during the loop, we're going to check to see if there's a problem, and if so, then we're going to change that
140 flag so it randomizes everything again.</p>
141
142 <p>We use <code>items.<span class="function">slice</span>()</code> to make a shallow copy of an array. We only have
143 strings in there so it's no problem. If we had objects inside, we'd have to do this differently. The <span
144 class="function">slice</span> method does not change the original array, so <code>items</code> stays just the
145 way it is.</p>
146
147 <p>This isn't the only use of <span class="function">slice</span>, just a convenient one. For more info on <span
148 class="function">slice</span>, check out the <a href="/javascripttutorial/array_spliceslice.html">JavaScript
149 tutorial.</a></p>
150
151 <p>As for our <code>stillShuffling</code> flag, it says, "Nope, we are not still shuffling, so move on!" But... when
152 we're checking items, if we find that something is where it doesn't belong, then this will change and say, "Oh,
153 yeah, we have to shuffle again!" Ok, ok, it doesn't literally say those things, but that's how it works.</p>
154 <p>We are resetting these two variables each time the loop runs, so it's a fresh start.</p>
155
156
157 <h2>Step 4: See if the <code>itemFound</code> matches the <code>fixWith</code> for the room.</h2>
158 <p>When an item is randomly picked for a room, if it's the item needed for that room, then let's reshuffle
159 everything.</p>
160
161 <p>Why don't we just pick another item randomly instead of reshuffling everything? As items get placed, there are
162 fewer to choose from. What if the last item to pick belongs to the last room that needs an item? We'd end in an
163 infinite loop scenario. Shuffling from the beginning will help prevent this.</p>
164
165 <p>This part goes inside the <span class="keyword">for</span> loop that's already there, right after the random <code>index</code>
166 is chosen. Look for this line and then add the others.</p>
167
168 <div class="code">
169 <ul>
170 <li>
171 <ul>
172 <li><span class="comment">//this is the line you're looking for</span></li>
173 <li><span class="keyword">var</span> index = <span class="object">Math</span>.<span
174 class="function">floor</span>(<span class="object">Math</span>.<span class="function">random</span>() *
175 items.<span class="property">length</span>);
176 </li>
177 <li> </li>
178 <li><span class="comment">//add these</span></li>
179 <li><span class="keyword">if</span> (items[index] === <span class="object">availableRooms</span>[<span
180 class="property">roomName</span>].<span class="property">fixWith</span>)
181 </li>
182 <li>{
183 <ul>
184 <li>stillShuffling = <span class="keyword">true</span>;</li>
185 <li><span class="keyword">break</span>;</li>
186 </ul>
187 </li>
188 <li>}</li>
189 </ul>
190 </li>
191 </ul>
192 </div>
193
194 <p>Can you make sense of the <span class="keyword">if</span> statement? It's a little heavy, isn't it? First we're
195 finding the item we're looking at from <code>items[index]</code>. Each time through the loop, a new room is
196 picked, so the item is compared to that room's <code>fixWith</code> item. If they match, then we have a problem.
197 We'd be putting batteries, let's say, in the room that needs the batteries. If this happens, we flip our
198 <code>stillShuffling</code> switch to tell the computer we need to shuffle again.</p>
199
200 <p>We're using the <span class="keyword">break</span> command to exit the <span class="function">for</span> loop
201 because there's no need to set all the other items if we have one that's already messed up.</p>
202
203 <h4>Want to test it?</h4>
204 <p>By the way, if you want to see if it's working, you can have the computer report to the console (or a popup) to let
205 you know. To do this, just add a line like this right before the <span class="keyword">break</span> statement. </p>
206
207 <p>If you use the console, you'll need to open developer tools when you run the program. (Try pressing <kbd
208 class="key">F12</kbd>.) It may shuffle perfectly on the first try, so you might not see your warning until you run
209 it a couple times.</p>
210
211 <div class="code">
212 <ul>
213 <li><span class="object">console</span>.<span class="function">log</span>(<span class="string">"I had to shuffle
214 items again!"</span>);
215 </li>
216 </ul>
217 </div>
218
219
220 <h2>Step 5: Closing the loop</h2>
221 <p>All that's left is to close the <code>do...while</code> loop. Go down to the very bottom of the function, right
222 before the very last brace. You may have three braces in a row down there, so this goes between the last two.</p>
223
224 <div class="code">
225 <ul>
226 <li>
227 <ul>
228 <li>} <span class="keyword">while</span> (stillShuffling);</li>
229 </ul>
230 </li>
231 <li> </li>
232 <li><span class="comment">//then the closing brace for the function is already there:</span></li>
233 <li>}</li>
234 </ul>
235 </div>
236
237 <p>Now you won't find what you need inside the room you need it in.</p>
238
239 <h2>Now, where did I leave my keys...?</h2>
240 <h2>—Dr. Wolf</h2>
241
242 <div id="prevnext"></div>
243 <!-- required section for navigation sidebar -->
244 </div>
245 <script src="/navigator.js"></script>
246 <script>begin("roomadventure");</script>
247 <!-- end of required section for navigation sidebar -->
248 </body>
249 </html>
250
251
252
253
254
255
256
257
258