Phaser.js
2017年9月21日

Phaser.js开发躲避外星人游戏(终结篇)

作者 admin

又到了写博客的时候，不免又跟各位老哥絮叨絮叨，哈哈，今天给大家带来的是一款用phaser 开发的躲避外星人游戏，如果你想下载 传送入口在这里：

https://github.com/894658027/HTML5-Games/tree/master/PhaserJs/eludeAliens

话不多说我们直接上代码，

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>躲避外星人</title>
    <link href=”css/ste.css” rel = “stylesheet” type=”text/css”>
    <style>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #icon_1{position: absolute;top: 1px;left: 1%;z-index: 997;display: none;}
#icon_2{position: absolute;top: 1px;right: 1%; z-index: 996;display: none;}
        #bg-canvas{margin:auto; position: absolute; z-index:-10;width: 100vw;top:0px;left:0px;height:100vh;}
        @media (min-width: 1365px) and (max-width: 1400px) {
#bg-canvas{height:110vh;}
}
         @media (min-width: 1400px) and (max-width: 1510px) {
#bg-canvas{height:125vh;}
}
        @media (min-width: 1025px) and (max-width: 1364px) {
#bg-canvas{height:104vh;}
        }
         @media (min-width: 767px) and (max-width: 991px) {
         #bg-canvas{height:100vh;}
        }
        @media (min-width: 1510px) and (max-width: 1920px) {
         #bg-canvas{height:110vh;}
        }
    </style>
    <script src=”js/jquery.min.js”></script>
    <script src=”js/create.js”></script>
    <script src=”js/common.js”></script>
    <script src=”js/stbg.js”></script>
    <script src=”js/phaser.min.js”></script>
</head>
<body>
    <div id=”container”>
    </div>
<divid=”instructions”style=”display: none;”>
<divclass=”select”style=”display: none;”>
</div>
<divid=”instruction1″style=”display: block;”>
<divclass=”indent”style=”margin-top: 20px;”>
请观察星星的状态或运动方式,找出状态或运动不同的星星,迅速点击屏幕,找对有惊喜！
</div>
<divclass=”start”></div>
</div>
<divid=”instruction2″>
<divclass=”indent”>
请观察星星的状态或运动方式,找出状态或运动不同的星星,迅速点击屏幕,找对有惊喜！
</div>
<divclass=”instruct-confirm”></div>
</div>
</div>
    <div id=”icon_1″><img src=”image/help2.png”></div>
