클릭 이벤트가 응답하지 않거나 예기치 않게 발생합니다 (jCanvaScript)

HTML5 캔버스와 jCanvaScript 라이브러리를 사용하여 간단한 게임을 만들고 있습니다.클릭 이벤트가 응답하지 않거나 예기치 않게 발생합니다 (jCanvaScript)

이

<!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>

질문 : 당신은 코드에서 볼 수 있듯이

, 나는 모양을 클릭 때마다이 모양이 빨간색으로 성장한다

//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로 너무 쉽다 사라질 때까지 작아진다. 가끔은 일하는 것 같습니다. 이 코드를 테스트하면 클릭이 다른 모양이나 전혀 또는 전혀 반응이없는 것처럼 보입니다. 문제가 누구인지 아는 사람이 있습니까?

나는 이것이 모두 단일 스레드에 있고 루프가 제대로 중단되지 않는다고 생각합니다.

출처

2012-11-20 Yoeri

을 나는 그것의 코드를 생각하지 않는 로컬 복사본 덤비는 후, 나는 그것의 라이브러리를 생각하고는 개체 당 클릭 이벤트를 처리하는 방법. 오브젝트는 레이어에 지정되며, 레이어를 클릭 할 때 까다롭게 느껴질 수도 있습니다. – Loktar

시간을내어 주셔서 감사합니다. 나는 다른 도서관을 시도해야 할 것이다. 이런, 아주 똑바로. – Yoeri

문제점을 찾았습니다. 내 대답을 참조하십시오. – Yoeri

그래, 내가 뭘 잘못했는지 알았어. CSS를 통해 내 캔버스의 크기를 설정합니다. CSS를 사용하지 않고 캔버스의 크기를 조절하고 늘일 수 있기 때문에 결코 할 수 없습니다.

그래서 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)

답변

관련 문제