2012-03-21 00:48:31 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>LaserTank.js</title>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
2012-03-25 18:54:06 -04:00
|
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
2012-03-21 00:48:31 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2012-03-24 19:39:11 -04:00
|
|
|
<noscript>
|
|
|
|
|
<div id="noscript" class="dialog show">
|
|
|
|
|
<div class="body">
|
2012-03-24 21:03:07 -04:00
|
|
|
<div class="title">Please enable JavaScript</div>
|
2012-03-24 19:39:11 -04:00
|
|
|
<p>
|
|
|
|
|
<strong>Oops; it looks like JavaScript is not enabled.</strong> I do
|
|
|
|
|
applaud you for being a cautious user. Unfortunately, you aren't
|
|
|
|
|
going to get very far without it on this page.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
There is no need for concern here — <strong>this game is
|
|
|
|
|
<a href="http://www.gnu.org/philosophy/free-sw.html">free
|
|
|
|
|
software</a></strong>, so you can rest assured that we will have
|
|
|
|
|
full respect for your freedoms and your privacy. Should you wish to
|
|
|
|
|
take a gander before enabling JavaScript, you may find the full
|
|
|
|
|
source code on <a
|
|
|
|
|
href="https://gitorious.org/lasertank-js">Gitorious</a> (I encourage
|
|
|
|
|
you to take a look either way).
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Enjoy! (No, I'm sorry, you cannot close this dialog without enabling
|
|
|
|
|
JavaScript; too many people would simply close it without reading
|
|
|
|
|
this message. Should you be so inclined, feel free to inspect the
|
|
|
|
|
<tt><noscript></tt> element on this page and remove it.)
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</noscript>
|
|
|
|
|
|
2012-03-21 22:44:44 -04:00
|
|
|
<div id="game" class="game opening">
|
2012-03-24 23:54:00 -04:00
|
|
|
<div class="title">LaserTank.js</div>
|
2012-03-25 00:05:33 -04:00
|
|
|
<ul id="menubar" class="menu">
|
|
|
|
|
<li>
|
|
|
|
|
<a id="mnu_help" href="#help">Game</a>
|
|
|
|
|
<ul id="help">
|
|
|
|
|
<li>Nothing to see here</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a id="mnu_help" href="#help">Move</a>
|
|
|
|
|
<ul id="help">
|
|
|
|
|
<li>Nothing to see here</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a id="mnu_help" href="#help">Options</a>
|
|
|
|
|
<ul id="help">
|
|
|
|
|
<li>Nothing to see here</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a id="mnu_help" href="#help">Editor</a>
|
|
|
|
|
<ul id="help">
|
|
|
|
|
<li>Nothing to see here</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a id="mnu_help" href="#help">Help</a>
|
|
|
|
|
<ul id="help">
|
|
|
|
|
<li><a href="#todo">TODO List</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
2012-03-21 21:51:47 -04:00
|
|
|
|
2012-03-25 00:05:33 -04:00
|
|
|
<div class="container">
|
2012-03-24 23:54:00 -04:00
|
|
|
<img id="opening" class="opening" src="images/opening.gif" />
|
|
|
|
|
<canvas id="render" width="512" height="512">
|
|
|
|
|
Your web browser does not support the canvas element.
|
|
|
|
|
</canvas>
|
2012-03-21 23:22:53 -04:00
|
|
|
|
2012-03-24 23:54:00 -04:00
|
|
|
<div class="hud">
|
|
|
|
|
|
|
|
|
|
</div>
|
2012-03-21 00:48:31 -04:00
|
|
|
|
2012-03-24 23:54:00 -04:00
|
|
|
<div class="control">
|
|
|
|
|
<button id="undo" class="gapl" disabled>Undo</button>
|
|
|
|
|
<button id="hint" class="gapr" disabled>Hint</button>
|
|
|
|
|
<button id="savepos" class="full" disabled>Save Position</button>
|
|
|
|
|
<button id="restpos" class="full" disabled>Restore Position</button>
|
|
|
|
|
<button id="new" class="gapl">New</button>
|
|
|
|
|
<button id="restart" class="gapr" disabled>Restart</button>
|
|
|
|
|
<button id="loadlvl" class="full">Load Level</button>
|
|
|
|
|
<button id="prevlvl" class="gapl"><< Lvl</button>
|
|
|
|
|
<button id="nextlvl" class="gapr">Lvl >></button>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
2012-03-21 23:22:53 -04:00
|
|
|
|
2012-03-24 23:54:00 -04:00
|
|
|
<div class="load">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Load LTG and LVL</legend>
|
|
|
|
|
<p>This section is temporary and is used during development.</p>
|
2012-03-21 00:48:31 -04:00
|
|
|
|
2012-03-24 23:54:00 -04:00
|
|
|
<input type="file" id="ltg" />
|
|
|
|
|
<input type="file" id="lvl" />
|
|
|
|
|
</fieldset>
|
|
|
|
|
</div>
|
2012-03-21 00:48:31 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
Initial menu concept
One of the only remaining portions of the UI at this point (disregarding missing
functionality) was the menu bar. At this point, I had to make a number of
choices, among them:
- Do I mimic the original Windows UI, or provide a more native experience?
- Do I support pre-{CSS3,ES5,HTML5} environments, or take advantage of each?
The menu bar in this commit has the boxy style of the classic Windows theme --
not because I like it, but because it is representative of the original game,
which was available only for that operating system. The same style is applied to
the color of the "window" div in which the game is contained, as well as any
dialogs. However, the buttons displayed on the screen are in the style native to
the user's environment. With Gecko and Webkit offering the ability to style
elements (including menu bars, etc) in a way that looks native[1], the question
naturally arises -- do we provide more of a native port look, or a true clone
look? Should the latter be the case, it may be more appropriate to style the
buttons as boxes.
The next decision was whether or not to support environments that do not provide
many of the common CSS3, ES5 and HTML5 features. Initially, the project wished
to use CSS sprites in order to support older browsers, however with the move to
the canvas element, it seems unnecessary to provide such compatibility. Consider
also the push by organizations like Mozilla and Google to automatically upgrade
users' browsers, helping to ensure they have the newest available features. Also
consider that supporting older environments only discourages users to upgrade,
feeding the challenges that web developers already face in creating
cross-browser software. With all of that, the decision was made to simply use
the features provided by ECMAScript 5, CSS3 and HTML5, using browser extensions
where necessary (for unstandardized features, e.g. -prefix-foo in CSS).
It is rare that I get to work intimately with these newer features, as I find
myself most often having to maintain compatibility with older environments. This
will be an exciting chance to be able to explore these features and to showcase
them for others who wish to see them used in a complete piece of software. That
said, LaserTank is a fairly old game and, as such, is unlikely to take advantage
of features like CSS transitions (animations are handled by timers and rendered
to the canvas and there is not much else to transition), as that would take away
from the retro feel of the original game.
With the menu implementation, I attempted to limit myself to CSS as much as
possible in order to reduce the amount of code that had to be written for the
display of the menus and dialogs. The menus display using the :hover selector
and the dialogs with the new :target selector. JavaScript is used to to register
click events on the menu so that moving the mouse to another menu item will have
it automatically displayed, keeping each of the menus hidden until a click.
JavaScript is also used to determine when the menu should be hidden on mouseout.
The menu does not function exactly like the menu in Windows, but it will be
functional for now. I would like to worry about such issues after the bulk of
the game logic has been developed.
This commit's implementation is conceptual; it will be refactored shortly.
[1] https://developer.mozilla.org/en/CSS/-moz-appearance
2012-03-24 19:13:12 -04:00
|
|
|
<div id="todo" class="dialog">
|
|
|
|
|
<div class="body">
|
2012-03-24 21:03:07 -04:00
|
|
|
<div class="title">TODO</div>
|
Initial menu concept
One of the only remaining portions of the UI at this point (disregarding missing
functionality) was the menu bar. At this point, I had to make a number of
choices, among them:
- Do I mimic the original Windows UI, or provide a more native experience?
- Do I support pre-{CSS3,ES5,HTML5} environments, or take advantage of each?
The menu bar in this commit has the boxy style of the classic Windows theme --
not because I like it, but because it is representative of the original game,
which was available only for that operating system. The same style is applied to
the color of the "window" div in which the game is contained, as well as any
dialogs. However, the buttons displayed on the screen are in the style native to
the user's environment. With Gecko and Webkit offering the ability to style
elements (including menu bars, etc) in a way that looks native[1], the question
naturally arises -- do we provide more of a native port look, or a true clone
look? Should the latter be the case, it may be more appropriate to style the
buttons as boxes.
The next decision was whether or not to support environments that do not provide
many of the common CSS3, ES5 and HTML5 features. Initially, the project wished
to use CSS sprites in order to support older browsers, however with the move to
the canvas element, it seems unnecessary to provide such compatibility. Consider
also the push by organizations like Mozilla and Google to automatically upgrade
users' browsers, helping to ensure they have the newest available features. Also
consider that supporting older environments only discourages users to upgrade,
feeding the challenges that web developers already face in creating
cross-browser software. With all of that, the decision was made to simply use
the features provided by ECMAScript 5, CSS3 and HTML5, using browser extensions
where necessary (for unstandardized features, e.g. -prefix-foo in CSS).
It is rare that I get to work intimately with these newer features, as I find
myself most often having to maintain compatibility with older environments. This
will be an exciting chance to be able to explore these features and to showcase
them for others who wish to see them used in a complete piece of software. That
said, LaserTank is a fairly old game and, as such, is unlikely to take advantage
of features like CSS transitions (animations are handled by timers and rendered
to the canvas and there is not much else to transition), as that would take away
from the retro feel of the original game.
With the menu implementation, I attempted to limit myself to CSS as much as
possible in order to reduce the amount of code that had to be written for the
display of the menus and dialogs. The menus display using the :hover selector
and the dialogs with the new :target selector. JavaScript is used to to register
click events on the menu so that moving the mouse to another menu item will have
it automatically displayed, keeping each of the menus hidden until a click.
JavaScript is also used to determine when the menu should be hidden on mouseout.
The menu does not function exactly like the menu in Windows, but it will be
functional for now. I would like to worry about such issues after the bulk of
the game logic has been developed.
This commit's implementation is conceptual; it will be refactored shortly.
[1] https://developer.mozilla.org/en/CSS/-moz-appearance
2012-03-24 19:13:12 -04:00
|
|
|
<p>...quite a bit. </p>
|
|
|
|
|
<p>
|
|
|
|
|
This dialog will ultimately contain a useful TODO list. As it stands,
|
|
|
|
|
LTG and LVL file loading is complete, but no game logic has been
|
|
|
|
|
implemented.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<a href="#" class="close button">Close</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2012-03-21 00:48:31 -04:00
|
|
|
<!-- these will be concatenated and minified at some point -->
|
|
|
|
|
<script src="scripts/ease.min.js"></script>
|
|
|
|
|
<script src="scripts/main.js"></script>
|
|
|
|
|
<script src="lib/TileDfn.js"></script>
|
|
|
|
|
<script src="lib/ClassicTileDfn.js"></script>
|
|
|
|
|
<script src="lib/LtgLoader.js"></script>
|
|
|
|
|
<script src="lib/TileMasker.js"></script>
|
|
|
|
|
<script src="lib/MapSet.js"></script>
|
|
|
|
|
<script src="lib/Map.js"></script>
|
|
|
|
|
<script src="lib/ClassicMap.js"></script>
|
|
|
|
|
<script src="lib/MapRender.js"></script>
|
|
|
|
|
<script src="lib/FileLoader.js"></script>
|
2012-03-27 21:34:33 -04:00
|
|
|
<script src="lib/Game.js"></script>
|
|
|
|
|
<script src="lib/ClassicGame.js"></script>
|
2012-03-24 23:09:20 -04:00
|
|
|
<script src="lib/ui/MenuBar.js"></script>
|
2012-03-21 00:48:31 -04:00
|
|
|
<script src="scripts/game.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|