tile hover effects

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;
+        }
+
     };
 };

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) {

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");