Javascript / html5游戏

时间:2015-04-27 16:41:46

标签: javascript jquery html5

我正在创建我的第一个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());
    }
});

0 个答案:

没有答案
相关问题