Question

我正在编写基本的气球游戏。气球动态创建到画布中。一切都还可以但我无法添加onclick事件来隐藏气球。开始游戏的第一个功能是“ Baslat （）”。这是我的代码

var canvas; 
var sev = 1;
var zorluk = 3;
var ctx;

function Baslat() {
    var x;
    for (x = 1; x <= sev*zorluk; x++) {
        BalonYap(x);
    }
}

function seviye(a) {
    sev = a.value;
}

function BalonYap(id) {

    var img = new Image();
    img.src = "balon.png";
    img.id = "balon_"+id;
    img.onload = BalonLoad(img); // works
    img.onclick = Patlat(id); // doesn't work

}

function BalonLoad(img) {
    var rnd1 = Math.floor(Math.random() * 750)+10;
    var rnd2 = Math.floor(Math.random() *350)+10;
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    context.drawImage(img, rnd1, rnd2);
}

function Patlat(img) {
    alert();
}

Answer 1

您需要为事件处理程序分配函数。如果为函数提供参数，则调用它。你可以尝试这个工厂方法（你可以给包装函数赋予任意参数，并在返回函数的闭包内使用它们）：

function BalonLoad(img) {
    return function() {
        var rnd1 = Math.floor(Math.random() * 750)+10;
        var rnd2 = Math.floor(Math.random() *350)+10;
        canvas = document.getElementById('myCanvas');
        context = canvas.getContext("2d");
        context.drawImage(img, rnd1, rnd2);
    }
}

Answer 2

这里的部分问题是您正在尝试为DOM中不存在的元素分配事件回调。你只是画画。需要将click事件应用于canvas元素。您需要保存每个气球的坐标，并在单击画布时使用它来查找相应的气球。

添加onClick事件动态DOM对象

2 个答案: