devdave/app.js Secret

## app.js

/**
 *Manager class for handling both the game map And the viewable window area.
 */
function GameMap(windowId, mapId,  h, w){

    //The game map itself
    this.ctx = document.getElementById(windowId).getContext("2d");
    //The viewable window area
    this.window = document.getElementById(mapId).getContext("2d");

    //*MX is short hand for Maximum X or Y value
    //Max X & Y for the view window
    this.wMX = this.window.canvas.height;
    this.wMY = this.window.canvas.width;

    //canvas max dimensions
    this.cMX = this.ctx.canvas.height
    this.cMY = this.ctx.canvas.width

    //map max dimensiosn, 10x10 grid

    //Game map maximum dimensions
    this.mMX = h || 50;
    this.mMY = w || 50;

    //Ratio difference between the map and the window
    this.ratioX = this.cMX / this.wMX;
    this.ratioY = this.cMY / this.wMY;

    //roomSize
    this.rMX = 5;
    this.rMY = 5;
    //The game map, a 3d array of anonymous objects
    this.grid = new Array();

    this.player = {x:4, y:4};
    this.generateMap();
    this.render();
}

GameMap.prototype.drawRoom = function(x, y, h, w, style){
    this.ctx.save();
    this.ctx.fillStyle = style || "#0000FF";
    this.ctx.fillRect(x, y, h * .7 , w * .7 );
    this.ctx.restore();
}

GameMap.prototype.generateMap = function(){
    /**
     *Generates Map X * Y anonymous objects that represent rooms, adding a unique Id to each room
     *
     */
    var roomId = 0;
    for(var x = 0; x < this.mMX; x++){
        for(var y = 0; y < this.mMY; y++){
            if(typeof this.grid[x] == "undefined"){
                this.grid[x] = new Array();
            }
            this.grid[x].push({id:roomId, "x":x, "y":y, text:"Empty", allowed:true});
            roomId++
        }
    }
}

GameMap.prototype.render = function(){
    this.ctx.fillRect(0,0, this.cMX, this.cMY);
    var RMX = this.mMX / this.rMX;
    var RMY = this.mMX / this.rMY;
    for(var x = 0; x < this.grid.length; x++){
        for(var y = 0; y < this.grid[x].length; y++){
            var tX = RMX * x + 50;
            var tY = RMY * y + 50;
            var playerPresent = (this.player.x == x) && (this.player.y == y)

            if(playerPresent){
                style = "#FF0000";
            }
            else if(x % 2 == 0){
                if(x < (this.grid.length / 2) ){
                    style = "#44FF44";
                }
                else{
                    style = "#44FF44";
                }

            }
            else if(y % 2 == 0){
                if( y < (this.grid[x].length / 2 ) ){
                    style = "#0000FF";
                }
                else{
                    style = "#4444FF";
                }

            }
            else{
                style = "#000000";
            }

            this.drawRoom(tX-1, tY+-1, 14, 14 , style );
        }
    }


    var oX = this.player.x * (this.mMX / this.rMX);
    var oY = this.player.y * (this.mMX / this.rMY);

    var halfX = ( this.wMX / 2 );
    var halfY = ( this.wMY / 2 );

    var startX = Math.max(0, oX - halfX);
    var startY = Math.max(0, oY - halfY);

    var endX = Math.max(startX + this.wMX);
    var endY = Math.max(startY + this.wMY);

    var buffer = this.ctx.getImageData(startX, startY, endX, endY);
    this.window.putImageData(buffer, 0, 0);

}

GameMap.prototype.moveNorth =
    function(){
        if(this.player.y > 0){
            this.player.y -= 1;
        }
        this.render();
    }

GameMap.prototype.moveSouth =
    function(){
        if(this.player.y < (this.mMY - 1)){
            this.player.y += 1;
        }
        this.render();
    }

GameMap.prototype.moveWest =
    function(){
        if(this.player.x > 0){
            this.player.x -= 1;
        }
        this.render();
    }

GameMap.prototype.moveEast =
    function(){
        if(this.player.x < (this.mMX - 1) ){
            this.player.x += 1;
        }
        this.render();
    }


