Question

我的游戏中有许多不同对象的阵列，我想要实现的是当鼠标位于画布上的对象上时，用户可以单击然后单击一个框（将出现一个菜单）。

这是我已经拥有的代码：

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

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

我认为问题在于我如何读取数组中的值，但不确定如何。我知道这一点，因为如果我输入一个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和下划线，最后当你学习绳索时最终使用coffeescript。由于浏览器的怪癖，Jquery非常重要，下划线非常有用且快速，而coffeescript是在某些情况下生成可读代码的唯一方法。将您的代码复制到http://js2coffee.org，看看它可以缩短多少。

鼠标点击对象数组javascript Canvas

1 个答案: