无故更改变量

Question

我正在制作一个非常简单的东西，东西从屏幕顶部掉下来，（一旦完成）你必须抓住它们。我将所有掉落的物体（瓶子）存储在一个数组中。当有一个对象时，它绘制得很好，并且它的 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);

Answer 1

            bottles[i] = bottle;

这使得bottles[i] 和bottle 指向同一个对象。在循环结束时，您仍然只有一个瓶子，上面有很多不同的名称。

如果你想让bottles[i] 成为bottle 的副本，你必须自己进行复制。这是一种方法：

bottles[i] = {}
for (var key in bottle) {
    bottles[i][key] = bottle[key];
}

或者，如果所有瓶子都以相同的值开始，您可以创建一个Bottle 构造函数：

function Bottle() {
  this.x = 0;
  this.y = 0;
  this.hasFell = false;
  this.height = 0;
  this.width = 0;
  this.src1 = "water1.png";
  this.src2 = "water2.png";
}

bottle = new Bottle();

...

bottle[i] = new Bottle();

Answer 2

 //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;

当然可以 :) 您将数组的每个成员都设置为指向瓶对象，然后修改该对象。您需要为数组中的每个项目创建不同的对象。

你可以这样做

var Bottle = function(){
    this.x = 0;
    this.y = 0;
    this.hasFell = false;
    this.height = 0;
    this.width = 0;
    this.src1 = "water1.png";
    this.src2 = "water2.png";
}

然后

bottles[i] = new Bottle();

这会创建一个新的构造函数 Bottle，然后实例化它以创建一个新对象，该对象具有数组中每个项目所需的属性。