javascript - 鼠标单击对象数组javascript Canvas

Question

我有一个数组，里面装满了我游戏中许多不同对象的位置，我想要实现的是当鼠标位于 Canvas 中的对象上时，用户可以单击然后一个框(将是一个菜单)将会出现。

这是我已有的代码:

 this.init_inv = function(value){
    canvas.onmousemove = function (e) {
        var x, y;
        for(var i = 0;i < value.length; i++){
            // Get the mouse position relative to the canvas element.
            if (e.layerX || e.layerX) { //for firefox
                x = e.layerX;
                y = e.layerY;
            }
            x-=canvas.offsetLeft;
            y-=canvas.offsetTop;

            if(x>=value[i][0] && x <= (value[i][0] + value[i][2]) &&
               y<=value[i][1]&& y >= (value[i][1]-value[i][2])){
                document.body.style.cursor = "pointer";
                inObject=true;
            }
            else{
                document.body.style.cursor = "";
                inObject=false;
            }
        }
    };
    canvas.addEventListener("click", on_click, false);
};

点击处理程序如下所示:

function on_click(e) {
    if (inLink)  {
        var dataString = {"save": "true", "level":level, "location_X":pos_X, "location_Y":pos_Y};
        $.ajax({
            type:"POST",
            url:"PHP/class.ajax.php",
            data: dataString,
            dataType: "JSON",
            success: function(success){
                alert("Saved");
            },
            error:function(){
                alert("Not Saved");
            }
        });
    }
    if(inObject){
        console.log("hovering");
    }
}

我有一个单独的点击处理程序，因为我需要处理不同 Canvas 不同部分的点击。

我认为问题在于我如何读取数组中的值，但不确定如何读取。我知道这一点，因为如果我在 value[i][0] 等值所在的位置输入一个 int，我可以在指定的区域中单击并触发单击并获得控制台日志。

数组看起来像这样:

var array = [
   [pos_x,pox_y, size]
   //etc...
];

Answer 1

因此，与其将 inObject 设置为 true 或 false，不如先将其设置为 false，然后将其设置为 i，这样您就知道实际选择了哪个对象.

确保 inObject 是在函数外部定义的，以便您稍后可以访问它。

我将对您的代码进行一些解释，以简要概述我将如何构建它

//first of all, name your stuff what it is, rather than array, name it meaningfully
// and since we don't have a huge amount(1000+) of menu items, we can just use them as objects
// arrays are faster, but for clarity purposes, we don't need the speed and might as well have readable code
var menuboxes = [
  {x: 10, y: 10, size: 100},
  {x: 115, y: 10, size: 100}
];

//i suggest using underscore, but this could be converted to a regular each
_.each(menuboxes, function(box, n){
  context.fillRect(box.x, box.y, box.size, box.size);
});

var on_click = function(e){
  // this doesn't change for each item, so define x and y outside of the boxes loop
  x = e.layerX - canvas.offsetLeft;
  y = e.layerY - canvas.offsetTop;
  clickTarget = false
  _.each(menuboxes, function(box, n){
    if(box.x < x && x < box.x + box.size &&
      // no need to invert y, use it like you use x
      box.y < y && y < box.y + box.size) {
        clickTarget = n;
      }
  });
  if(clickTarget !== false){
    openMenu(clickTarget);
  }
};

var openMenu = function(n){
  console.log("You opened box", n, menuboxes[n]);
  // menu opening code here
}

canvas.addEventListener("click", on_click, false);

这是未经测试的，但应该给你一些提示。我建议现在使用 jquery 和 underscore，并在你掌握诀窍时最终使用 coffeescript。由于浏览器的怪癖，Jquery 非常重要，underscore 非常有用且速度很快，而 coffeescript 是在某些情况下制作可读代码的唯一方法。将您的代码复制到 http://js2coffee.org看看还能缩短多少。