Canvas windowing system
/** | |
*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(); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment