JavaScript：当游戏中所有物体都被捕获时提醒用户

Question

我制作了这个小游戏来为我的网络编程考试做准备，但它并没有完全奏效，而且我被卡住了。

我基本上有一个对象 Star ，它的 isCaught 属性是标准的 false，当它与另一个对象（女巫）碰撞时变为 true。

我希望我的程序始终循环遍历我的 Star 对象数组，并检查数组中的每个元素是否都已被捕获 (isCaught = true)，如果是，它应该提醒用户。 但是，它只返回 false（并且只返回 3 次）。

如果对象没有被捕获并到达屏幕的末尾，我也尝试从数组中删除它们，但是我会遇到索引问题（这是注释掉的部分）。

我可能正在做一些非常愚蠢非常错误的事情，但我找不到它。 代码如下：

function Star(x, y, vy){
    this.x = x;
    this.y = y;
    this.vy = vy;
    this.isCaught = false;

    var starImg = new Image();
    starImg.src = 'images/star.png';

    $(starImg).load(function(){ 
    });

    this.drawStar = function(){
        ctx.drawImage(starImg,this.x,this.y,20,20); 
        //context.beginPath();
    }
}

function Witch(){
    this.x = 10;
    this.y = 300;

    var witchImg = new Image();
    witchImg.src = 'images/witch2.png';

    $(witchImg).load(function(){
    });

    this.drawWitch = function(){
        ctx.drawImage(witchImg,this.x,this.y,50,50);
    }
}


var canvas;
var ctx;

var speed = 33;
var starsAmount = 6;

var stars = [];
var witch = new Witch();

$(function(){  
    canvas = document.getElementById("gameCanvas");
    ctx = canvas.getContext("2d");

    $("body").mousemove(function(arg){
        //witch.y = arg.pageY;
        witch.x = arg.pageX;
    });

    for(var i=0;i<starsAmount;i++){
        stars.push(new Star(Math.floor(Math.random()*canvas.width)+50,10,2));
    }

    Animate();
});

function Animate(){
    ctx.clearRect(0,0,canvas.width,canvas.height);

    var countCaught = 0;

    for (var i = 0; i < stars.length; i++){
        stars[i].y += stars[i].vy;

        stars[i].drawStar();
        witch.drawWitch();
    }

    //collision detection
    for(var i=0; i<stars.length; i++){
        var distanceX = (stars[i].x+10)-(witch.x+25);
        var distanceY = (stars[i].y+10)-(witch.y+25);

        var distance = Math.sqrt((distanceX*distanceX)+(distanceY*distanceY));

        if(distance < 35){
            stars[i].x = Math.floor(Math.random()*canvas.width);
            stars[i].y = -20;
            stars[i].vy += 1;

            stars[i].isCaught = true;
        }

        var allCaught = checkCaught();
        console.log(allCaught);

        if(allCaught == true){
            ("You've lost!");
        }

        //if the stars reach the end of the screen and they are not caught, delete them from the array
        /*
        if((stars[i].y+10) == canvas.height && stars[i].isCaught == false){
            console.log(stars[i].y);
            stars.splice(i,1);
            console.log("say something im giving up on you" + i);
        }
        console.log("array length " + stars.length);
        */
    }

    setTimeout(Animate,speed);
}

function checkCaught(){
    var allCaught = true;

    for(var i=0; i<stars.length; i++){
        if(stars[i].isCaught == false){
            allCaught = false;
        }
        else{
            allCaught = true;
        }
    }
    return allCaught;
}

提前致谢！

Answer 1

编写allCaught 函数的ES5 方法是使用Array.prototype.every：

function checkCaught() {
    return stars.every(function(star) {
        return star.isCaught;
    });
}

ES6 的方式是：

var checkCaught = () => stars.every(star => star.isCaught);

Answer 2

你可以像这样简化这个函数：

function checkCaught(){
    var allCaught = true;

    for(var i=0; i<stars.length; i++){
        if(stars[i].isCaught == false){
            allCaught = false;
            break;
        }
    }
    return allCaught;
}

看起来不错，但您似乎有一个对象数组，它可能不容易迭代。您是否尝试过使用 foreach 循环进行迭代？

for (key in stars) {
    if (stars[key].isCaught === false) {
        allCaught = false;
        break;
    }
}

如果您真的需要帮助，请添加 plunker 或 https://jsfiddle.net/ 或其他任何内容。

我确实尝试过为你制作一个小提琴......但它似乎在那里对我有用，所以我真的不知道，你的问题是什么...... https://jsfiddle.net/zh0ybdho/