点击事件没有响应或无法预测（jCanvaScript）

我使用HTML5画布和jCanvaScript库创建一个简单的游戏。点击事件没有响应或无法预测（jCanvaScript）

//JavaScript 
function start() { 
    jc.start("drawingCanvas", 380); 
    text = jc.text('score: ' + score, 10, 10); 
    clock = jc.text(round/2, 285, 145); 
    var millisecondsToWait = 500; 
    inter = setInterval(nextRound, millisecondsToWait); 
} 

function nextRound() { 
    round--; 
    if(round % 2 == 0){ 
     clock.string(round/2); 
    } 
    if (round == 0) { 
     endGame(); 
    } else { 
     draw(); 
    } 
} 

function draw() { 
    var shape = jc.circle(random() * 300, random() * 100, random() * 10, randomRgba(), 1); 
    shape.click(destroy); 
    shape.animate({ 
     x : random() * 300, 
     y : random() * 100, 
     radius : random() * 100 
    }, random() * 2000); 
} 
function destroy() { 
    score += Math.round(100 - this._radius); 
    text.string('score: ' + score); 
    this.color('#ff0000'); 
    this.animate({ 
     radius : 0 
    }, 1000); 
}

的HTML是太容易了：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script src="http://jcscript.com/data/js/jCanvaScript.1.5.18.min.js"></script> 
     <script src="js/canvasWithLibraries.js"></script> 
     <link rel="stylesheet" href="css/canvaslib.css" /> 
     <title>Canvas with libraries demo</title> 
    </head> 
    <body> 
     <canvas id="drawingCanvas">your browser does not support the canvas element</canvas> 
    </body> 
</html>

问题：

正如你可以从代码中看到，每次我点击一个形状，形状应该变成红色，成长直到它消失为止。这似乎是有效的，有时。 当您测试此代码时，您会注意到点击看起来似乎在不同的形状上响应，或者根本不响应，或者只是随机响应。有没有人有一个想法是什么问题？

我猜这是全部在一个线程上，并且循环不会被正确中断。

来源

2012-11-20 Yoeri

与本地副本，我不认为这是你的代码搞乱后，我认为它的图书馆以及如何处理每个对象的单击事件。对象被分配到图层，并且在点击图层时它看起来可能会很挑剔，如果这些图层中有很多图层的话。 – Loktar

嘿感谢您花时间。那么我必须尝试一个不同的库。皮蒂，这个很简单。 – Yoeri

我发现了问题，看到我的回答 – Yoeri

好吧，我发现什么是错的。我通过CSS设置了我的画布的大小，你可能永远不会这样做，因为CSS会调整大小并拉伸画布，而不会使用JavaScript。

所以我点击形状，由CSS转换...不是在javascript/canvas中的实际形状。

我把高度和宽度内嵌在画布上，现在它就像一个魅力。

你可以看到它在这里工作：live example

来源

2013-02-26 21:48:37 Yoeri

不错！很高兴看到你明白了！ – Loktar

如果您想让事件仅在第一个形状上工作，则需要从事件函数返回false。

来源

2012-12-20 18:02:11

我试着通过从destroy函数返回false来尝试你的建议，但它没有做任何事情。也许我误解你的建议？ – Yoeri

你可以创建一个jsfiddle吗？ –

我解决了这个问题，它与图书馆无关！ – Yoeri

点击事件没有响应或无法预测（jCanvaScript）

回答

相关问题