1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>Coding for Kids: The Room Adventure</title> 7 <link href="../index.css" rel="stylesheet" type="text/css" /> 8 <link href="rooms.css" rel="stylesheet" type="text/css" /> 9 </head> 10 <body> 11 <div id="body"><!-- Required div for navigation bar --> 12 13 <h1>The Room Adventure</h1> 14 <h3>HTML Version, All Book Features Included</h3> 15 16 17 <h2>Sample images</h2> 18 <div class="flex-feature"> 19 <div class="feature"><div class="imgtitle">Game starts <br>in a random room</div><div class="half"><img src="screenimages/basichtmlfeatures01.png"></div></div> 20 <div class="feature"><div class="imgtitle">Helpful hint</div><div class="half"><img src="screenimages/basichtmlfeatures02.png"></div></div> 21 <div class="feature"><div class="imgtitle">Increased interactivity</div><div class="half"><img src="screenimages/basichtmlfeatures03.png"></div></div> 22 <div class="feature"><div class="imgtitle">Choose items to use</div><div class="half"><img src="screenimages/basichtmlfeatures04.png"></div></div> 23 <div class="feature"><div class="imgtitle">Oops! That won't work!</div><div class="half"><img src="screenimages/basichtmlfeatures05.png"></div></div> 24 <div class="feature"><div class="imgtitle">Updated descriptions <br>after fixing things</div><div class="half"><img src="screenimages/basichtmlfeatures06.png"></div></div> 25 <div class="feature"><div class="imgtitle">Found a piece of the <br>passcode and the exit!</div><div class="half"><img src="screenimages/basichtmlfeatures07.png"></div></div> 26 <div class="feature"><div class="imgtitle">Passcode keypad</div><div class="half"><img src="screenimages/basichtmlfeatures08.png"></div></div> 27 <div class="feature"><div class="imgtitle">You win!</div><div class="half"><img src="screenimages/basichtmlfeatures09.png"></div></div> 28 </div> 29 30 <h3>Play the game here</h3> 31 <a href="racode/htmlFeatures/htmlFeaturesRunner.html" target="_blank">The Room Adventure (HTML-With Features)</a> 32 33 <h2>Here's the code</h2> 34 <p>There are several files for the code, separated by type.</p> 35 36 37 38 <h3>The JavaScript</h3> 39 <p>The JavaScript for this larger version of the project is separated into separate files. You could, however, have all the code in these files contained inside one single full. I split them up to keep related functions together so it is easier to find each one.</p> 40 41 <h4>JavaScript Code: The main JavaScript file that starts and manages the game</h4> 42 43 <div class="intrinsic-container intrinsic-container-16x9 small-hide"> 44 <iframe src="../exportToHTML/htmlFeaturesMain.js.html"></iframe> 45 </div> 46 <div class="feature"><a href="../exportToHTML/htmlFeaturesMain.js.html" target="_blank">Open the code in a new tab</a></div> 47 48 <h4>JavaScript Code: The functions related to displaying information onscreen</h4> 49 50 <div class="intrinsic-container intrinsic-container-16x9 small-hide"> 51 <iframe src="../exportToHTML/display.js.html"></iframe> 52 </div> 53 <div class="feature"><a href="../exportToHTML/display.js.html" target="_blank">Open the code in a new tab</a></div> 54 55 56 <h4>JavaScript Code: The functions related to the passcode feature</h4> 57 58 59 <div class="intrinsic-container intrinsic-container-16x9 small-hide"> 60 <iframe src="../exportToHTML/passcode.js.html"></iframe> 61 </div> 62 <div class="feature"><a href="../exportToHTML/passcode.js.html" target="_blank">Open the code in a new tab</a></div> 63 64 <h4>JavaScript Code: The functions related to the randomizers added to the game</h4> 65 <div class="intrinsic-container intrinsic-container-16x9 small-hide"> 66 <iframe src="../exportToHTML/randomizers.js.html"></iframe> 67 </div> 68 <div class="feature"><a href="../exportToHTML/randomizers.js.html" target="_blank">Open the code in a new tab</a></div> 69 70 <h4>JavaScript Code: These are all the rooms</h4> 71 <div class="intrinsic-container intrinsic-container-16x9 small-hide"> 72 <iframe src="../exportToHTML/rooms.js.html"></iframe> 73 </div> 74 <div class="feature"><a href="../exportToHTML/rooms.js.html" target="_blank">Open the code in a new tab</a></div> 75 76 77 78 <h3>The HTML</h3> 79 <div class="intrinsic-container intrinsic-container-16x9 small-hide"> 80 <iframe src="../exportToHTML/htmlFeaturesRunner.html.html"></iframe> 81 </div> 82 <div class="feature"><a href="../exportToHTML/htmlFeaturesRunner.html.html" target="_blank">Open the code in a new tab</a></div> 83 84 85 86 <h3>The CSS</h3> 87 <div class="intrinsic-container intrinsic-container-16x9 small-hide"> 88 <iframe src="../exportToHTML/htmlFeaturesStyle.css.html"></iframe> 89 </div> 90 <div class="feature"><a href="../exportToHTML/htmlFeaturesStyle.css.html" target="_blank">Open the code in a new tab</a></div> 91 92 93 94 <!-- required section for navigation sidebar --> 95 </div> 96 <script src="../navigator.js"></script><script>begin("roomadventure");</script> 97 <!-- end of required section for navigation sidebar --> 98 </body> 99 </html>