點擊事件沒有響應或無法預測（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）

回答

相關問題