Question

我想用Sublime创建一个使用HTML和Javascript的游戏。但是我试图用Javascript创建一个嵌套数组，但后来我运行它不能在浏览器上工作的代码。阵列＆＃34;圈＆＃34;应该包含＆＃34;球＃34; （如果你删除这一行，游戏只包含一个球并且它有效）。

这是游戏的代码：

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

        x = 200;
        y = 150;
        r = 40;
        direction = 1;
        speedX = 1;
        speedY = 2;

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



        function bottomRight() {
            x += speedX;
            y += speedY;
        }

        function upLeft() {
            x -= speedX;
            y -= speedY;
        }

        function upRight() {
            x += speedX;
            y -= speedY;

        }

        function bottomLeft() {
            x -= speedX;
            y += 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(x,y,r,0,Math.PI*2,false);
            ctx.fill();

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

            if (direction === 1) {
                bottomRight();
            } else if (direction === 2) {
                upRight();
            } else if (direction === 3) {
                upLeft();
            } else {
                bottomLeft();
            }

        }

        setInterval(draw, 10);

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

</body>
</html>

如何修复代码？

Answer 1

您的圈子声明中有错误 - 将equals替换为colons：

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

Answer 2

您不在代码中使用圆圈。也许你应该创建一个

function Ball(ball) {
    this.x = ball.x;
    this.y = ball.y;
    ...
    this.speedY = ball.speedY;
}    
Ball.prototype.bottomRight = function() {
        this.x += speedX;
        this.y += speedY;
}
...
Ball.prototype.draw = function(ctx) {  
    ctx.fillStyle = "yellow";
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
    ...
}

并在绘图功能中使用它：

var circles = [
    new Ball({x:200, y:150, r:40, d:1, speedX:1, speedY:2}), 
    new Ball({x:200, y:150, r:40, d:1, speedX:1, speedY:2})
]; 

function draw() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,400,300);
    cirlces.forEach(function(ball) { ball.draw(ctx); });
}    

setInterval(draw, 10);

在javascript中创建嵌套数组

2 个答案: