0

私は物が画面の上部から落ちてくる非常に単純なものを作っています。落下するすべてのオブジェクト (ボトル) を配列内に格納します。オブジェクトが 1 つある場合は正常に描画され、Y 位置が正常に増加しますが、複数ある場合はすべてまったく同じ X と Y が与えられます。何が原因なのかわかりません。

これはファイル全体です:

var canvas = document.getElementById("canvas");
var canvasWidth = 600;
var canvasHeight = 500;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var ctx = canvas.getContext("2d");

var bottle = {
    x: 0,
    y: 0,
    hasFell: false,
    height: 0,
    width: 0,
    src1: "water1.png",
    src2: "water2.png"
}

var bottles = new Array();
bottles.length = 20;
bottleImage = new Image();
bottleImage.src = bottle.src1;
fellBottleImage = new Image();
fellBottleImage.src = bottle.src2;

var makeBottle = function(){
    //If math.random above 7 add new bottle
    if(Math.random() > 0.7){
        var madeBottle = false;
        for(var i = 0; i < bottles.length; i++){
            if(bottles[i] == null){
                //It only goes in here once, after it has made one bottle it exits the loop
                madeBottle = true;
                bottles[i] = bottle;

                //These are the only things that change both the X and the Y, yet these cannot be the problem.
                bottles[i].x = Math.random() * 100;
                bottles[i].y = Math.random() * 100;


                console.log("Made bottle: " + i + " X: " + bottles[i].x + " Y: " + bottles[i].y);
                break;
            }
        }
        if(!madeBottle){
            for(var i = 0; i < bottles.length; i++){
                if(bottles[i].hasFell){
                    bottles[i] = null;
                    makeBottle();
                }
            }
        }
    }
}

var gameUpdate = function(){
    for(var i = 0; i < bottles.length; i++){
        if(bottles[i] != null){
            bottles[i].y += 1;
            if(bottles[i].y > canvasHeight) bottles[i] = null;
        }
    }
    gamePaint();
}

var gamePaint = function(){
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    for(var i = 0; i < bottles.length; i++){
        if(bottles[i] != null){
            ctx.drawImage(bottleImage, bottles[i].x, bottles[i].y);
        }
    }
}

var gameInterval = setInterval(gameUpdate, 10);
var bottleInterval = setInterval(makeBottle, 1000);
4

2 に答える 2