|
addrandomlayoutdiagonals.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>Add Diagonal Directions to the Random Room Layout Generator</h2>
18 <h4>Difficulty: ★☆☆☆☆</h4>
19 <h4><em>Requirement: randomizeRoomLayout</em></h4>
20
21 <div class="flex-container">
22 <div>
23 <!--Explanation-->
24 <p>In our advanced feature, Randomize Layout, we take all the available rooms and mix up how they're connected. We
25 kept this process pretty simple, connecting rooms east and west and sometimes north and south.</p>
26 <p>What if we want some diagonal (northeast or southwest) types of connections? Let's add those in.</p>
27
28 <h2>What we need to do</h2>
29
30 <ul>
31 <li>We need to see if a diagonal connection is possible.</li>
32 <li>If so, let's randomly choose the connection direction: | / \ (north-south, northeast-southwest,
33 northwest-southeast)
34 </li>
35 </ul>
36 </div>
37 <div class="flex-column">
38 <div class="imgwrapper">
39 <br>
40 <!--Screenshot-->
41 <img src="/roomadventure/screenimages/randomlayoutdiagonaltext.png">
42 </div>
43
44 <div class="imgwrapper">
45 <br>
46 <!--Screenshot-->
47 <img src="/roomadventure/screenimages/randomlayoutdiagonal.png">
48 </div></div>
49 </div>
50
51 <h2>Step 1: Go into your randomizeRoomLayout function</h2>
52 <p>This is a pretty simple tweak to our rather complicated function. Find the section inside <span class="function">randomizeRoomLayout</span>
53 where the <span class="keyword">for</span> loop makes the north-south connections.</p>
54 <p>I'm showing you the whole double-nested <span class="keyword">for</span> here for reference.</p>
55
56 <div class="code">
57 <ul>
58 <li><span class="comment">//connect north and south at random along each row pair</span>
59 <li><span class="keyword">for</span> (<span class="keyword">var</span> i = 0; i < rows.<span class="property">length</span>
60 - 1; i++)
61 </li>
62 <li>{
63 <ul>
64 <li><span class="keyword">for</span> (<span class="keyword">var</span> j = 0; j < connections; j++)</li>
65 <li>{
66 <ul>
67 <li><span class="keyword">var</span> index = <span class="object">Math</span>.<span
68 class="function">floor</span>(<span class="object">Math</span>.<span class="function">random</span>()
69 * minRoomsPerRow);
70 </li>
71 <li> </li>
72 <li><strong><span class="comment">//new code will go here</span></strong></li>
73 <li> </li>
74 <li><strong><span class="comment">//this part's already here too, but we're going to wrap it in an else
75 statement soon</span></strong></li>
76 <li> </li>
77
78 <li><span class="comment">//rows[i] is top room, rows[i + 1] is bottom room</span></li>
79 <li>rows[i][index].<span class="property">exits</span>.<span class="property">south</span> = rows[i +
80 1][index].<span class="property">name</span>;
81 </li>
82 <li>rows[i + 1][index].<span class="property">exits</span>.<span class="property">north</span> =
83 rows[i][index].<span class="property">name</span>;
84 </li>
85 </ul>
86 </li>
87 <li>}</li>
88 </ul>
89 </li>
90 <li>}</li>
91 </ul>
92 </div>
93
94 <h2>Step 2: Create variables for southwest and southeast</h2>
95 <p>To make the code easier to deal with, we're going to create temporary variables to help us out. One's easy. The
96 other needs a little work. I'll explain after the code.</p>
97 <p>This goes in right after the <code>index</code> variable is created.</p>
98
99 <div class="code">
100 <ul>
101 <li><span class="keyword">var</span> southeast = rows[i + 1][index + 1];</li>
102 <li><span class="keyword">var</span> southwest;</li>
103 <li><span class="keyword">if</span> (index > 0)</li>
104 <li>{
105 <ul>
106 <li>southwest = rows[i + 1][index - 1];</li>
107 </ul>
108 </li>
109 <li>}</li>
110 </ul>
111 </div>
112
113 <p>Remember, we're using a two-dimension array in this section. The <code>rows</code> variable holds each <em>row</em>
114 and within that each <em>column</em>. So it's like <code>rows[row][column]</code>.</p>
115 <p>Let's say we are on row 1 and column 4. That would be <code>rows[1][4]</code>. Ok so far? If we want to go
116 southwest from there, we would go down one row, to row 2 and to the left one column, to column, therefore to <code>row[2][3]</code>.
117 Remember that the lower the number, the closer to the top-left corner we get, so bigger numbers do down and to the
118 right.</p>
119 <p>This is all fine and good, but what happens if we are in column 0, the far left side? If we look to the southwest,
120 we'd be trying to see if there is an index <code>-1</code>. That would cause an error. So we need to check for that
121 when we make the <code>southwest</code> variable.</p>
122 <p>We don't run into the same problem with <code>southeast</code> because in an array, if we pick an index that's too
123 big, we just get <span class="keyword">undefined</span> without an error. Normally, we <em>would</em> have to check for the <code>rows[i + 1]</code> part of the code to make sure there is a row there before trying to find the column. But we don't have to because of the way the outer loop is set up. The outer loop (the <code>i</code> loop) stops one row before the end, so it can always go to row <code>i + 1</code>. It was designed to work that way and that's why we don't have to check for it.</p>
124
125
126 <h2>Step 3: Randomly decide which type of connection we're going to create.</h2>
127 <p>You can choose anything you want here. I'm having the computer pick from <code>0</code> to <code>4</code>. If it's
128 a <code>0</code> and if southwest is a possible room, then we'll connect it. Otherwise, if the computer picked a
129 <code>1</code> and southeast is possible, then we'll connect that instead. If none of that works, then we stick with
130 our north-south connection as a backup.</p>
131 <p>It's important here to use the AND <code>&&</code> operator. If the computer picks <code>0</code>, we need to make
132 sure we have a <code>southwest</code> room, or else we'll connect up an <span class="keyword">undefined</span> exit.
133 </p>
134
135 <div class="code">
136 <ul>
137 <li><span class="comment">//get a random number to choose the type of direction to connect</span></li>
138 <li><span class="keyword">var</span> connection = <span class="object">Math</span>.<span
139 class="function">floor</span>(<span class="object">Math</span>.<span class="function">random</span>() * 5);
140 </li>
141 <li> </li>
142 <li><span class="keyword">if</span> (connection === 0 && <span class="object">southwest</span>)</li>
143 <li>{ <span class="comment">//yes, then set it
144 <ul>
145 <li>rows[i][index].<span class="property">exits</span>.<span class="property">southwest</span> = <span
146 class="object">southwest</span>.<span class="property">name</span>;
147 </li>
148 <li><span class="object">southwest</span>.<span class="property">exits</span>.<span
149 class="property">northeast</span> = rows[i][index].<span class="property">name</span>;
150 </li>
151 </ul>
152 </span>
153 <li>}</li>
154 <li><span class="keyword">else if</span> (connection === 1 && <span class="object">southeast</span>)</li>
155 <li>{
156 <ul>
157 <li>rows[i][index].<span class="property">exits</span>.<span class="property">southeast</span> = <span
158 class="object">southeast</span>.<span class="property">name</span>;
159 </li>
160 <li><span class="object">southeast</span>.<span class="property">exits</span>.<span
161 class="property">northwest</span> = rows[i][index].<span class="property">name</span>;
162 </li>
163 </ul>
164 </li>
165 <li>}
166 <li><span class="keyword">else</span>
167 <li><strong>{ <span class="comment">//this brace is new!!!</span></strong>
168 <ul>
169 <li> </li>
170 <li><strong><span class="comment">//these three lines were already there</span></strong></li>
171 <li><span class="comment">//rows[i] is the top room, rows[i + 1] is the bottom room</span></li>
172 <li>rows[i][index].<span class="property">exits</span>.<span class="property">south</span> = rows[i +
173 1][index].<span class="property">name</span>;
174 </li>
175 <li>rows[i + 1][index].<span class="property">exits</span>.<span class="property">north</span> =
176 rows[i][index].<span class="property">name</span>;
177 </li>
178 <li> </li>
179 </ul>
180 </li>
181 <li><strong>} <span class="comment">//this brace is new!!!</span></strong></li>
182 <li> </li>
183 <li><span class="comment">//two other braces follow this to end the <code>j</code> and <code>i</code>
184 loops.</span></li>
185 </ul>
186 </div>
187
188 <p>You should notice that we're keeping the original north-south code the way it was, but now we're wrapping it in an
189 <span class="keyword">else</span> statement.</p>
190 <p>And that's a wrap.</p>
191
192
193 <h2>Happy Coding!</h2>
194 <h2>—Dr. Wolf</h2>
195
196 <div id="prevnext"></div>
197 <!-- required section for navigation sidebar -->
198 </div>
199 <script src="/navigator.js"></script>
200 <script>begin("roomadventure");</script>
201 <!-- end of required section for navigation sidebar -->
202 </body>
203 </html>
204
205