低圖形HTML5遊戲，使瀏覽器凍結

Question

所以我有以下的遊戲代碼：

var canvasBg = document.getElementById('canvasBg'); 
var ctxBg = canvasBg.getContext('2d'); 
var canvasJet = document.getElementById('canvasJet'); 
var ctxJet = canvasJet.getContext('2d'); 
var canvasEnemy = document.getElementById('canvasEnemy'); 
var ctxEnemy = canvasEnemy.getContext('2d'); 

var jet1 = new Jet(); 
var gameWidth = canvasBg.width; 
var gameHeight = canvasBg.height; 
var isPlaying = false; 
var requestAnimFrame = window.requestAnimationFrame || 
         window.webkitRequestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         window.msRequestAnimationFrame || 
         window.oRequestAnimationFrame; 

/* 
* Spawning 
*/ 
var spawnInterval; 
var totalEnemies = 0; 
var enemies = []; 
var spawnRate = 2000; 
var spawnAmount = 2; 



/* 
* Spirte 
*/ 
var imgSprite = new Image(); 
imgSprite.src = 'images/Game/spirte.png'; 
imgSprite.addEventListener('load',init, false); 






// main functions 

function init() { 
    drawBg(); 
    startLoop(); 
    document.addEventListener('keydown',checkKeyDown,false); 
    document.addEventListener('keyup',checkKeyUp,false); 
} 

function spawnEnemy(n) {  
    for (var i = 0; i < n;){ 
     enemies[totalEnemies] = new Enemy(); 
     totalEnemies++; 
    } 

} 

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

} 

function startSpawningEnemies() { 
    stopSpawningEnemies(); 
    spawnInterval = setInterval(function() {spawnEnemy(spawnAmount);}, spawnRate); 
} 
function stopSpawningEnemies() { 
    clearInterval(spawnInterval); 
} 

function loop() { 
    if (isPlaying) { 
     jet1.draw(); 
     drawAllEnemies(); 
     requestAnimFrame(loop); 
    } 
} 

function startLoop() { 
    isPlaying = true; 
    loop(); 
    startSpawningEnemies(); 
} 
function stopLoop() { 
    isPlaying = false; 
    stopSpawningEnemies(); 
} 
function drawBg() { 
    /* 
    * Steps: hent fra cordinate fra srcX og srcY og tag alt fra canvas height og width 
    */ 
    //sprite picture 
    var srcX = 0; 
    var srcY = 0; 
    //Canvas 
    var drawX = 0; 
    var drawY = 0; 
    ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight); 
} 

function clearCTXbg() { 
    ctxBg.clearRect(0,0,gameWidth,gameHeight); 
} 







// Jet functions 

function Jet() { 
    this.srcX = 25; 
    this.srcY = 530; 
    this.width = 100; 
    this.height = 50 ; 
    this.speed = 2; 
    this.drawX = 220; 
    this.drawY = 200; 
    this.isUpKey = false; 
    this.isDownKey = false; 
    this.isRightnKey = false; 
    this.isLeftKey = false; 
} 

Jet.prototype.draw = function() { 
    clearCTXJet(); 
    this.checkDirection(); 
    ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); 

}; 
Jet.prototype.checkDirection = function() { 
    if(this.isUpKey){ 
     this.drawY -= this.speed; 
    } 
    if(this.isRightKey){ 
     this.drawX += this.speed; 
    } 
    if(this.isDownKey){ 
     this.drawY += this.speed; 
    } 
    if(this.isLeftKey){ 
     this.drawX -= this.speed; 
    } 

}; 

function clearCTXJet() { 
    ctxJet.clearRect(0,0,gameWidth,gameHeight); 
} 

// end of jet functions 


// enemy functions 



function Enemy() { 
    this.srcX = 25; 
    this.srcY = 575; 
    this.width = 100; 
    this.height = 50 ; 
    this.speed = 2; 
    this.drawX = Math.round(Math.random() * 1000) + gameWidth; 
    this.drawY = Math.round(Math.random() * 100); 

} 


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

}; 


function clearCTXEnemy() { 
    ctxEnemy.clearRect(0,0,gameWidth,gameHeight); 
} 



// end enemyfunction 



// event functions 
function checkKeyDown(e) { 
    var keyID = e.keyCode || e.which; 

    if (keyID === 38 || keyID === 87) { // 38 arrow up 87 == W key 
     jet1.isUpKey = true; 
     e.preventDefault(); 
    } 
    if (keyID === 39 || keyID === 68) { // 39 Right 68 == D key 
     jet1.isRightKey = true; 
     e.preventDefault(); 
    } 
    if (keyID === 40 || keyID === 83) { // 40 = down up 87 == S key 
     jet1.isDownKey = true; 
     e.preventDefault(); 
    } 
    if (keyID === 37 || keyID === 65) { // 37 left arrow 65 == A key 
     jet1.isLeftKey = true; 
     e.preventDefault(); 
    } 
} 

function checkKeyUp(e) { 
    var keyID = e.keyCode || e.which; 

    if (keyID === 38 || keyID === 87) { // 38 arrow up 87 == W key 
     jet1.isUpKey = false; 
     e.preventDefault(); 
    } 
    if (keyID === 39 || keyID === 68) { // 39 Right 68 == D key 
     jet1.isRightKey = false; 
     e.preventDefault(); 
    } 
    if (keyID === 40 || keyID === 83) { // 40 = down up 87 == S key 
     jet1.isDownKey = false; 
     e.preventDefault(); 
    } 
    if (keyID === 37 || keyID === 65) { // 37 left arrow 65 == A key 
     jet1.isLeftKey = false; 
     e.preventDefault(); 
    } 
} 

// end of event functions 

現在，當過程序試圖產卵敵人凍結eventhough其唯一的2個敵人的假設產卵。

你可以看看它做什麼的：

Link to my game

也只是爲了在這裏到底是我的HTML5Game.php：

<?php 
?> 

<div style="width: 100%; height: 100%" > 

<div id="inner" ></div> 


<canvas id="canvasBg" width="800" height="500"> 
</canvas> 
<canvas id="canvasEnemy" width="800" height="500"> 
</canvas> 
<canvas id="canvasJet" width="800" height="500"> 
</canvas> 
<script type="text/javascript" src="Javascripts/game.js"></script> 




</div> 

Answer 1

function spawnEnemy(n) { 
    for (var i = 0; i < n;){ 
     enemies[totalEnemies] = new Enemy(); 
     totalEnemies++; 
    } 
} 

你忘了i++最後。現在，它基本上是一個無限循環，因爲i總是0。