Наведя курсор на карты тайлов, используя jQuery в HTML 5 Canvas

Question

У меня есть некоторый код, который генерирует карту тайлов, но у меня возникают проблемы с попыткой заставить плитки реагировать на зависание.

Чтобы было ясно, я пытаюсь сделать игру Tower Defense, но я хотел бы получить любую помощь или помощь в решении этой проблемы.

Моя цель - чтобы плитки просто меняли цвет при наведении на них мышью, скажем, белого цвета, а затем чтобы мозаика вернулась к исходному цвету. Первоначальный оператор hover, который я написал, был вставлен для изменения параметра регистра переключателя следующим образом:

switch (gameMap[((y * mapW) + x)]) {
        case 0:
         $(gameMap[((y * mapW) + x)]).on({
    mouseenter: function () {
        //Black
         ctx.fillStyle = "#000000";

    },
    mouseleave: function () {
        //Green
        ctx.fillStyle = "#ccffcc";

    }
});
          break;
        default:
          $(gameMap[((y * mapW) + x)]).on({
    mouseenter: function () {
        //Green
         ctx.fillStyle = "#ccffcc";

    },
    mouseleave: function () {
        //Black
        ctx.fillStyle = "#000000";

    }
});

И затем я попытался реализовать его там, где находится команда fillRect, но это только привело к тому, что квадраты вообще не появлялись .

Обычный код плитки:

var ctx = null;
var gameMap = [
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
  0, 1, 0, 0, 0, 1, 1, 1, 1, 0,
  0, 1, 0, 0, 0, 0, 0, 0, 1, 0,
  0, 1, 0, 1, 1, 1, 1, 1, 1, 0,
  0, 1, 0, 1, 0, 0, 0, 0, 0, 0,
  0, 1, 0, 1, 1, 1, 1, 1, 1, 0,
  0, 1, 0, 0, 0, 0, 0, 0, 1, 0,
  0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
var tileW = 100,
  tileH = 100;
var mapW = 10,
  mapH = 10;
var currentSecond = 0,
  frameCount = 0,
  framesLastSecond = 0;

window.onload = function() {
  ctx = document.getElementById('game').getContext("2d");
  requestAnimationFrame(drawGame);
  ctx.font = "bold 10pt sans-serif";
};

function drawGame() {
  if (ctx == null) {
    return;
  }

  var sec = Math.floor(Date.now() / 1000);
  if (sec != currentSecond) {
    currentSecond = sec;
    framesLastSecond = frameCount;
    frameCount = 1;
  } else {
    frameCount++;
  }

  for (var y = 0; y < mapH; ++y) {
    for (var x = 0; x < mapW; ++x) {
      switch (gameMap[((y * mapW) + x)]) {
        case 0:
          ctx.fillStyle = "#000000";
          break;
        default:
          ctx.fillStyle = "#ccffcc";
      }
      ctx.fillRect(x * tileW, y * tileH, tileW, tileH);
    }
  }

  ctx.fillStyle = "#ff0000";
  ctx.fillText("FPS: " + framesLastSecond, 10, 20);
  requestAnimationFrame(drawGame);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<canvas id="game" width="1000" height="1000"></canvas>