在嵌套数组中创建带有 javascript 错误的游戏答案

【问题标题】：creating game with javascript error in a nested array在嵌套数组中创建带有 javascript 错误的游戏
【发布时间】：2017-03-08 14:08:20
【问题描述】：

我正在尝试使用 javascript 创建游戏，但它不起作用。在开发人员工具中，错误如下： “未捕获的类型错误：无法读取未定义的属性‘x’”。所以我认为错误涉及嵌套数组“circles”。

这是代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Tutorial</title>
    <script type="text/javascript">
        window.onload = draw;



        var circles = [{x:200,y:150,r:40,direction:1,speedX:1,speedY:2},{x:200,y:150,r:70,direction:1,speedX:2,speedY:1}];



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

            function bottomRight() {
                circles[i].x += circles[i].speedX;
                circles[i].y += circles[i].speedY;
            }

            function upLeft() {
                circles[i].x -= circles[i].speedX;
                circles[i].y -= circles[i].speedY;
            }

            function upRight() {
                circles[i].x += circles[i].speedX;
                circles[i].y -= circles[i].speedY;

            }

            function bottomLeft() {
                circles[i].x -= circles[i].speedX;
                circles[i].y += circles[i].speedY;
            }

            function draw() {


                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");

                ctx.fillStyle = "black";
                ctx.fillRect(0,0,400,300);
                ctx.fillStyle = "yellow";
                ctx.beginPath();
                ctx.arc(circles[i].x,circles[i].y,circles[i].r,0,Math.PI*2,false);
                ctx.fill();

                if((circles[i].y > 300 - circles[i].r) && circles[i].direction ===1){
                    circles[i].direction = 2;
                } else if((circles[i].x > 400 - circles[i].r) && (circles[i].direction===2)) {
                    circles[i].direction = 3;
                } else if ((circles[i].y > 300 - circles[i].r) && (circles[i].direction===4)) {
                    circles[i].direction = 3;
                } else if ((circles[i].y <= circles[i].r) && circles[i].direction === 3) {
                    circles[i].direction = 4;
                } else if ((circles[i].x < circles[i].r) && circles[i].direction === 4){
                    circles[i].direction = 1;
                } else if ((circles[i].y < circles[i].r) && circles[i].direction === 2) {
                    circles[i].direction = 1;
                }

                if (circles[i].direction === 1) {
                    bottomRight();
                } else if (circles[i].direction === 2) {
                    upRight();
                } else if (circles[i].direction === 3) {
                    upLeft();
                } else {
                    bottomLeft();
                }

            }



                setTimeout(draw, 10);
            }


    </script>
</head>
<body>
    <canvas id="canvas" width="400" height="300"></canvas>

</body>
</html>

如何修复代码？

【问题讨论】：

在控制台中的错误旁边，应该有一个文件名和一个行号，可以将您指向确切的错误位置
请将函数定义移出循环。

标签： javascript html arrays canvas

【解决方案1】：

这是一种没有优化的工作版本的尝试。

我将函数移到循环外，将方向函数移到 draw 内。

function draw() {

    function bottomRight() {
        circles[i].x += circles[i].speedX;
        circles[i].y += circles[i].speedY;
    }

    function upLeft() {
        circles[i].x -= circles[i].speedX;
        circles[i].y -= circles[i].speedY;
    }

    function upRight() {
        circles[i].x += circles[i].speedX;
        circles[i].y -= circles[i].speedY;
    }

    function bottomLeft() {
        circles[i].x -= circles[i].speedX;
        circles[i].y += circles[i].speedY;
    }

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, 400, 300);
    ctx.fillStyle = "yellow";
    ctx.beginPath();
    for (var i = 0; i < circles.length; i++) {
        ctx.arc(circles[i].x, circles[i].y, circles[i].r, 0, Math.PI * 2, false);
        ctx.fill();

        if ((circles[i].y > 300 - circles[i].r) && circles[i].direction === 1) {
            circles[i].direction = 2;
        } else if ((circles[i].x > 400 - circles[i].r) && (circles[i].direction === 2)) {
            circles[i].direction = 3;
        } else if ((circles[i].y > 300 - circles[i].r) && (circles[i].direction === 4)) {
            circles[i].direction = 3;
        } else if ((circles[i].y <= circles[i].r) && circles[i].direction === 3) {
            circles[i].direction = 4;
        } else if ((circles[i].x < circles[i].r) && circles[i].direction === 4) {
            circles[i].direction = 1;
        } else if ((circles[i].y < circles[i].r) && circles[i].direction === 2) {
            circles[i].direction = 1;
        }

        if (circles[i].direction === 1) {
            bottomRight();
        } else if (circles[i].direction === 2) {
            upRight();
        } else if (circles[i].direction === 3) {
            upLeft();
        } else {
            bottomLeft();
        }
    }
}

var circles = [{ x: 200, y: 150, r: 40, direction: 1, speedX: 1, speedY: 2 }, { x: 200, y: 150, r: 70, direction: 1, speedX: 2, speedY: 1 }];

setTimeout(draw, 10);

&lt;canvas id="canvas" width="400" height="300"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

首先，正如 Nina Scholz 所说，您应该在循环外声明 draw()。

如果您想了解这里出现问题的原因，您可以使用console.log() 来查看发生了什么。样本输出：

Circles.length : 2
I in loop : 0
I in loop : 1
I in draw : 2

如你所见，当你输入draw()函数时，I = 2。

解决方案

将 Draw 函数移到循环之外。
不要使用setTimeout，或者传递参数。

【讨论】：