4

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

这是我已经拥有的代码：

 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]etc 值所在的位置输入一个 int，我可以在指定的区域单击，然后单击触发，我会得到控制台日志。

数组如下所示：

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

1 回答 1

0

inObject因此，您可以最初将其设置为 false，然后将其设置为 ，而不是设置为 true 或 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 和下划线，当你学会了这些绳索时，最终使用咖啡脚本。由于浏览器的怪癖，Jquery 非常重要，下划线非常有用且快速，并且在某些情况下，coffeescript 是制作可读代码的唯一方法。将您的代码复制到http://js2coffee.org以查看它可以缩短多少。

于 2013-05-13T18:48:52.673 回答