如何添加一个计数器，该计数器以后将用于if语句以执行重新加载

Question

I am unsure how to properly set up a game so I am counting enemies. If I can count the enemies I believe I can set up my code so I can do a confirm that would make it so I can reload the page and potentially make more enemies

I think my problem is based around my enemycount variable. I am unsure how to count down to get to zero. I also believe my problem might be related to not having a function based around enemycount.

//This is the Variables that I have used for code as well as the codes based around the enemies.//  
var canvasBg =document.getElementById("canvasBg"),
    ctxBg = canvasBg.getContext("2d"),
    canvasEntities =document.getElementById("canvasEntities"),
    ctxEntities = canvasEntities.getContext("2d"),
    canvasWidth = canvasBg.width,
    canvasHeight = canvasBg.height,
    player1 = new Player(),
    enemies = [],
    numEnemies = 5,
    enemycount = numEnemies,
    obstacles = [],
    isPlaying = false,

function Enemy(){
    this.srcX = 140;
    this.srcY = 600;
    this.width = 45;
    this.height = 54;
    this.drawX = randomRange(0, canvasWidth - this.width);
    this.drawY = randomRange(0, canvasHeight - this.height);
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
    this.targetX = this.centerX;
    this.targetY = this.centerY;
    this.randomMoveTime + randomRange(4000, 10000);
    this.speed = 1;
    var that = this;
    this.moveInterval =setInterval(function(){that.setTargetLocation();}, that.randomMoveTime);
    this.isDead = false;
}

Enemy.prototype.update = function (){
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
    this.checkDirection();
};

Enemy.prototype.draw = function(){
    ctxEntities.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height);


};



function initEnemies(){
    for(var i = 0; i < numEnemies; i++){
        enemies[enemies.length] = new Enemy();
    }
}

function updateAllEnemies(){
    for(var i = 0; i < enemies.length; i++){
        enemies[i].update();
    }
}
function drawAllEnemies(){
    for(var i = 0; i < enemies.length; i++){
        enemies[i].draw();
    }
}


Enemy.prototype.setTargetLocation = function(){
    this.randomMoveTime = randomRange(4000, 10000);
    var minX = this.centerX - 50, 
        maxX = this.centerX + 50,
        minY = this.centerY - 50,
        maxY = this.centerY + 50;
    //no ghosts off canvas
    if(minX < 0){
        minX = 0;
    }
    if(maxX > canvasWidth){
        maxX = canvasWidth;
    }
    if(minY < 0){
        minY = 0;
    }
    if(maxY > canvasHeight){
        maxY = canvasHeight;
    }
    this.targetX = randomRange(minX, maxX);
    this.targetY = randomRange(minY, maxY);
};

Enemy.prototype.checkDirection = function(){
    if(this.centerX < this.targetX){
        this.drawX += this.speed;
    }else if(this.centerX > this.targetX){
        this.drawX -= this.speed;
    }
    if(this.centerY < this.targetY){
        this.drawY += this.speed;
    }else if(this.centerY > this.targetY){
        this.drawY -= this.speed;
    }
};

Enemy.prototype.die = function (){
    var soundEffect = new Audio("audio/dying.wav");
    soundEffect.play();
    clearInterval(this.moveInterval);
    this.srcX = 185;
    this.isDead = true;
    //this.enemycount -=;
};

function collision(a, b){
    return a.drawX <= b.drawX + b.width &&
        a.drawX >= b.drawX &&
        a.drawY <= b.drawY + b.height &&
        a.drawY > b.drawY;
}

if (enemycount == 0){
    alert("WELL DONE");

    // confirm('Congrats \n Level Complete!!! \n Play Again')location.reload();
}

What I am looking to do is when the there are no more enemies I was looking to add an if statement similar to: if(enemycount === 0){confirm('Congratulations You Win \\n Play Again?') window.location.reload();}

Answer 1

Use setInterval which will periodically check page-reload condition

 enemycount = 10; setInterval(() => { if(enemycount <=0) location='https://example.com'; console.log('check', enemycount); enemycount--; }, 500) 

Answer 2

The enemycount value is in global scope. Change this.enemycount ==> enemycount;

And you need to check the response of the confirm prompt that you are triggering.

Ideally you need to so something like this

var enemycount = 5;

    document.getElementById('counter').addEventListener('click',function(){
        enemycount--;
      die();
    })

    function die() {
      if(enemycount === 0){
        doContinue();
      }
    }

    function doContinue() {
        var resp = confirm('Congratulations You Win \n Play Again?') 
      if (resp) {
        window.location.reload();
      } else {
        //stay in the same window
      }

    }