## index.html

/**
 *Manager class for handling both the game map And the viewable window area.
 */
function GameMap(windowId, mapId,  h, w){

    //The game map itself
    this.ctx = document.getElementById(windowId).getContext("2d");
    //The viewable window area
    this.window = document.getElementById(mapId).getContext("2d");

    //*MX is short hand for Maximum X or Y value
    //Max X & Y for the view window
    this.wMX = this.window.canvas.height;
    this.wMY = this.window.canvas.width;

    //canvas max dimensions
    this.cMX = this.ctx.canvas.height
    this.cMY = this.ctx.canvas.width

    //map max dimensiosn, 10x10 grid

    //Game map maximum dimensions
    this.mMX = h || 50;
    this.mMY = w || 50;

    //Ratio difference between the map and the window
    this.ratioX = this.cMX / this.wMX;
    this.ratioY = this.cMY / this.wMY;

    //roomSize
    this.rMX = 5;
    this.rMY = 5;
    //The game map, a 3d array of anonymous objects
    this.grid = new Array();

    this.player = {x:4, y:4};
    this.generateMap();
    this.render();
}

GameMap.prototype.drawRoom = function(x, y, h, w, style){
    this.ctx.save();
    this.ctx.fillStyle = style || "#0000FF";
    this.ctx.fillRect(x, y, h * .7 , w * .7 );
    this.ctx.restore();
}

GameMap.prototype.generateMap = function(){
    /**
     *Generates Map X * Y anonymous objects that represent rooms, adding a unique Id to each room
     *
     */
    var roomId = 0;
    for(var x = 0; x < this.mMX; x++){
        for(var y = 0; y < this.mMY; y++){
            if(typeof this.grid[x] == "undefined"){
                this.grid[x] = new Array();
            }
            this.grid[x].push({id:roomId, "x":x, "y":y, text:"Empty", allowed:true});
            roomId++
        }
    }
}

GameMap.prototype.render = function(){
    this.ctx.fillRect(0,0, this.cMX, this.cMY);
    var RMX = this.mMX / this.rMX;
    var RMY = this.mMX / this.rMY;
    for(var x = 0; x < this.grid.length; x++){
        for(var y = 0; y < this.grid[x].length; y++){
            var tX = RMX * x + 50;
            var tY = RMY * y + 50;
            var playerPresent = (this.player.x == x) && (this.player.y == y)

            if(playerPresent){
                style = "#FF0000";
            }
            else if(x % 2 == 0){
                if(x < (this.grid.length / 2) ){
                    style = "#44FF44";
                }
                else{
                    style = "#44FF44";
                }

            }
            else if(y % 2 == 0){
                if( y < (this.grid[x].length / 2 ) ){
                    style = "#0000FF";
                }
                else{
                    style = "#4444FF";
                }

            }
            else{
                style = "#000000";
            }

            this.drawRoom(tX-1, tY+-1, 14, 14 , style );
        }
    }


    var oX = this.player.x * (this.mMX / this.rMX);
    var oY = this.player.y * (this.mMX / this.rMY);

    var halfX = ( this.wMX / 2 );
    var halfY = ( this.wMY / 2 );

    var startX = Math.max(0, oX - halfX);
    var startY = Math.max(0, oY - halfY);

    var endX = Math.max(startX + this.wMX);
    var endY = Math.max(startY + this.wMY);

    var buffer = this.ctx.getImageData(startX, startY, endX, endY);
    this.window.putImageData(buffer, 0, 0);

}

GameMap.prototype.moveNorth =
    function(){
        if(this.player.y > 0){
            this.player.y -= 1;
        }
        this.render();
    }

GameMap.prototype.moveSouth =
    function(){
        if(this.player.y < (this.mMY - 1)){
            this.player.y += 1;
        }
        this.render();
    }

GameMap.prototype.moveWest =
    function(){
        if(this.player.x > 0){
            this.player.x -= 1;
        }
        this.render();
    }

