Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.