javascript - 低图形 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

现在，当程序尝试生成敌人时，它会卡住，即使它只应该生成 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。