GameMap.prototype.moveEast =
    function(){
        if(this.player.x < (this.mMX - 1) ){
            this.player.x += 1;
        }
        this.render();
    }

	/**
	*Manager class for handling both the game map And the viewable window area.
	*/
	function GameMap(windowId, mapId, h, w){

	//The game map itself
	this.ctx = document.getElementById(windowId).getContext("2d");
	//The viewable window area
	this.window = document.getElementById(mapId).getContext("2d");

	//*MX is short hand for Maximum X or Y value
	//Max X & Y for the view window
	this.wMX = this.window.canvas.height;
	this.wMY = this.window.canvas.width;

	//canvas max dimensions
	this.cMX = this.ctx.canvas.height
	this.cMY = this.ctx.canvas.width

	//map max dimensiosn, 10x10 grid

	//Game map maximum dimensions
	this.mMX = h \|\| 50;
	this.mMY = w \|\| 50;

	//Ratio difference between the map and the window
	this.ratioX = this.cMX / this.wMX;
	this.ratioY = this.cMY / this.wMY;

	//roomSize
	this.rMX = 5;
	this.rMY = 5;
	//The game map, a 3d array of anonymous objects
	this.grid = new Array();

	this.player = {x:4, y:4};
	this.generateMap();
	this.render();
	}

	GameMap.prototype.drawRoom = function(x, y, h, w, style){
	this.ctx.save();
	this.ctx.fillStyle = style \|\| "#0000FF";
	this.ctx.fillRect(x, y, h * .7 , w * .7 );
	this.ctx.restore();
	}

	GameMap.prototype.generateMap = function(){
	/**
	Generates Map X Y anonymous objects that represent rooms, adding a unique Id to each room
	*
	*/
	var roomId = 0;
	for(var x = 0; x < this.mMX; x++){
	for(var y = 0; y < this.mMY; y++){
	if(typeof this.grid[x] == "undefined"){
	this.grid[x] = new Array();
	}
	this.grid[x].push({id:roomId, "x":x, "y":y, text:"Empty", allowed:true});
	roomId++
	}
	}
	}

	GameMap.prototype.render = function(){
	this.ctx.fillRect(0,0, this.cMX, this.cMY);
	var RMX = this.mMX / this.rMX;
	var RMY = this.mMX / this.rMY;
	for(var x = 0; x < this.grid.length; x++){
	for(var y = 0; y < this.grid[x].length; y++){
	var tX = RMX * x + 50;
	var tY = RMY * y + 50;
	var playerPresent = (this.player.x == x) && (this.player.y == y)

	if(playerPresent){
	style = "#FF0000";
	}
	else if(x % 2 == 0){
	if(x < (this.grid.length / 2) ){
	style = "#44FF44";
	}
	else{
	style = "#44FF44";
	}

	}
	else if(y % 2 == 0){
	if( y < (this.grid[x].length / 2 ) ){
	style = "#0000FF";
	}
	else{
	style = "#4444FF";
	}

	}
	else{
	style = "#000000";
	}

	this.drawRoom(tX-1, tY+-1, 14, 14 , style );
	}
	}


	var oX = this.player.x * (this.mMX / this.rMX);
	var oY = this.player.y * (this.mMX / this.rMY);

	var halfX = ( this.wMX / 2 );
	var halfY = ( this.wMY / 2 );

	var startX = Math.max(0, oX - halfX);
	var startY = Math.max(0, oY - halfY);

	var endX = Math.max(startX + this.wMX);
	var endY = Math.max(startY + this.wMY);

	var buffer = this.ctx.getImageData(startX, startY, endX, endY);
	this.window.putImageData(buffer, 0, 0);

	}

	GameMap.prototype.moveNorth =
	function(){
	if(this.player.y > 0){
	this.player.y -= 1;
	}
	this.render();
	}

	GameMap.prototype.moveSouth =
	function(){
	if(this.player.y < (this.mMY - 1)){
	this.player.y += 1;
	}
	this.render();
	}

	GameMap.prototype.moveWest =
	function(){
	if(this.player.x > 0){
	this.player.x -= 1;
	}
	this.render();
	}

	GameMap.prototype.moveEast =
	function(){
	if(this.player.x < (this.mMX - 1) ){
	this.player.x += 1;
	}
	this.render();
	}