From be0e0c0a105cbaca7ccf422c2afc308337e277c0 Mon Sep 17 00:00:00 2001 From: dale-bang Date: Sat, 6 Jun 2015 18:08:17 +1000 Subject: [PATCH] added static graphics --- index.html | 6 +-- main.css | 6 +-- main.js | 108 +++++++++++++++++++++++++++++++++++++++-------------- 3 files changed, 87 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 6e20697..0eaa509 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,9 @@
- - - + + +
diff --git a/main.css b/main.css index d7858cf..f755764 100644 --- a/main.css +++ b/main.css @@ -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 { diff --git a/main.js b/main.js index 6213924..cbc982c 100644 --- a/main.js +++ b/main.js @@ -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; @@ -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; @@ -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(); @@ -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), @@ -231,7 +285,7 @@ //Map functions init: function() { - curCellMap = this.generateRandomMap(0.05); + curCellMap = this.generateRandomMap(0.075); //curCellMap = this.generateTestMap(); nextCellMap = this.generateEmptyMap(); },