鼠标单击对象数组javascript画布

Mouse click on array of objects javascript Canvas

本文关键字：javascript 画布 数组 对象 单击 鼠标      更新时间：2023-09-26

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

下面是我已经写好的代码:

 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...
];

因此，与其将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，当你掌握了窍门后再使用coffescript。由于浏览器的特性，Jquery非常重要，下划线非常有用且快速，而coffeescript是在某些情况下编写可读代码的唯一方法。将您的代码复制到http://js2coffee.org，看看它可以缩短多少。

相关文章：