1

HTML5キャンバスと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>

質問：

コードからわかるように、図形をクリックするたびに、図形が赤くなり、消えるまで小さくなります。これは時々機能しているようです。 このコードをテストすると、クリックがさまざまな形で反応するか、まったく反応しないか、ランダムに反応するように見えることがわかります。誰かが問題が何であるかについての考えを持っていますか？

これはすべて単一のスレッド上にあり、ループは適切に中断されないと思います。

4

2 に答える 2

1

さて、私は何が悪かったのかを見つけました。私はCSSを介してキャンバスのサイズを設定しましたが、CSSはJavaScriptを認識せずにキャンバスのサイズを変更して拡大するため、これは決して行うことはできません。

だから私はCSSによって変換された図形をクリックしていました...javascript/canvasの実際の図形ではありません。

キャンバスに高さと幅をインラインで配置すると、チャームのように機能します。

あなたはそれがここで働いているのを見ることができます：実例

于 2013-02-26T21:48:37.493 に答える
0

イベントを最初のシェイプでのみ機能させる場合は、イベント関数からfalseを返す必要があります。

于 2012-12-20T18:02:11.747 に答える