0

私は本当に簡単な質問があります。私のhtmlスクリプトタグには、5つのボックスのクラスとして機能する Box() 関数があります。

こんな感じで箱を作っています

    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 が増加しません。誰かが理由を教えてもらえますか?

4

1 に答える 1

0

x増えないと思う根拠は？実際には、あなたの問題は、setTimeout代わりに を使用していることですsetInterval。

デモ

//DRAW ALL BOXES EVERY 30 FRAME
var loopTimer = setInterval(draw, 300);
于 2013-09-07T15:59:57.203 に答える