我正在编写基本的气球游戏。气球是在画布中动态创建的。一切正常,但我无法添加
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();
}
您需要将函数分配给事件处理程序。如果你给一个函数提供参数,它就会被调用。你可以试试这个工厂方法(你可以给包装函数任意参数并在返回函数的闭包中使用它们):
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);
}
}
这里的部分问题是您试图在 DOM 中不存在的元素上分配事件回调。您只是在画布上绘图。需要将点击事件应用于画布元素。您需要保存每个气球的坐标,并在单击画布时使用它来找到合适的气球。