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的{{1}} 副本，您必须自己进行复制。这是一种方式：

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，然后将其实例化以创建一个具有所需属性的新对象。

变量无缘无故变化

2 个答案: