diff --git a/assets/spritesheet2.png b/assets/spritesheet2.png new file mode 100644 index 0000000..5b8656d Binary files /dev/null and b/assets/spritesheet2.png differ diff --git a/entities/terrain.js b/entities/terrain.js index 1cdbc48..488570b 100644 --- a/entities/terrain.js +++ b/entities/terrain.js @@ -7,13 +7,18 @@ class Terrain { this.game = game; this.x = x; this.y = y; + this.x_span = this.x + params.blockSize; + this.y_span = this.y + params.blockSize*0.7; this.scale = 1; // track the midpoint of each terrain block for entity placement this.midX = params.blockSize/2 + this.x; this.midY = (params.blockSize*0.77)/2 + this.y; - this.spritesheet = "./assets/spritesheet_nature-blocks.png"; + this.spritesheet = "./assets/spritesheet2.png"; + + this.glow = false; + this.glow_x = 2653; }; @@ -53,9 +58,23 @@ class Terrain { draw(ctx) { ctx.drawImage(ASSET_MANAGER.getAsset(this.spritesheet), this.type, 0, params.blockSize, params.blockSize, this.x, this.y, params.blockSize, params.blockSize); + if (this.glow) { + ctx.drawImage(ASSET_MANAGER.getAsset(this.spritesheet), this.glow_x, 0, params.blockSize, params.blockSize, this.x, this.y, params.blockSize, params.blockSize); + } } update() { - + let mousePoint = this.game.mouse; + + if(this.game.mouse != null){ + + if (Math.abs(mousePoint.x - this.midX) < params.blockSize/3.5 && Math.abs(mousePoint.y - this.midY) < params.blockSize*0.7/3.5) { + console.log("{ mousePoint.x: " + mousePoint.x + ", mousePoint.y: " + mousePoint.y + ", { midX: " + this.midX + ", midY: " + this.midY + " }"); + console.log("x diff: " + Math.abs(mousePoint.x - this.midX) + " y diff: " + Math.abs(mousePoint.y - this.midY)); + this.glow = true; + } + else this.glow = false; + } + }; }; \ No newline at end of file diff --git a/src/gameengine.js b/src/gameengine.js index b3fcb34..be1f228 100644 --- a/src/gameengine.js +++ b/src/gameengine.js @@ -37,17 +37,17 @@ class GameEngine { }; startInput() { - const getXandY = e => ({ - x: e.clientX - this.ctx.canvas.getBoundingClientRect().left, - y: e.clientY - this.ctx.canvas.getBoundingClientRect().top - }); + var that = this; + + var getXandY = function (e) { + var x = e.clientX - that.ctx.canvas.getBoundingClientRect().left; + var y = e.clientY - that.ctx.canvas.getBoundingClientRect().top; + return { x: x, y: y, radius: 0 }; + } - this.ctx.canvas.addEventListener("mousemove", e => { - if (this.options.debugging) { - console.log("MOUSE_MOVE", getXandY(e)); - } - this.mouse = getXandY(e); - }); + this.ctx.canvas.addEventListener("mousemove", function (e) { + that.mouse = getXandY(e); + }, false); this.ctx.canvas.addEventListener("click", e => { if (this.options.debugging) { diff --git a/src/main.js b/src/main.js index 079d7fc..5e6aaea 100644 --- a/src/main.js +++ b/src/main.js @@ -2,7 +2,8 @@ const gameEngine = new GameEngine(); const ASSET_MANAGER = new AssetManager(); -ASSET_MANAGER.queueDownload("./assets/spritesheet_nature-blocks.png") +ASSET_MANAGER.queueDownload("./assets/spritesheet_nature-blocks.png"); +ASSET_MANAGER.queueDownload("./assets/spritesheet2.png"); ASSET_MANAGER.downloadAll(() => { const canvas = document.getElementById("gameWorld");