From 9465af62cb06176f401f8dbc7c50846af1bca4b8 Mon Sep 17 00:00:00 2001 From: Mike Gerwitz Date: Wed, 21 Mar 2012 00:48:31 -0400 Subject: [PATCH] Began adding index.html, which will hold the actual game This essentially is a simplified demo page, styled to begin looking like the actual game. --- images/dirt.gif | Bin 0 -> 989 bytes images/hud.bmp | Bin 0 -> 14164 bytes index.html | 41 ++++++++++++++++ lib/FileLoader.js | 120 ++++++++++++++++++++++++++++++++++++++++++++++ scripts/game.js | 69 ++++++++++++++++++++++++++ style.css | 36 ++++++++++++++ 6 files changed, 266 insertions(+) create mode 100644 images/dirt.gif create mode 100644 images/hud.bmp create mode 100644 index.html create mode 100644 lib/FileLoader.js create mode 100644 scripts/game.js create mode 100644 style.css diff --git a/images/dirt.gif b/images/dirt.gif new file mode 100644 index 0000000000000000000000000000000000000000..c71f2fec1fc2490a5e5ac39a812d08783b1df3bb GIT binary patch literal 989 zcmZ?wbhEHblwgoxxXu6qd0?Cert*NiJP^prV#vzMTD58wSji|c8UjN*1lFxv_ZH}b zw+wH=6p#k8fItW2El^%?;5fv<&LLwVaIle)om0-I!y(~N6EpuKX@iN67+HUa2;9-w zpmd~7O4`k(!eNP1i=4ThNXDm!4J^!3r=F~sl@-H|25R#d2=fc{9yG_c!nZ7Q6di>Db U=BBu6vsG93WVomEaxho}0H)M$%>V!Z literal 0 HcmV?d00001 diff --git a/images/hud.bmp b/images/hud.bmp new file mode 100644 index 0000000000000000000000000000000000000000..396ddb9d572d49730ada76472ff56ab9d75edc7d GIT binary patch literal 14164 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..ae2f46b --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + LaserTank.js + + + +
+ + Your web browser does not support the canvas element. + +
+   +
+ +
+
+ Load LTG and LVL +

This section is temporary and is used during development.

+ + + +
+
+
+ + + + + + + + + + + + + + + + diff --git a/lib/FileLoader.js b/lib/FileLoader.js new file mode 100644 index 0000000..2c47119 --- /dev/null +++ b/lib/FileLoader.js @@ -0,0 +1,120 @@ +/** + * Loads a file from disk and returns a binary string + * + * Copyright (C) 2012 Mike Gerwitz + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + * + * The file uses a number of features introduced in the HTML5 and ECMAScript + * specs, as it depends on FileReader. + */ + + +/** + * Load file into memory as binary string from a given file element + * + * This class handles the loading of only a single file (as that is all this + * project requires). + */ +ltjs.FileLoader = Class( 'FileLoader', +{ + /** + * DOM file element to watch + * @type {HTMLInputElement} + */ + 'private _element': null, + + /** + * Callback to call on file load + * @type {function(Error,string)} + */ + 'private _callback': null, + + + /** + * Initialize file loader, monitoring the given file element + * + * @param {HtmlInputElement} element file element to monitor + */ + __construct: function( element ) + { + if ( element.type !== 'file' ) + { + throw TypeError( 'Expected file element, given ' + element.type ); + } + + this._element = element; + }, + + + /** + * Bind callback to file load event + * + * The given callback will be called when the file is loaded. It must accept + * two arguments: the first will be used to indicate an error (otherwise + * null) and the second argument will contain the binary string of data + * (unless an error occurred, in which case it will be undefined). + * + * @param {function(Error,string)} callback file load callback + * + * @return {FileLoader} self + */ + 'public onLoad': function( callback ) + { + this._callback = callback; + + // we do not want to monitor the change event until *after* a callback + // is registered (it is otherwise pointless) + this._element.addEventListener( 'change', this._loadFile.bind( this ) ); + + // attempt to load file immediately (in case a file has already been + // selected) + this._loadFile( { target: this._element } ); + + return this; + }, + + + /** + * Process file and invokes callback with result + * + * Called on filename change. + * + * @param {Object} event change event + * + * @return {undefined} + */ + 'private _loadFile': function( event ) + { + var _self = this, + files = event.target.files; + + if ( files.length === 0 ) return; + + var reader = new FileReader(); + reader.onload = function( revent ) + { + _self._callback.call( this.__inst, null, revent.target.result ); + }; + reader.onerror = function( e ) + { + _self._callback.call( this.__inst, e ); + }; + + // load file + reader.readAsBinaryString( files[ 0 ] ); + } +} ); + diff --git a/scripts/game.js b/scripts/game.js new file mode 100644 index 0000000..fb6458d --- /dev/null +++ b/scripts/game.js @@ -0,0 +1,69 @@ +/** + * Game initialization script + * + * Copyright (C) 2012 Mike Gerwitz + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +( function() +{ + +var load_ltg = ltjs.FileLoader( document.getElementById( 'ltg' ) ), + load_lvl = ltjs.FileLoader( document.getElementById( 'lvl' ) ), + + ctx = document.getElementById( 'render' ).getContext( '2d' ), + + ltg_loader = ltjs.LtgLoader(), + masker = ltjs.TileMasker( ltjs.ClassicTileDfn() ), + tile_set = null, + map_set = null, + render = null; + +load_ltg.onLoad( function( e, data ) +{ + if ( e ) throw e; + + // get tile metadata + var meta = ltg_loader.fromString( data ); + + masker.getMaskedTiles( meta.tiles, meta.mask, function( tdata ) + { + tile_set = tdata; + gamechk(); + } ); +} ); + +load_lvl.onLoad( function( e, data ) +{ + if ( e ) throw e; + + map_set = ltjs.MapSet( data, ltjs.ClassicMap ); + + gamechk(); +} ); + +function gamechk() +{ + if ( !( tile_set && map_set ) ) return; + + // clear any existing locks before rendering (allowing the user to change + // tile sets and map sets) + render && render.freeCanvas(); + + render = ltjs.MapRender( ctx, tile_set ); + render.render( map_set.getMapByNumber( 1 ) ); +} + +} )(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..c361a91 --- /dev/null +++ b/style.css @@ -0,0 +1,36 @@ +/** stylesheet for lasertank-js **/ + +body { + background-image: url('images/dirt.gif'); +} + +.game { + position: relative; + + margin: 0px auto; + width: 696px; +} + +/* 16x16 board */ +.game canvas { + width: 512px; + height: 512px; + border: 2px inset gray; +} + +.game .hud { + position: absolute; + + background-image: url('images/hud.bmp'); + background-repeat: no-repeat; + + width: 180px; + height: 245px; + right: 0px; + top: 0px; +} + +/** temporary during development **/ +.load { + background-color: rgba( 255, 255, 255, 0.5 ); +}