This leaves issues that involve actual logic changes unresolved. It also
raises an issue with the `Map` class, which is defined in ES6, and so will
have to be renamed.
This does something that could not be done trivally back when this project
started: concatenate all files, which are written as CommonJS modules. I
had to write custom code to do this with other projects; Browserify was but
an infant back in the day, and I remember SubStack talking about it on
freenode.
Rendering now relies on hooking MapState, which represents the current state of
the map, raising events as various game objects change position or state.
This is a simple proof-of-concept---the tank moves, but only upward, and the
tile redraw does need work. There is no collision detection.
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
This implementation is likely to change, but it does an excellent job bringing
the map to life. The only frustrating part is that the game looks playable,
but is not.
This will both make it easy to reset an animation and help to display
the first tile (when animations are disabled or for display tiles for
the editor)
The next major step for the clone is the loading and parsing of LVL files
(maps). This is especially imporant for the purpose of ensuring that users can
continue to use the maps the know and love (and possibly created themselves),
rather than having to recreate them in the clone.
The maps are concatenated into a single fixed-width file and loaded (in the
original sources) into the TLEVEL struct (LTANK.H). The main thing to note about
this data is the manner in which the object data (the playfield) is stored. The
TPLAYFIELD type (defined as a 16x16 multidimensional signed char array) is
formatted as [x][y], meaning that it is an array of *columns*, not rows. While
at first confusing, this does not complicate matters any.
This commit adds initial rendering support for the playfield via MapRender and
is demonstrated in the same demo file as LtgLoader. After loading a tile set,
the user can load an LVL file. The rendering is done using two canvas elements,
the second of which is created by MapRender itself and overlayed atop of the
original canvas. Unmasked tiles are rendered to the bottom canvas and masked
tiles to the upper, allowing us to move game objects without having to redraw
underlying tiles. This is also necessary as the context putImageData() method
overwrites any existing data rather than leaving values corresponding to the
transparent pixels in tact.
This commit also added support for tunnel coloring - each set of tunnels has its
own distinct color. The color values were taken from ColorList in LTANK2.C in
the original sources rather than using CSS color names (e.g. 'red', 'blue',
'magenta') because different environments may assign slightly different colors
to those values (as an example, FireFox does not use #00FF00 for 'green').
Tunnels themselves are identified by a bitmask (0x40), so we can get the tunnel
id by XORing with that mask. The ids are incremented by two in the LVL data
(e.g. 0x40 for index 1, 0x42 for index 2), so we can then divide by two and take
that index in the color array. This color is used to fill the tile with a solid
color in the lower canvas. We can then paint the tile on the upper canvas, which
will allow the color of the lower canvas to peek through the transparent pixels.
Animation support has not yet been added (but animations are still visible in
the demo to the left of the map rendering). This is an exciting start, as we can
clearly see what the game will look like in the browser. This commit also does
not cover any additional level metadata (e.g. author, difficulty, hints); that
will be addressed in future commits and added to the demo.
Mike Gerwitz
Mike Gerwitz