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 中的实际形状。

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

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

于 2013-02-26T21:48:37.493 回答
0

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

于 2012-12-20T18:02:11.747 回答