-
-
Save devdave/a17216d5b1db068ab41b to your computer and use it in GitHub Desktop.
Canvas windowing system
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
*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(); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
*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