我正在创建我的第一个html / javascript游戏。我正在使用附魔图书馆,因为这是我的学校导师告诉我开始使用的。
我有2个问题,我真的很挣扎。这个游戏中的火球不会显示出来。而且消防员的形象不会移动车道。我才开始学习这个。我将采取的任何指导。
// Start enchant.js
enchant();
window.onload = function () {
// Starting point
var game = new Game(1082, 768);
game.preload('res/BG.png',
'res/firefighter.gif',
'res/fireball.png',
'res/Hit.mp3',
'res/bgm.mp3');
game.fps = 30;
game.scale = 1;
game.onload = function () {
// Once Game finish loading
console.log("Hi, Fire!");
var scene = new SceneGame();
game.pushScene(scene);
}
window.scrollTo(0, 0);
game.start();
};
/**
* SceneGame
*/
var SceneGame = Class.create(Scene, {
/**
* The main gameplay scene.
*/
initialize: function () {
var game, label, bg, firefighter, fireballGroup;
// Call superclass constructor
Scene.apply(this);
// Access to the game singleton instance
game = Game.instance;
label = new Label('SCORE<br>0');
label.x = 9;
label.y = 32;
label.color = 'white';
label.font = '16px strong';
label.textAlign = 'center';
label._style.textShadow = "-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black";
this.scoreLabel = label;
bg = new Sprite(1082, 768);
bg.image = game.assets['res/BG.png'];
// Firefighter
firefighter = new Firefighter();
firefighter.image = game.assets['res/firefighter.gif'];
firefighter.x = game.width / 2 - firefighter.width / 2;
firefighter.y = 600;
fireballGroup = new Group();
this.fireballGroup = fireballGroup;
this.addChild(bg);
this.addChild(fireballGroup);
this.addChild(firefighter);
this.addChild(label);
this.addEventListener(Event.TOUCH_START, this.handleTouchControl);
this.addEventListener(Event.ENTER_FRAME, this.update);
// Instance variables
this.generateFireTimer = 0;
this.scoreTimer = 0;
this.score = 0;
this.bgm = game.assets['res/bgm.mp3']; // Add this line
// Start BGM
this.bgm.play();
},
handleTouchControl: function (evt) {
console.log(lane)
var laneWidth, lane;
laneWidth = 1082 / 6;
lane = Math.floor(evt.x / laneWidth);
lane = Math.max(Math.min(2, lane), 0);
this.firefighter.switchToLaneNumber(lane);
},
update: function (evt) {
// Score increase as time pass
this.scoreTimer += evt.elapsed * 0.001;
if (this.scoreTimer >= 0.5) {
this.setScore(this.score + 1);
this.scoreTimer -= 0.5;
}
// Check if it's time to create a new set of obstacles
this.generateFireTimer += evt.elapsed * 0.001;
if (this.generateIceTimer >= 0.5) {
var Fire;
this.generateFireTimer -= 0.5;
Fire = new fire(Math.floor(Math.random() * 3));
this.fireballGroup.addChild(Fire);
}
// Check collision
for (var i = this.fireballGroup.childNodes.length - 1; i >= 0; i--) {
var Fire;
ice = this.fireballGroup.childNodes[i];
if (Fire.intersect(this.firefighter)) {
var game;
game = Game.instance;
game.assets['res/Hit.mp3'].play();
this.iceGroup.removeChild(ice);
this.bgm.stop();
game.replaceScene(new SceneGameOver(this.score));
break;
}
}
// Loop BGM
if (this.bgm.currentTime >= this.bgm.duration) {
this.bgm.play();
}
},
setScore: function (value) {
this.score = value;
this.scoreLabel.text = 'SCORE<br>' + this.score;
}
});
// firefighter
var Firefighter = Class.create(Sprite, {
// The player character.
initialize: function () {
// 1 - Call superclass constructor
Sprite.apply(this, [215, 150]);
this.image = Game.instance.assets['res/firefighter.gif'];
// 2 - Animate
this.animationDuration = 0;
this.addEventListener(Event.ENTER_FRAME, this.updateAnimation);
},
updateAnimation: function (evt) {
this.animationDuration += evt.elapsed * 0.001;
if (this.animationDuration >= 0.25) {
this.frame = (this.frame + 1) % 2;
this.animationDuration -= 0.25;
}
},
switchToLaneNumber: function (lane) {
var targetX = 541 - this.width / 2 + (lane - 1) * 90;
this.x = targetX;
}
});
// Fire Ball
var Fire = Class.create(Sprite, {
// The obstacle that the fire fighter must avoid
initialize: function (lane) {
// Call superclass constructor
Sprite.apply(this, [480, 490]);
this.image = Game.instance.assets['res/fireball.png'];
this.rotationSpeed = 0;
this.setLane(lane);
this.addEventListener(Event.ENTER_FRAME, this.update);
},
setLane: function (lane) {
var game, distance;
game = Game.instance;
distance = 90;
this.rotationSpeed = Math.random() * 100 - 50;
this.x = game.width / 2 - this.width / 2 + (lane - 1) * distance;
this.y = -this.height;
this.rotation = Math.floor(Math.random() * 360);
},
update: function (evt) {
var ySpeed, game;
game = Game.instance;
ySpeed = 300;
this.y += ySpeed * evt.elapsed * 0.001;
this.rotation += this.rotationSpeed * evt.elapsed * 0.001;
if (this.y > game.height) {
this.parentNode.removeChild(this);
}
}
});
/**
* SceneGameOver
*/
var SceneGameOver = Class.create(Scene, {
initialize: function (score) {
var gameOverLabel, scoreLabel;
Scene.apply(this);
this.backgroundColor = 'black';
gameOverLabel = new Label("GAME OVER<br>Nice Try <br>Tap to Restart");
gameOverLabel.x = 8;
gameOverLabel.y = 128;
gameOverLabel.color = 'white';
gameOverLabel.font = '32px strong';
gameOverLabel.textAlign = 'center';
scoreLabel = new Label('SCORE<br>' + score);
scoreLabel.x = 9;
scoreLabel.y = 32;
scoreLabel.color = 'white';
scoreLabel.font = '16px strong';
scoreLabel.textAlign = 'center';
this.addChild(gameOverLabel);
this.addChild(scoreLabel);
this.addEventListener(Event.TOUCH_START, this.touchToRestart);
},
touchToRestart: function (evt) {
var game = Game.instance;
game.replaceScene(new SceneGame());
}
});