Fantastic article …
Just a reminder that code academy is an excellent free resource for anyone starting out in the web development industry
I come from the age when text adventures were serious fun, ZORK and Hitchhikers guide to the galaxy were two of my favourite text adventures. OK so maybe the golden age of the text adventure is still stuck in the 1980’s but I still remember those glory days. So the game I am building is certainly not up there in the same territory as ZORK but I hope you can see the sort of cool things you can do with Js/Jquery and HTML 5.
The game is pretty simple use the N,S,E and W to move around the dungeon and a few other useful commands. Search for the Dragon and if you have the right weapon and equipment you may be able to kill it. If you use a mobile browser you should see some buttons that make life a little easier than using a little virtual keyboard.
Here is the game : http://domssite.com/search/
Who is this for
How to use the tutorial
Its not an ordinary tutorial so you need to accept that first. Its based on reading and understanding code and code comments. I have used heaps of comments throughout the code to explain whats going on. There’s a lot of Arrays, so you’ll see lots of code using arrays and its not a bad starting place for working with js structures. The whole tutorial is 1 single file – whilst a single large file is not the best way to build large web apps – its not a bad approach showing everything in one file.
The first part of the puzzle : the HTML
<!--Text Adventure : Search for the Dragon --> <!--***************************************** Text Adventure - A JS/JQuery/HTML5 Tutorial by comments The game : Standard Text Aventure where you can move from room to room, collecting items and killing monsters Goal is to get to the final room of the dungeon and kill the dragon Start in room 1 Monsters dont move Monsters can be killed by certain weapons Should work in both mobile and non-mobile browsers History : 0.1 Initial version before Hilary's comments/advice ***************************************** --> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Search</title> <script src="Scripts/jquery-1.7.1.min.js"></script> <link href="Content/Site.css" rel="stylesheet" /> </head> <body> <div class="content"> <style> </style> <div id="screenContainer"> <div id="display"> <div id="input"> <form> <!--Screen Title--> <h1>Search... </h1> <!--Screen Sub-Title--> <h3>For a Dragon...Text Adventure Game by @DungeonBard </h3> <div id="GameOverDiv"> </div> <div id="GameDiv"> <!--The following div is hidden or shown depending on if its a non-mobile browser--> <div id="Keyboard"> <label>Command:</label> <input type="text" name="userInput" class="buttonMod" id="userInput" /> </div> <!--The following div is hidden or shown depending on if its a mobile browser--> <div id="controllers"> <!--We use a table for the simple alignment of the buttons--> <table> <tr> <td></td> <td> <input type='button' class='button' value='N' title="North" style="left: 200px" /></td> <td></td> </tr> <tr> <td> <input type='button' class='button' value='W' title="West" /></td> <td></td> <td> <input type='button' class='button' value='E' title="East" /></td> </tr> <tr> <td></td> <td> <input type='button' class='button' value='S' title="South" /></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td> <input type='button' class='button' value='P' title="Pickup" /></td> <td> <input type='button' class='button' value='A' title="About" /></td> <td> <input type='button' class='button' value='?' title="Help" /></td> </tr> </table> </div> </div> <div id="output"></div> </form> </div> </div> </div> </body> </html>
Are the bugs
Yep – Totally , lots that the point – we’ll start cleaning them up in the next version
I’ll add in a series of improvements in version 2 of this game.
Source Control link
Just doing some reviews this is the first game i have come across by slash and its seriously cool – great old school rogue-like with very cool IRC feature where I got to chat with the dev – SLASH. Its an excellent game with classic rogue-like features and cool shading effects!!! Also for HTML/JS people this is a great example of what you can do (also includes Websockets – SLASH told me).
Not sure how many I’ll get to but this was a great start.
Cool game http://slashware.net/rodney/
Free html5 and js resources