mikegerwitz
/
lasertank-js
1
0
Fork 0
Code Releases Activity

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.
master
Mike Gerwitz 2012-03-21 00:48:31 -04:00
parent fe2dbcac19
commit 9465af62cb
6 changed files with 266 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/dirt.gif 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 989 B

BIN
images/hud.bmp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

41
index.html 100644
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>LaserTank.js</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="game">
<canvas id="render" width="512" height="512">
Your web browser does not support the canvas element.
</canvas>
<div class="hud">
&nbsp;
</div>
<div class="load">
<fieldset>
<legend>Load LTG and LVL</legend>
<p>This section is temporary and is used during development.</p>
<input type="file" id="ltg" />
<input type="file" id="lvl" />
</fieldset>
</div>
</div>
<!-- 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>
<script src="scripts/game.js"></script>
</body>
</html>

120
lib/FileLoader.js 100644
View File

@ -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 <http://www.gnu.org/licenses/>.
*
*
* 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 ] );
}
} );

69
scripts/game.js 100644
View File

@ -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 <http://www.gnu.org/licenses/>.
*/
( 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 ) );
}
} )();

36
style.css 100644
View File

@ -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 );
}