丢球的Javascript错误 [英] Javascript error while dropping balls

问题描述

我写了一个javascript代码，当在画布上点击时多次掉球。这是一个实验。

这是代码：

HTML

I wrote a javascript code to drop in ball multiple times when clicked on canvas. It is an experiment.
Here is the code:
HTML

<br style="clear: both" />
<canvas id="myCanvas1" width="134px" height="331px" onclick="draw(0)"></canvas>
<canvas id="myCanvas2" width="134px" height="331px" onclick="draw(1)"></canvas>
<canvas id="myCanvas3" width="134px" height="331px" onclick="draw(2)"></canvas>

JAVASCRIPT

    var balls = [[], [], []],
    canvases = document.getElementsByTagName('canvas'),
    context = [],
    interval,
    boxWidth = 150,
    ballRadius = 10,
    canvasHeight = 235;
for (var i = 0; i < canvases.length; i++) {
    context.push(canvases[i].getContext('2d'));
}

function draw() {
    var movement = false;
    for (var i = 0; i < 3; i++) {
        context[i].clearRect(0, 0, boxWidth, canvasHeight);
        for (var j = 0; j < balls[i].length; j++) {
            if (balls[i][j].y < balls[i][j].yStop) {
                balls[i][j].y += 4;
                movement = true;
            }
            context[i].beginPath();
            context[i].fillStyle = "red";
            context[i].arc(balls[i][j].x, balls[i][j].y, ballRadius, 0, Math.PI * 2, true);
            context[i].closePath();
            context[i].fill();
        }
    }
    if (!movement) {
        clearInterval(interval);
        interval = null;
    }
}

function newBall(n) {
    console.log('new ball', n);
    var last = balls[n][balls[n].length - 1],
        ball = {x: ballRadius, y: ballRadius, yStop: canvasHeight - ballRadius};
    if (last) {
        if (last.x < boxWidth - ballRadius * 3) {
             ball.x = last.x + ballRadius * 2;
             ball.yStop = last.yStop;
        } else {
             ball.yStop = last.yStop - ballRadius * 2;
        }
    }
    balls[n].push(ball);
    if (!interval) {
        interval = setInterval(draw, 10);
    }
}

但球没有落入。请告诉我我错在哪里，以便我可以解决它...

But balls aren't dropping in. Please tell me that where am I wrong so that I can fix it...

推荐答案

您的代码始终从0循环到3。起初，周围没有球。当你试图到达球[0]，球[1]和球[2]时，你会得到 undefined 错误。

Your code is always looping from 0 to 3. However, at first, there is no ball around. When you try to reach balls[0], balls[1] and balls[2], you get undefined error.

您需要做的是将循环更改为：

What you have to do is to change the loop to:

for (var i = 0; i < balls.length; i++)

或者如果你这样做不想改变循环，你可以在开始时初始化3个球：

or if you do not want to change the loop, you can initialize 3 balls at the start:

balls = [ball1, ball2, ball3];

其中ball1，ball2和ball3被定义为你的球数据类型。

where ball1, ball2 and ball3 are defined as how your ball data type is.

编辑：

据我所知，你有一些背景，对于每个上下文，你想要一个球列表，以便你可以绘制它们。

As I understand, you have some number of contexts, and for each context, you want to have a list of balls so that you can draw them.

然后：

balls = []

for (var i = 0; i < canvases.length; i++) {
    context.push(canvases[i].getContext('2d'));
    balls.push([]);
}

并使用相同的剩余代码。

and use the remaining code same.

这篇关于丢球的Javascript错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！