|
addhtmlkeepiteminroom.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>Keep an item inside a specific room when randomizing items</h2>
18 <h4>Difficulty: ★★☆☆☆</h4>
19 <h4><em>Requirement: randomizeItems function</em></h4>
20
21 <div class="flex-container">
22 <div>
23 <!--Explanation-->
24 <p>You may create your game where you want some of your items to be randomly scattered, but other items kept in a
25 certain place. For example, if you have a room that needs a screwdriver and you want to keep the screwdriver in
26 the basement, now you'll be able to.</p>
27
28 <p>Let's create a way of ignoring specific rooms when we shuffle items. This way, we can control the game the way
29 we want to.</p>
30
31 <h2>What we need to do</h2>
32 <ul>
33 <li>Add properties to rooms that we don't want to shuffle.</li>
34 <li>As we prepare to randomize items, set the non-shuffled fixWith items into their desired itemFound locations.
35 </li>
36 <li>Skip over pre-set items as we set other items.</li>
37 </ul>
38 </div>
39 <div class="imgwrapper">
40 <br>
41 <!--Screenshot-->
42 <img src="/roomadventure/screenimages/keepiteminroom.png">
43 </div>
44 </div>
45
46 <h2>Step 1: Go into your <span class="function">randomizeItems</span> function</h2>
47 <p>All changes will take place in your <span class="function">randomizeItems</span> function. For this feature to
48 work, we need to make sure there is a <span class="property">fixWith</span> and a matching <span class="property">itemFound</span>.
49 So you actually have to set the locations of two things. We'll do this by adding a property to the non-shuffled
50 rooms.</p>
51
52 <p>To begin, we need to start with an empty array so we can track the items we don't want to move.</p>
53 <p>This goes at the very top of the function as shown.</p>
54
55 <div class="code">
56 <ul>
57 <li><span class="keyword">function</span> <span class="function">randomizeItems</span>(availableRooms)</li>
58 <li>{
59 <ul>
60 <li><span class="comment">//prepare a list of items we won't move</span></li>
61 <li><span class="keyword">var</span> roomItemsNotShuffled = [];
62 </li>
63 </ul>
64 </li>
65 </ul>
66 </div>
67
68 <h2>Step 2: Removing the non-shuffle items from the list</h2>
69 <p>The function starts with a loop that cycles through all the rooms and makes a list of all the <code>fixWith</code>
70 items. Some of those will be items we don't want to move. So let's pull them off that list.</p>
71 <p>This goes right after the <code><span class="object">player</span>.<span
72 class="property">itemsLeftToFix</span></code> increase.
73 </p>
74
75
76 <div class="code">
77 <ul>
78 <li>
79 <ul>
80 <li><span class="comment">//this is already there</span></li>
81 <li><span class="object">player</span>.<span class="property">itemsLeftToFix</span>++;</li>
82 <li> </li>
83 <li><span class="comment">//if the room has a noShuffle property AND that room is in the available list of
84 rooms where items are being randomized...</span></li>
85 <li><span class="keyword">if</span> (<span class="object">room</span>.<span class="property">noShuffle</span>
86 && <span class="object">availableRooms</span>[<span class="object">room</span>.<span class="property">noShuffle</span>])
87 </li>
88 <li>{
89 <ul>
90 <li><span class="comment">//set the noShuffle room's fixWith to the room you want to find it in</span>
91 </li>
92 <li><span class="object">availableRooms</span>[<span class="object">room</span>.<span class="property">noShuffle</span>].<span
93 class="property">itemFound</span> = <span class="object">room</span>.<span
94 class="property">fixWith</span>;
95 </li>
96 <li> </li>
97 <li><span class="comment">//keep track of the rooms that now have the items we don't want to move</span>
98 </li>
99 <li>roomItemsNotShuffled.<span class="function">push</span>(<span class="object">room</span>.<span
100 class="property">noShuffle</span>);
101 </li>
102 </ul>
103 </li>
104 <li>}</li>
105 <li><span class="keyword">else</span>
106 <li>{
107 <ul>
108 <li><span class="comment">//this was already here, but we're wrapping it in the <em>else</em>
109 statement</span>
110 </li>
111 <li>items.<span class="function">push</span>(<span class="object">room</span>.<span
112 class="property">fixWith</span>);
113 </li>
114 </ul>
115 </li>
116 <li>} <span class="comment"> //don't forget this new closing brace</span></li>
117 </ul>
118 </li>
119 </ul>
120 </div>
121
122
123 <h2>Step 3: Skipping rooms</h2>
124 <p>We pulled the items off the list so we don't move them. Now we need to make sure we don't set new items to those
125 rooms. Instead of altering our <span class="object">availableRooms</span> object, we're just going to put a check in
126 the loop.</p>
127
128 <p>Let's move down to the <code>for...in</code> loop that actually randomizes the items.</p>
129 <p>If you added the feature that makes sure no <code>itemFound</code> items are in their <code>fixWith</code> rooms,
130 then the loop you're looking for will be wrapped in a <code>do...while</code> loop, but this loop is still inside.
131 </p>
132
133 <div class="code">
134 <ul>
135 <li>
136 <ul>
137 <li><span class="keyword">for</span> (<span class="keyword">var</span> roomName in <span class="object">availableRooms</span>)
138 <span class="comment">//already there</span></li>
139 <li>{
140 <ul>
141 <li><span class="comment">//let's skip the rooms whose items we don't want to shuffle</span></li>
142 <li><span class="comment">//if the room name is in the array, then let's skip it</span></li>
143 <li><span class="keyword">if</span> (roomItemsNotShuffled.<span class="function">indexOf</span>(roomName)
144 >= 0)
145 </li>
146 <li>{
147 <ul>
148 <li><span class="object">console</span>.<span class="function">log</span>(roomName + <span
149 class="string">" skipped"</span>); <span class="comment">//optional, just so you can check that
150 it's working</span></li>
151 <li><span class="keyword">continue</span>;</li>
152 </ul>
153 </li>
154 <li>}</li>
155 </ul>
156 </li>
157 </ul>
158 </li>
159 </ul>
160 </div>
161
162 <p>I stuck the <code><span class="object">console</span>.<span class="function">log</span>()</code> call in there just
163 for debugging. You don't have to include it at all. But if you do and you run the program, open up developer tools
164 (try pressing <kbd class="key">F12</kbd>) and you should see the rooms that were skipped. Those should be the same
165 as the ones you gave <span class="property">noShuffle</span> properties to. If they don't show up, it's possible the
166 room names are not spelled the same, or maybe one room isn't on the <span class="object">availableRooms</span> list
167 for some reason, such as if the optional <span class="function">randomizeRoomLayout</span> function dropped one of
168 the rooms.</p>
169
170 <p>Generally, when I'm checking to see if something is in an array or not, I check to see if the <code>indexOf</code>
171 is or is not <code>-1</code>. But seeing <code>!== -1</code> means "not equal to -1" or "the room is not, not on the
172 list." <span class="string">Translation: "It <em>is</em> on the list."</span> So this time, I made the comparision
173 <code>>= 0</code> so it's a little easier to read and understand.</p>
174
175 <div class="code">
176 <ul>
177 <li><span class="comment">//these two comparisons do the same thing when using indexOf</span></li>
178 <li><span class="keyword">if</span> (roomItemsNotShuffled.<span class="function">indexOf</span>(roomName) >= 0)
179 </li>
180 <li><span class="keyword">if</span> (roomItemsNotShuffled.<span class="function">indexOf</span>(roomName) !== -1)
181 </li>
182 </ul>
183 </div>
184
185
186 <h2>Step 4: Adding a noShuffle property to a room</h2>
187 <p>All that's left is to set up a <span class="property">noShuffle</span> property with your rooms when you create
188 them. All you need to do is to go your <span class="function">getRooms</span> function and find the room or rooms
189 you want to keep from shuffling and add a new <span class="property">noShuffle</span> property pointing the room the
190 item should be found in.</p>
191
192 <p>I'm going to put the basement's <code>fixWith</code> item in the <code>office</code> every time.</p>
193
194 <div class="code">
195 <ul>
196 <li><span class="comment">//this is inside the <em>getRooms</em> function</span></li>
197 <li><span class="keyword">var</span> <span class="object">basement</span> =</li>
198 <li>{
199 <ul>
200 <li><span class="property">name</span>: <span class="string">"basement"</span>,</li>
201 <li><span class="property">noShuffle</span>: <span class="string">"office</span>,</li>
202 <li><span class="comment">//all the rest of this room's properties</span></li>
203 </ul>
204 </li>
205 </ul>
206 </div>
207
208 <p>Remember, you can put the property anywhere in the object, but make sure it's not inside an inner object like <span
209 class="property">exits</span>.</p>
210
211 <p>If you included the optional feature that has multiple <code>brokenThing</code>s (the <code>brokenArray</code>) for
212 the program to pull from, this feature will still put the <code>fixWith</code> item into the specified room.</p>
213
214 <p>A friend of mine made a <em>Beauty and the Beast</em> version of this game and she always wanted <code>true
215 love</code> to be found in the Library. The <code>true love</code> was needed in the West Wing where the <code>enchanted
216 rose</code> was the <code>brokenThing</code>. If she gave the West Wing a <code>brokenArray</code> with a chair as
217 the <code>brokenThing</code>, then <code>Mrs. Potts' Complete Guide To Chair Repair</code> would be found in the
218 Library instead of <code>true love</code>, which would be fine because the <code>enchanted rose</code> wouldn't be
219 broken in that run of the game.</p>
220
221
222 <h2>Now that you know that you can find true love in the library, get searching!</h2>
223 <h2>—Dr. Wolf</h2>
224
225 <div id="prevnext"></div>
226 <!-- required section for navigation sidebar -->
227 </div>
228 <script src="/navigator.js"></script>
229 <script>begin("roomadventure");</script>
230 <!-- end of required section for navigation sidebar -->
231 </body>
232 </html>
233
234