问题描述:

So i have the following game code:

 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

Now when ever the program tries to spawn enemies it freezes eventhough its only 2 enemies its suppose to spawn.

you can check out what it does at:

Link to my game

Also just for the heck of it here is my 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>

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

You forgot the i++ at the end. Right now, it's basically an infinite loop since i is always 0.

相关阅读:
Top