diff options
| author | raylu <raylu@mixpanel.com> | 2011-11-05 03:04:49 -0700 |
|---|---|---|
| committer | raylu <raylu@mixpanel.com> | 2011-11-05 03:04:49 -0700 |
| commit | cf4af138b16da878404cf3319d5d988dacee198a (patch) | |
| tree | 41187e9c8206657f9f5138de70c5e5a6f447a251 /pages/howtoplay.php | |
| parent | 264ed976da6b3012209386a76520327faeddf82e (diff) | |
| download | pathery-cf4af138b16da878404cf3319d5d988dacee198a.tar.xz | |
new layout
Diffstat (limited to 'pages/howtoplay.php')
| -rw-r--r-- | pages/howtoplay.php | 165 |
1 files changed, 95 insertions, 70 deletions
diff --git a/pages/howtoplay.php b/pages/howtoplay.php index 294e89f..bfad879 100644 --- a/pages/howtoplay.php +++ b/pages/howtoplay.php @@ -1,5 +1,5 @@ -<?PHP -htmlHeader(); +<?php +htmlHeader(array('tutorial')); ?> <body> @@ -29,74 +29,99 @@ $tpmap = displaymap(GenerateMapByCode($tpcode), 3, 'example'); ?> -<h1>Tutorial</h2> -<p> -<br />The object of the game is to make the longest maze. -<br />The "Snake" (name pending) must go to all the checkpoints. -<br />It starts from the red arrows: -<table><tr><td class='grid_td_start'></td></tr></table> -and goes to the blue arrows: -<table><tr><td class='grid_td_finish'></td></tr></table> -<br />Build a maze by clicking to place blocks. You can remove a block by clicking it again. -<br />It must be able to make it through your maze, so no walling completely! -<br />Try it: -<div style='width:200px;'> -<? echo $basicmap; ?> +<div class="wrapper"> + +<div id="tut-0" class="hidden"> + <h1 style="margin-bottom: 0">Tutorial</h1> + <p> + <br />The object of the game is to make the longest maze. + <br />The "Snake" (name pending) must go to all the checkpoints. + <br />It starts from the start squares: + <table><tr><td class='grid_td_start'></td></tr></table> + and goes to the end squares: + <table><tr><td class='grid_td_finish'></td></tr></table> + <br />Build a maze by clicking to place blocks. You can remove a block by clicking it again. + <br />It must be able to make it through your maze, so no walling completely! + </p> + <p>Try it: + <? echo $basicmap; ?> + </p> + <br /> + <a href="javascript:showTutorial(1)" class="next">Next</a> </div> -</p> -<br /><h2>Checkpoints:</h2> -<table> - <tr> - <td class='grid_td_cpa'></td> - <td class='grid_td_cpb'></td> - <td class='grid_td_cpc'></td> - <td class='grid_td_cpd'></td> - <td class='grid_td_cpe'></td> - </tr> -</table> -<p> -The path must reach all these (if they exist) before going to finish. Try it: - -<div style='width:200px;'> -<? echo $cpmap; ?> + +<div id="tut-1" class="hidden"> + <h2>Checkpoints:</h2> + <table> + <tr> + <td class='grid_td_cpa'></td> + <td class='grid_td_cpb'></td> + <td class='grid_td_cpc'></td> + <td class='grid_td_cpd'></td> + <td class='grid_td_cpe'></td> + </tr> + </table> + <p> + The path must reach all these (if they exist) before going to finish. Try it: + <? echo $cpmap; ?> + </p> + <br /><br /> + <p> + Tip: - Try to combine odd-letters with each other; + <br />I.E. If A, B, C exist, try to make a box around A and C, then maze the entrance to the box. + <br />This way, the path enters the box for A, leaves for B, returns for C, and leaves for the exit. + This would make the path go through your maze 4 times! + </p> + <a href="javascript:showTutorial(2)" class="next">Next</a> + <a href="javascript:showTutorial(0)" class="next">Back</a> </div> -<br /> -<br /> -<br />Tip: - Try to combine odd-letters with each other; -<br />I.E. If A, B, C exist, try to make a box around A and C, then maze the entrance to the box. -<br />This way, the path enters the box for A, leaves for B, returns for C, and leaves for the exit. -This would make the path go through your maze 4 times! -</p> -<h2>Teleports:</h2> -<table> - <tr> - <td><b>Teleport 1:</b></td> - <td class='grid_td_tp1_in' ></td> - <td class='grid_td_tp1_out' ></td> - </tr> - <tr> - <td><b>Teleport 2:</b></td> - <td class='grid_td_tp2_in' ></td> - <td class='grid_td_tp2_out' ></td> - </tr> -</table> -<p> -<br />Teleport tiles are traps. When the path goes across the "IN" tile, it gets thrown to the "OUT" tile. -<br />The path will not avoid teleports. Check this example out: -<div style='width:200px;'> -<? echo $tpmap; ?> + +<div id="tut-2" class="hidden"> + <h2>Teleports:</h2> + <table class="padded"> + <tr> + <td>Teleport 1:</td> + <td class='grid_td_tp1_in' ></td> + <td class='grid_td_tp1_out' ></td> + </tr> + <tr> + <td>Teleport 2:</td> + <td class='grid_td_tp2_in' ></td> + <td class='grid_td_tp2_out' ></td> + </tr> + </table> + <p> + <br />Teleport tiles are traps. When the path goes across the "IN" tile, it gets thrown to the "OUT" tile. + <br />The path will not avoid teleports. Check this example out: + <div style='width:200px;'> + <? echo $tpmap; ?> + </div> + <br /> + <br /> + Implementing a teleport into your maze can have a big impact. + </p> + + <br /><p>That should be enough information to get you started. + <br />Now <a href='?page=home'>go try it out!</a> + </p> + <a href="javascript:showTutorial(1)" class="next">Back</a> </div> -<br /> -<br /> -Implementing a teleport into your maze can have a big impact. -</p> - -<br /><p>That should be enough information to get you started. -<br />Now <a href='?page=home'>go try it out!</a> -<br /></p> -<br /> -<br /> -<br /> - -</body> -</html> + +</div> + +<script> +function showTutorial(type) { + for (var i = 0; i < 3; i++) { + var elem = document.getElementById("tut-" + i); + if (elem.className.indexOf('hidden') < 0) + elem.className += 'hidden'; + } + var elem = document.getElementById("tut-" + type); + elem.className = elem.className.replace('hidden', ''); +} +showTutorial(0); +</script> + +<?php +htmlFooter(); +?> |