Javascript 更改对象值

Javascript changing object value

本文关键字：对象 Javascript      更新时间：2023-09-26

我有一个非常快速的问题。在我的 html 脚本标签中，我有一个 Box（） 函数，它用作 5 个盒子的类。

我正在创建这样的盒子

    var boxes = new Array();
    for (var i = 0; i < 5; i++) {
        var d = 50;
        var y = Math.random() * 250;
        boxes[i] = new Box(d, y, d, 255);
    }

    function Box(x, y, dimension, color) {
        this.x = x;
        this.y = y;
        this.dimension = dimension;
        this.color = color;
    }
    Box.prototype.draw = function (ctx) {
        ctx.fillStyle = "rgba(0,100,0,1)";
        ctx.fillRect(this.x, this.y, this.dimension, this.dimension);
        this.x += 5;
    }

并像这样画盒子

    function draw() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.save();
        //CLEAR THE CANVAS
        ctx.clearRect(0, 0, 550, 400);
        for (var i = 0; i < boxes.length; i++) {
            var box = boxes[i];
            box.draw(ctx);
            if (box.x > 500) {
                var index = array.boxes(box);
                boxes.splice(index, 1);
            }
        }
        ctx.restore();
    }
    //DRAW ALL BOXES EVERY 30 FRAME
    var loopTimer = setTimeout('draw();', 30);

盒子画得很好，但对象的x没有增加，有人可以告诉我为什么吗？

是什么让你认为x不会增加？实际上，您的问题是您使用的是setTimeout而不是setInterval。

演示

//DRAW ALL BOXES EVERY 30 FRAME
var loopTimer = setInterval(draw, 300);
相关文章：