<divid=”icon_2″><ahref=”index.html”><imgsrc=”image/reset1.png”></a></div>
     <canvas id=”bg-canvas” width=”1024″ height=”720″ ></canvas>
    <script>
    window.handleResize = function () {
if (window.innerWidth<window.innerHeight*1024/768) {
$(“#container”).css({
“height”:”auto”,
“width”:”99.9vw”
});
}
};
window.addEventListener(‘resize’, handleResize, false);
window.handleResize();
    // 背景控件
    $(document).ready(function () {
    $(“#icon_1”).click(function () {
        $(“#instructions”).show();
        $(“#container”).hide();
    });
    $(“.start”).click(function () {
        $(“#container”).show();
        $(“#instructions”).hide();
    });
});
function canvasBgone() {
    var config = {
        barWidth: 5,
        deltaTime: 400,
        showTimes: 8
    };
    if (window.stbg) stbg.removeSelf();
    window.stbg = new STBG(config);
}
function canvasBgtwo() {
    var config = {
        barWidth: 10,
        deltaTime: 400,
        showTimes: 8
    };
    if (window.stbg) stbg.removeSelf();
    window.stbg = new STBG(config);
}
function canvasBgthree() {
    var config = {
        barWidth: 15,
        deltaTime: 400,
        showTimes: 8
    };
    if (window.stbg) stbg.removeSelf();
    window.stbg = new STBG(config);
}
function canvasBgfour() {
    var config = {
        barWidth: 20,
        deltaTime: 400,
        showTimes: 8
    };
    if (window.stbg) stbg.removeSelf();
    window.stbg = new STBG(config);
}
// var timer;
// var total = 0;
document.body.style.margin = “0px”;
onload = function () {
    /////////////////////////////SET///////////////////////////////////////////
    var loading;
    var progressText;
    ////////////////////////////BOOTSTATE//////////////////////////////////////
    var bootState = function bootState(game) {
        this.preload = function () {
            game.load.image(‘loading’, ‘./assets/preloader.gif’);
        };
        this.create = function () {
            // game.stage.backgroundColor = ‘#2384e7’;
            game.state.start(‘loader’);
        };
    };
    ////////////////////////////LOADERSTATE////////////////////////////////////
    var loaderState = function loaderState(game) {
        this.init = function () {
            loading = game.add.image(game.world.centerX, game.world.centerY, ‘loading’);
            loading.anchor = { x: 0.5, y: 0.5 };
            progressText = game.add.text(game.world.centerX, game.world.centerY + 30, ‘0%’, { fill: ‘#fff’, fontSize: ’16px’ });
            progressText.anchor = { x: 0.5, y: 0.5 };
            //自动检测游戏窗口变化
            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            this.scale.pageAlignHorizontally = true;
            this.scale.pageAlignVertically = true;
        };
        this.preload = function () {
            game.load.audio(‘gameMusic’, ‘assets/gameMusic.mp3’); //游戏背景音乐
            // game.load.image(‘background’,’assets/background.png’);
            game.load.image(‘proloadPanel’, ‘assets/proloadPanel.png’);
            game.load.image(‘around_h’, ‘assets/around_h.png’);
            game.load.image(‘around_v’, ‘assets/around_v.png’);
            game.load.spritesheet(‘enemy’, ‘assets/baddie.png’, 32, 32);
            game.load.spritesheet(‘player’, ‘assets/dude.png’, 32, 48);
            game.load.image(‘logo’, ‘assets/logo.png’);
            game.load.image(‘button’, ‘assets/restart.png’);
            game.load.image(‘scorePanel’, ‘assets/scorePanel.png’);
            game.load.image(‘gameTimer’, ‘assets/gameTimer.png’);
            game.load.spritesheet(‘snowflakes’, ‘assets/snowflakes.png’, 17, 17);
            game.load.spritesheet(‘snowflakes_large’, ‘assets/snowflakes_large.png’, 64, 64);
            game.load.onFileComplete.add(function (progress) {
                progressText.text = progress + ‘%’;
            });
            canvasBgfour();
        };
        this.create = function () {
            // 雪花背景
            // snowBg();
            game.music = this.add.audio(‘gameMusic’, 1, true);
            game.music.play(”, 0, 1, true);
            loading.kill();
            progressText.destroy();
            var text = game.add.text(0, game.world.height / 15, ‘电脑端：键盘(上下左右),移动端：触摸,操作超人进行躲避敌人!’, { fill: ‘#fff’, fontSize: ’35px’ });
            text.setShadow(3, 3, ‘rgba(0,0,0,0.8)’, 2);
            text.x = (game.world.width – text.width) / 2;
            text.alpha = 1;
            //黑色横幅
            var bar = game.add.graphics();
            bar.beginFill(0x000000, 0.5);
            bar.drawRect(0, 25, 1280, 100);
            // 文字内容
            var styleText = { font: “bold 32px Arial”, fill: “#fff”, boundsAlignH: “center”, boundsAlignV: “middle” };
            var scorePanel = game.add.sprite(game.world.centerX / 2, 180, ‘proloadPanel’);
            // logo按钮
            game.add.tween(text).from({ alpha: 0 }, 4000, Phaser.Easing.Bounce.Out, true);
            var sprite = game.add.sprite(game.world.centerX, game.world.centerY + 55, ‘logo’);
            sprite.anchor.set(0.5);
            game.add.tween(sprite).from({ y: -200 }, 2000, Phaser.Easing.Bounce.Out, true);
            sprite.inputEnabled = true;
            sprite.events.onInputDown.add(function () {
                game.state.start(‘main’);
            }, this);
        };
    };
    //////////////////////////MAINSTATE////////////////////////////////
    var mainState = function mainState(game) {
        var score = 1;
        var timeStr;
        var timeStrs;
        var enemy = [];
        var enemys;
        var enemy;
        var player;
        var around;
        var cursors;
        var playerV = 150;
        this.create = function () {
            // snowBg();
            $(“#icon_1”).show();
            $(“#icon_2”).show();
            game.physics.startSystem(Phaser.ARCADE);
            enemys = game.add.group();
            enemys.enableBody = true;
            enemy = game.add.sprite(0, 0, ‘baddie’);
            enemy.animations.add(‘baddie’, [0, 1, 2, 3], 4, true);
            enemy.animations.play(‘baddie’, 8, true);
            enemys.create(32, 32, ‘enemy’);
            around = game.add.group();
            around.enableBody = true;
            around.create(0, 0, ‘around_h’);
            around.create(game.world.width – 30, 0, ‘around_h’);
            around.create(0, 0, ‘around_v’);
            around.create(0, game.world.height – 30, ‘around_v’);
            player = game.add.sprite(0, 0, ‘player’);
            game.physics.arcade.enable(player);
            player.x = (game.world.width – player.width) / 2;
            player.y = (game.world.height – player.height) / 2;
            player.scale.setTo(0.7);
            player.inputEnabled = true;
            player.input.enableDrag(false);
            loopMove(enemys.getChildAt(0), 3, 3);
            var scoreTimer = game.add.sprite(game.world.centerX / 1.4, 50, ‘gameTimer’);
            // 计时统计面板
            timeStr = game.add.text(0, game.world.height / 9 – 5, “当前时间:” + score, { fill: ‘#fff’, fontSize: ’32px’ });
            timeStrs = game.add.text(-200, game.world.height / 9, score, { fill: ‘#fff’, fontSize: ’32px’ });
            game.time.events.add(Phaser.Timer.SECOND * 10, twoEnemys, this);
            game.time.events.add(Phaser.Timer.SECOND * 20, threeEnemys, this);
            game.time.events.add(Phaser.Timer.SECOND * 30, fourEnemys, this);
            game.time.events.add(Phaser.Timer.SECOND * 40, fiveEnemys, this);
            game.time.events.add(Phaser.Timer.SECOND * 50, sixEnemys, this);
            game.time.events.add(Phaser.Timer.SECOND * 60, sevenEnemys, this);
            player.animations.add(‘left’, [0, 1, 2, 3], 10, true);
            //添加动画，左执行1-4帧，10帧每秒速度播放，循环播放
            player.animations.add(‘right’, [5, 6, 7, 8], 10, true);
            //添加动画，右执行1-4帧，10帧每秒速度播放，循环播放
        };
        function twoEnemys() {
            enemys.create(32, 32, ‘enemy’);
            loopMove(enemys.getChildAt(1), 3, 3);
            console.log(“第二个敌人”);
        }
        function threeEnemys() {
            enemys.create(32, 32, ‘enemy’);
            loopMove(enemys.getChildAt(2), 3, 3);
            player.scale.setTo(0.6);
            enemys.getChildAt(0).scale.setTo(0.6, 0.6);
            enemys.getChildAt(1).scale.setTo(0.6, 0.6);
            enemys.getChildAt(2).scale.setTo(0.6, 0.6);
            // player.y = 660;
            canvasBgfour();
            console.log(“第三个敌人”);
        }
        function fourEnemys() {
            enemys.create(32, 32, ‘enemy’);
            loopMove(enemys.getChildAt(3), 3, 3);
            player.scale.setTo(0.5);
            enemys.getChildAt(0).scale.setTo(0.5, 0.5);
            enemys.getChildAt(1).scale.setTo(0.5, 0.5);
            enemys.getChildAt(2).scale.setTo(0.5, 0.5);
            enemys.getChildAt(3).scale.setTo(0.5, 0.5);
            // player.y = 665;
            canvasBgthree();
            console.log(“第四个敌人”);
        }
        function fiveEnemys() {
            canvasBgtwo();
            enemys.create(32, 32, ‘enemy’);
            loopMove(enemys.getChildAt(4), 3, 3);
            player.scale.setTo(0.4);
            enemys.getChildAt(0).scale.setTo(0.4, 0.4);
            enemys.getChildAt(1).scale.setTo(0.4, 0.4);
            enemys.getChildAt(2).scale.setTo(0.4, 0.4);
            enemys.getChildAt(3).scale.setTo(0.4, 0.4);
            enemys.getChildAt(4).scale.setTo(0.4, 0.4);
            // player.y = 670;
            console.log(“第五个敌人”);
        }
        function sixEnemys() {
            canvasBgone();
            enemys.create(32, 32, ‘enemy’);
            loopMove(enemys.getChildAt(5), 3, 3);
            player.scale.setTo(0.3);
            enemys.getChildAt(0).scale.setTo(0.3, 0.3);
            enemys.getChildAt(1).scale.setTo(0.3, 0.3);
            enemys.getChildAt(2).scale.setTo(0.3, 0.3);
            enemys.getChildAt(3).scale.setTo(0.3, 0.3);
            enemys.getChildAt(4).scale.setTo(0.3, 0.3);
            enemys.getChildAt(5).scale.setTo(0.3, 0.3);
            // player.y = 675;
            console.log(“第六个敌人”);
        }
        function sevenEnemys() {
            canvasBgone();
            enemys.create(32, 32, ‘enemy’);
            loopMove(enemys.getChildAt(6), 3, 3);
            player.scale.setTo(0.2);
            enemys.getChildAt(0).scale.setTo(0.2, 0.2);
            enemys.getChildAt(1).scale.setTo(0.2, 0.2);
            enemys.getChildAt(2).scale.setTo(0.2, 0.2);
            enemys.getChildAt(3).scale.setTo(0.2, 0.2);
            enemys.getChildAt(4).scale.setTo(0.2, 0.2);
            enemys.getChildAt(5).scale.setTo(0.2, 0.2);
            enemys.getChildAt(6).scale.setTo(0.2, 0.2);
            // player.y = 680;
            console.log(“第七个敌人”);
        }
        this.update = function () {
            cursors = game.input.keyboard.createCursorKeys(); //键盘事件
            if (player.alive) {
                player.body.velocity.x = 0; //加速度默认值0
                player.body.velocity.y = 0;
                if (cursors.left.isDown) {
                    player.body.velocity.x = -playerV;
                    player.animations.play(‘left’);
                } else if (cursors.right.isDown) {
                    player.body.velocity.x = +playerV;
                    player.animations.play(‘right’);
                }
                else if (cursors.up.isDown) {
                    player.body.velocity.y = -playerV;
                    // player.animations.play(‘right’);
                }else if (cursors.down.isDown) {
                    player.body.velocity.y = +playerV;
                    // player.animations.play(‘right’);
                }
                else {
                        player.animations.stop();
                        player.frame = 4; //第四帧
                    }
                game.physics.arcade.overlap(player, around, function () {
                    game.state.start(‘theEnd’);
                    // player.body.collideWorldBounds = true;
                });
                game.physics.arcade.overlap(player, enemys, function () {
                    game.state.start(‘theEnd’);
                });
            }
        };
        this.render = function () {
            // game.debug.text(‘Time until event: ‘ + timer.duration.toFixed(1), 350, 128,{fill:’#fff’,fontSize:’48px’});
            // game.debug.text(‘当前时间: ‘ + total + “s”, 350, 128,{fill:’#fff’,fontSize:’48px’});
            if (score > 0) {
                score += 0.01;
                timeStr.text = score.toFixed(1);
                timeStrs.text = score.toFixed(1);
            }
            ts = timeStrs.text;
// 修改计时得分
            timeStr.x = (game.world.width – timeStr.width) / 2 + 105;
        };
    };
    //////////////////////////THEENDSTATE 结束界面///////////////////////////////////////
    var theEndState = function theEndState(game) {
        this.create = function () {
            var scoreTimer = game.add.sprite(game.world.centerX / 1.9, 50, ‘scorePanel’);
            var styles = { font: “35px Arial”, fill: “#fff”, align: “center” };
            var text = game.add.text(0, game.world.height / 4 + 28, ”, styles);
            text.text = ts;
            text.x = (game.world.width – text.width) / 2 + 95;
            var button = game.add.button(0, -200, ‘button’, function () {
                location.reload();
            });
            button.x = (game.world.width – button.width) / 2 + 20;
            game.add.tween(button).to({ y: game.world.centerY }, 2000, Phaser.Easing.Bounce.Out, true);
        };
    };
    ///////////////////////////PUBLIC/////////////////////////////////////////////////
    var game = new Phaser.Game(1024, 660, Phaser.AUTO, ‘container’, ”, true);
    game.state.add(‘boot’, bootState);
    game.state.add(‘loader’, loaderState);
    game.state.add(‘main’, mainState);
    game.state.add(‘theEnd’, theEndState);
    game.state.start(‘boot’);
    ///////////////////////////FUNCTION////////////////////////////////////////////////
    function loopMove(obj, x, y) {
        game.time.events.loop(Phaser.Timer.SECOND / 70, function () {
            if (obj.x <= 30) {
                x = -x;
            }
            if (obj.y <= 30) {
                y = -y;
            }
            //有效活动范围
            if (obj.x > game.world.width – 30 – obj.width) {
                x = -x;
            }
            if (obj.y > game.world.height – 30 – obj.height) {
                y = -y;
            }
            // obj.x = obj.x + x;
            obj.x = obj.x + x;
            obj.y = obj.y + y;
        }, this);
    }
};
    </script>
</body>
</html>
今天又是代码慢慢的一天，老哥们再见，
标签Phaser.js

68 条评论在 “Phaser.js开发躲避外星人游戏(终结篇)”

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注