Question

function component(width, height, source, x, y) {
    this.image = new Image();
    this.image.src = source;
    this.width = width;
    this.height = height;  
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.drawImage(this.image, 
            this.x, 
            this.y,
            this.width, this.height);
    }
    this.newPos = function(a, b, image, h) {
        this.x = a;
        this.y = b;
        this.image.src = image;
        this.height = h;
    }
}

如何在组件上单击完成后调用函数？或者我应该只记录点击的坐标并将其与组件的坐标进行比较？

Answer 1

使用HTML5 Canvas时，很遗憾没有单独的节点可以注册点击事件。这里唯一真正的选择是在<canvas>元素本身上注册一个click事件，然后使用X和Y坐标来确定点击了哪个组件。

Answer 2

我不知道你是使用vanilla JS还是使用特殊引擎，但是如果你可以使用JQuery，也许你必须看看这个https://api.jquery.com/click/，它允许你每次点击你的组件时执行一个函数下面的代码只是关于如何使用该函数的一个示例，测试它以确保它适用于您

    function component(width, height, source, x, y) {
    this.image = new Image();
    this.image.src = source;
    this.width = width;
    this.height = height;  
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.drawImage(this.image, 
            this.x, 
            this.y,
            this.width, this.height);
    }
    this.newPos = function(a, b, image, h) {
        this.x = a;
        this.y = b;
        this.image.src = image;
        this.height = h;
    }
    $(this).click(function(){
        //Code here
    });
}

如何在单击组件时调用函数？

2 个答案: