所以我有以下游戏代码:
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 个敌人。
您可以查看它的作用:
也只是为了它的见鬼的是我的 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>