Skip to content

Commit

Permalink
added static graphics
Browse files Browse the repository at this point in the history
  • Loading branch information
@dale-bang
dale-bang committed Jun 6, 2015
1 parent d7308f4 commit be0e0c0
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 33 deletions.
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<body>

<div class="game-container">
<canvas id="CellLayer" width="800" height="600"></canvas>
<canvas id="MouseLayer" width="800" height="600"></canvas>
<canvas id="StaticLayer" width="800" height="600"></canvas>
<canvas id="CellLayer" width="1250" height="700"></canvas>
<canvas id="MouseLayer" width="1250" height="700"></canvas>
<canvas id="StaticLayer" width="1250" height="700"></canvas>
</div>

<script src="main.js"></script>
Expand Down
6 changes: 3 additions & 3 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ html, body {
height:100%;
padding:0;
margin:0;
background: #000;
}

.game-container {
width:800px;
height:600px;
width:1250px;
height:700px;
margin:0 auto;
position: relative;
top:50%;
transform: translateY(-50%);
position: relative;
border: 1px solid #eee;
}

.game-container canvas {
Expand Down
108 changes: 81 additions & 27 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
this.mouseLayer.ctx.translate(OFF_X, 0);
this.staticLayer.ctx.translate(OFF_X, 0);

this.cellAliveColour = this.generateColourPallete(53, 179, 32);
this.cellAliveColour = this.generateColourPallete(38, 199, 145);

//Calculate dimensions of side, width and height of cell (relative to isometric view)
this.cellDimensions.height = utilities.twoDToIso(1*TILE_W, 1*TILE_W).y - utilities.twoDToIso(0, 0).y;
Expand All @@ -67,31 +67,10 @@
},

drawStaticLayer: function() {
this.drawGrid();
this.drawBase();
//this.drawGrid();
},

drawGrid: function() {

//Vertical lines
for(var x = 0; x <= COLS; x++) {
var start = utilities.twoDToIso(x*TILE_W, 0),
end = utilities.twoDToIso(x*TILE_W, MAP_H);
canvas.layers[2].ctx.moveTo(start.x, start.y);
canvas.layers[2].ctx.lineTo(end.x, end.y);
}

//Horizontal lines
for(var y = 0; y <= ROWS; y++) {
var start = utilities.twoDToIso(0, y*TILE_W),
end = utilities.twoDToIso(MAP_W, y*TILE_W);
canvas.layers[2].ctx.moveTo(start.x, start.y);
canvas.layers[2].ctx.lineTo(end.x, end.y);
}

utilities.setStroke(this.gridStroke, 2);

},

drawCellMap: function() {
//this.drawCell(3,3);
//return;
Expand Down Expand Up @@ -162,8 +141,8 @@
midRight = {
x: btmRight.x,
y: btmRight.y - this.cellDimensions.height
}

};
//Draw left face
utilities.setFill(this.cellAliveColour.dark, 0);
this.cellLayer.ctx.beginPath();
Expand Down Expand Up @@ -196,6 +175,81 @@

},

drawGrid: function() {

//Vertical lines
for(var x = 0; x <= COLS; x++) {
var start = utilities.twoDToIso(x*TILE_W, 0),
end = utilities.twoDToIso(x*TILE_W, MAP_H);
canvas.layers[2].ctx.moveTo(start.x, start.y);
canvas.layers[2].ctx.lineTo(end.x, end.y);
}

//Horizontal lines
for(var y = 0; y <= ROWS; y++) {
var start = utilities.twoDToIso(0, y*TILE_W),
end = utilities.twoDToIso(MAP_W, y*TILE_W);
canvas.layers[2].ctx.moveTo(start.x, start.y);
canvas.layers[2].ctx.lineTo(end.x, end.y);
}

utilities.setStroke(this.gridStroke, 2);

},

drawBase: function() {

var ground = this.generateColourPallete(51, 199, 38),
soil = this.generateColourPallete(173, 152, 33),
top = utilities.twoDToIso(0,0),
right = utilities.twoDToIso(COLS*TILE_W, 0),
btm = utilities.twoDToIso(COLS*TILE_W, ROWS*TILE_W),
left = utilities.twoDToIso(0, ROWS*TILE_W);


this.layers[2].ctx.lineWidth = 0;
//Draw the ground
utilities.setFill(ground.base, 2);
this.layers[2].ctx.beginPath();
this.layers[2].ctx.moveTo(top.x, top.y);
this.layers[2].ctx.lineTo(right.x, right.y);
this.layers[2].ctx.lineTo(btm.x, btm.y);
this.layers[2].ctx.lineTo(left.x, left.y);
this.layers[2].ctx.closePath();
this.layers[2].ctx.fill();

var faceHeight = 80;
var gradientLeft = this.layers[2].ctx.createLinearGradient(btm.x,btm.y,btm.x-5,btm.y+10);
gradientLeft.addColorStop(0,ground.dark);
gradientLeft.addColorStop(0.996,ground.dark);
gradientLeft.addColorStop(1,soil.dark);
var gradientRight = this.layers[2].ctx.createLinearGradient(btm.x,btm.y,btm.x+5,btm.y+10);
gradientRight.addColorStop(0,ground.light);
gradientRight.addColorStop(0.996,ground.light);
gradientRight.addColorStop(1,soil.light);

//Draw the left face
utilities.setFill(gradientLeft, 2);
this.layers[2].ctx.beginPath();
this.layers[2].ctx.moveTo(btm.x, btm.y);
this.layers[2].ctx.lineTo(btm.x, btm.y + faceHeight);
this.layers[2].ctx.lineTo(left.x, left.y + faceHeight);
this.layers[2].ctx.lineTo(left.x, left.y);
this.layers[2].ctx.closePath();
this.layers[2].ctx.fill();

//Draw the right face
utilities.setFill(gradientRight, 2);
this.layers[2].ctx.beginPath();
this.layers[2].ctx.moveTo(btm.x, btm.y);
this.layers[2].ctx.lineTo(btm.x, btm.y + faceHeight);
this.layers[2].ctx.lineTo(right.x, right.y + faceHeight);
this.layers[2].ctx.lineTo(right.x, right.y);
this.layers[2].ctx.closePath();
this.layers[2].ctx.fill();

},

drawMouseState: function() {
//As the mouse coordinats are navigating isometric space, they need to first be converted to 2d
var twoDCoords = utilities.isoTo2d(mouse.mousePos.x, mouse.mousePos.y),
Expand Down Expand Up @@ -231,7 +285,7 @@

//Map functions
init: function() {
curCellMap = this.generateRandomMap(0.05);
curCellMap = this.generateRandomMap(0.075);
//curCellMap = this.generateTestMap();
nextCellMap = this.generateEmptyMap();
},
Expand Down

0 comments on commit be0e0c0

Please sign in to comment.