Create a gist now

Instantly share code, notes, and snippets.

@devdave /app.js Secret
Created Sep 24, 2011

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