Question

我正在使用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>

问题：

从代码中可以看出，每次单击一个形状时，形状应该变成红色并变小，直到它消失。这似乎有效，有时。 当您测试此代码时，您会注意到点击似乎响应不同的形状或根本不响应或只是随机。有谁知道问题是什么？

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

Answer 1

好的，我发现了什么问题。我通过CSS设置画布的大小，你可能永远不会这样做，因为CSS调整大小并拉伸画布，而不需要javascript知道。

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

我在画布中将高度和宽度内联，现在它就像一个魅力。

您可以在此处看到它：live example

Answer 2

如果您希望事件仅在第一个形状上起作用，则需要从事件函数返回false。

点击事件无响应或不可预测（jCanvaScript）

2 个答案: