如何在分數爲1000後增加啓動功能間隔？

Question

我正在嘗試製作一個JavaScript遊戲，在線上獲得了一些代碼，並且我正在嘗試將其改進爲我想要的，所以我希望間隔在得分達到1000之後更快。我嘗試了所有可能的最佳挖掘方式爲此，請幫助我優化我的代碼。遊戲區域函數中的start函數需要20毫秒的時間間隔。我做分數的計數，那麼當分數到達1000，我想在updateGame功能

function startGame() { 
    myGameArea = new gamearea(); 
    myGamePiece = new component(30, 30, "red", 10, 75); 
    myscore = new component("15px", "Consolas", "black", 220, 25, "text"); 
    myGameArea.start(); 
} 

function gamearea() { 
    this.canvas = document.createElement("canvas"); 
    this.canvas.width = 320; 
    this.canvas.height = 180;  
    document.getElementById("canvascontainer").appendChild(this.canvas); 
    this.context = this.canvas.getContext("2d"); 
    this.pause = false; 
    this.frameNo = 0; 
    this.start = function() { 
     this.interval = setInterval(updateGameArea, 20); 
    } 
    this.stop = function() { 
     clearInterval(this.interval); 
     this.pause = true; 
    } 
    this.clear = function(){ 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    } 
} 

function component(width, height, color, x, y, type) { 

    this.type = type; 
    if (type == "text") { 
     this.text = color; 
    } 
    this.score = 0; this.width = width; 
    this.height = height; 
    this.speedX = 0; 
    this.speedY = 0;  
    this.x = x; 
    this.y = y;  
    this.update = function() { 
     ctx = myGameArea.context; 
     if (this.type == "text") { 
      ctx.font = this.width + " " + this.height; 
      ctx.fillStyle = color; 
      ctx.fillText(this.text, this.x, this.y); 
     } else { 
      ctx.fillStyle = color; 
      ctx.fillRect(this.x, this.y, this.width, this.height); 
     } 
    } 
    this.crashWith = function(otherobj) { 
     var myleft = this.x; 
     var myright = this.x + (this.width); 
     var mytop = this.y; 
     var mybottom = this.y + (this.height); 
     var otherleft = otherobj.x; 
     var otherright = otherobj.x + (otherobj.width); 
     var othertop = otherobj.y; 
     var otherbottom = otherobj.y + (otherobj.height); 
     var crash = true; 
     if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { 
      crash = false; 
     } 
     return crash; 
    } 
} 

function updateGameArea() { 
    var x, y, min, max, height, gap; 
    for (i = 0; i < myObstacles.length; i += 1) { 
     if (myGamePiece.crashWith(myObstacles[i])) { 
      myGameArea.stop(); 
      document.getElementById("myfilter").style.display = "block"; 
      document.getElementById("myrestartbutton").style.display = "block"; 
      return; 
     } 
    } 
    if (myGameArea.pause == false) { 
     myGameArea.clear(); 
     myGameArea.frameNo += 1; 
     myscore.score +=1;   
     if (myGameArea.frameNo == 1 || everyinterval(150)) { 
      x = myGameArea.canvas.width; 
      y = myGameArea.canvas.height - 100; 
      min = 20; 
      max = 100; 
      height = Math.floor(Math.random()*(max-min+1)+min); 
      min = 50; 
      max = 100; 
      gap = Math.floor(Math.random()*(max-min+1)+min); 
      myObstacles.push(new component(10, height, "green", x, 0)); 
      myObstacles.push(new component(10, x - height - gap, "green", x, height + gap)); 
     } 
     for (i = 0; i < myObstacles.length; i += 1) { 
      myObstacles[i].x += -1; 
      myObstacles[i].update(); 
     } 
     myscore.text="SCORE: " + myscore.score; 
     if (myscore.score == 1000){ 
      this.start = function() { 
       this.interval = setInterval(updateGameArea, 10); 
      } 
     } 

     myscore.update(); 
     myGamePiece.x += myGamePiece.speedX; 
     myGamePiece.y += myGamePiece.speedY;  
     myGamePiece.update(); 
    } 
} 


startGame(); 

Answer 1

你需要明確停止舊區間運行，並開始一個新的settiing它增加的時間間隔。

if (myscore.score == 1000){ 
     this.stop(); // Stop the old interval 
     // Start a new interval with the new timing 
     this.interval = setInterval(updateGameArea, 10); 
    }