H5游戏框架phaser实例二（附上传到服务器的教程）

Love The Way You Lie 2021-10-30 04:44 204阅读 0赞

由于最近有事，先贴出来游戏地址，之后会补发教程：[http://139.9.200.70:8080/myGame/index.html][http_139.9.200.70_8080_myGame_index.html]（由于域名还在备案过程中，现在只能通过ip访问）

先贴出源码：

<!doctype html>
    <html>
        <head>
            <meta charset = "utf-8">
            <title>Phaser游戏实例</title>
            
            <script src = "js/phaser.min.js" type = "text/javascript"></script>
        </head>
        <body>
            
            <script type = "text/javascript">
                //创建游戏对象
                var game = new Phaser.Game(800, 600, Phaser.CANVAS, '');
                //游戏的场景集合
    			game.states = {};
                //对游戏进行适配
    			game.states.boot = {
                    preload: function(){
                        game.load.image('preloader', 'assets/preloader.gif');
                    },
                    create: function(){
                        game.state.start('load');
                    }
    			};
    
                //进行加载的场景
                game.states.load = {
                    preload: function(){
                        //创建加载条
                        var preloader = game.add.sprite(game.width/2-420/2, game.height/2-19/2, 'preloader');
                        preloader.scale.setTo(2, 2);
                        //preloader.anchor.set(0.5);
                        //加载资源
                        //将星星加载到游戏引擎中
                        game.load.image('star', 'assets/star.png');
                        game.load.image('sky', 'assets/sky.png');
                        game.load.image('ground', 'assets/platform.png');
                        //加载一个动画，坐标是每一个的，记得运算
                        game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
                        game.load.spritesheet('baddie', 'assets/baddie.png', 32, 32);
                        game.load.image('diamond', 'assets/diamond.png');
                        game.load.image('firstaid', 'assets/firstaid.png');
                        game.load.spritesheet('replaybutton', 'assets/replaybutton.png', 80, 30);
                        game.load.spritesheet('sharebutton', 'assets/sharebutton.png', 80, 30);
                        game.load.spritesheet('startbutton', 'assets/startbutton.png', 100, 40);
                        game.load.image('heart', 'assets/heart.png');
                    },
                    create: function(){
                        game.state.start('start');
                    }
                };
    
                //开始场景
                game.states.start = {
                    create: function(){
                        game.add.image(0, 0, 'sky');
                        game.add.button(game.width/2-50, game.height/2-20, 'startbutton', this.startClick, this, 1, 1, 0);
                    },
                    startClick: function(){
                        game.state.start('play');
                    }
                };
    
                //游戏进行场景
                //组名
                var stars;
                var platforms;
                var player;
                var score = 0;
                var scoreText;
                var monsters;
                //代表方向键的输入
                var cursors;
                var left = 1;
                var firstaid;
                var heart1;
                var diamond;
                var heart2;
                var s = 1;
                game.states.play = {
                    create: function(){
                        //打开物理引擎，phaser中内置了三种物理引擎，这是其中之一，这是开启游戏当中的物理引擎
                        game.physics.startSystem(Phaser.Physics.ARCADE);
                        game.add.sprite(0, 0, 'sky')
                        //左上角的位置为（0，0)
                        //创建一个组
                        platforms = game.add.group();
                        //给组开启物理引擎
                        platforms.enableBody = true;
                        //在组中创建一个对象
                        var ground2 = platforms.create(400, 400, 'ground');
                        ground2.body.immovable = true;
                        var ground3 = platforms.create(-150, 200, 'ground');
                        ground3.body.immovable = true;
                        //返回一个对象，game.world.height是这个世界的高度
                        ground1 = platforms.create(0, game.world.height-64, 'ground');
                        //scale是对对象进行缩放，横坐标、纵坐标分别缩放为两倍
                        ground1.scale.setTo(2, 2);
                        //开启地面的物理引擎
                        //game.physics.arcade.enable(ground1);
                        //将地面设置为不能移动
                        ground1.body.immovable = true;
                        player = game.add.sprite(32, game.world.height-150, 'dude');
                        //打开小人的物理引擎
                        game.physics.arcade.enable(player);
                        //enable之后对象就有body属性，通过gravity设置重力
                        player.body.gravity.y = 300;
                        //使小人不能掉出边界
                        player.body.collideWorldBounds = true;
                        //为小人添加动画，第一个参数为动画名，第二个参数是动画的帧数，第三个参数是每隔10秒播放一次，第四个参数是一直循环
                        player.animations.add('left', [0, 1, 2, 3], 10, true);
                        player.animations.add('right', [5, 6, 7, 8], 10, true);
                        //将方向键赋给cursors
                        cursors = game.input.keyboard.createCursorKeys();
    
                        stars = game.add.group();
                        stars.enableBody = true;
                        for(var i = 0; i < 12; i++){
                            var star = stars.create(i*70, 0, 'star');
                            star.body.gravity.y = 300;
                            //bounce设置星星的弹性系数
                            star.body.bounce.y = 0.7 + Math.random() * 0.2;
                        }
    
                        //创建文本，前两个参数为位置，第三个参数是文本内容，第四个参数是样式
                        scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
                        
                        //创建怪兽
                        monsters = game.add.group();
                        monsters.enableBody = true;
                        for(var i = 1; i < 4; i++){
                            var monster = monsters.create(i*180, 0, 'baddie');
                            monster.body.gravity.y = 300;
                            //不能出边界
                            monster.body.collideWorldBounds = true;
                            monster.body.bounce.y = 0.5;//跳跃反弹计算
                            //enemy_left.body.gravity.y = 300;//跳跃重力值
                            //enemy_left.body.collideWorldBounds = true;//敌人与边界进行碰撞开启检测
                            //设置动画
                            monster.animations.add('baddie');
                            //开启动画
                            monster.animations.play('baddie',8,true); 
                            //获取当前怪物的x坐标
                            nowX = monster.x;
                            //添加动画，其中倒数第二个参数是该动画重复的次数
                            game.add.tween(monster).to({x:nowX-165},2000,null,true,0,Number.MAX_VALUE,true);
                            
                        }
    
                        //添加急救包
                        var x = Math.round(Math.random()*730+32);
                        firstaid = game.add.sprite(x, 0, 'firstaid');
                        game.physics.arcade.enable(firstaid);
                        firstaid.body.collideWorldBounds = true;
                        firstaid.body.bounce.y = 0.2;
                        firstaid.body.gravity.y = 300;
    
                        //添加生命值
                        heart1 = game.add.sprite(game.width-60, 10, 'heart');
    
                    },
                    update: function(){
                        //小人和地面之间的碰撞检测
                        game.physics.arcade.collide(player, platforms);
                        game.physics.arcade.collide(stars, platforms);
                        game.physics.arcade.collide(monsters, platforms);
                        game.physics.arcade.collide(firstaid, platforms);
                        game.physics.arcade.collide(diamond, platforms);
                        //overlap也是碰撞检验，不过在碰撞时会调用一个函数
                        game.physics.arcade.overlap(player, stars, this.collectStars, null, this);
                        game.physics.arcade.overlap(player, monsters, this.reduce, null, this);
                        game.physics.arcade.overlap(player, firstaid, this.aid, null, this);
                        game.physics.arcade.overlap(player, diamond, this.final, null, this);
                        console.log(score);
                        //如果左键按下，速度为150
                        if(cursors.left.isDown){
                            //velocity是速度的意思
                            player.body.velocity.x = -150;
                            player.play('left');
                        }else if(cursors.right.isDown){
                            player.body.velocity.x = 150;
                            player.play('right');
                        }else{
                            //让小人静止
                            player.body.velocity.x = 0;
                            //让小人在第四帧
                            player.frame = 4;
                        }
                        //当向上键按下且着地的时候才能起跳
                        if(cursors.up.isDown&& player.body.touching.down){
                            player.body.velocity.y = -350;
                        }
                        if(score == 120){
                            if(s == 1){
                                var x = Math.round(Math.random()*730+32);
                                diamond = game.add.sprite(x, 0, 'diamond');
                                game.physics.arcade.enable(diamond);
                                diamond.body.collideWorldBounds = true;
                                diamond.body.bounce.y = 0.2;
                                diamond.body.gravity.y = 300;
                                s = s-1;
                            }
                        }
                    },
                    //收集星星
                    collectStars: function(player, stars){
                        stars.kill();
                        score += 10;
                        scoreText.text = "score: " + score;
                    },
                    reduce: function(){
                        left = left - 1;
                        console.log(left);
                        if(left == 0){
                            game.state.start('over');
                        }
                        else{
                            heart2.kill();
                        }
                    },
                    aid: function(){
                        left = left + 1;
                        heart2 = game.add.sprite(game.width-32, 10, 'heart');
                        firstaid.kill();
                        console.log(left);
                    },
                    final: function(){
                        score = score+80;
                        diamond.kill();
                        game.state.start('over');
                    }
    
                };
    
                //游戏结束场景
                game.states.over = {
                    create: function(){
                        game.add.image(0, 0, 'sky');
                        game.add.text(game.width/2-40, 300, 'score: ' + score , { fontSize: '40px', fill: '#000' });
                        game.add.button(game.width/2-30, game.height/2+50, 'replaybutton', this.replayClick, this, 0, 0, 1);
                        left = 1;
                        score = 0;
                        s = 1;
                    },
                    replayClick: function(){
                        game.state.start('play');
                    }
                };
    
                /*
                //加载资源的函数
                function preload(){
                    //将星星加载到游戏引擎中
                    game.load.image('star', 'assets/star.png');
                    game.load.image('sky', 'assets/sky.png');
                    game.load.image('ground', 'assets/platform.png');
                    //加载一个动画，坐标是每一个的，记得运算
                    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
                }
                //组名
                var stars;
                var platforms;
                var player;
                var score = 0;
                var scoreText;
                //代表方向键的输入
                var cursors; 
                //创建游戏资源的函数
                function create(){
                    //打开物理引擎，phaser中内置了三种物理引擎，这是其中之一，这是开启游戏当中的物理引擎
                    game.physics.startSystem(Phaser.Physics.ARCADE);
                    game.add.sprite(0, 0, 'sky')
                    //左上角的位置为（0，0)
                    //创建一个组
                    platforms = game.add.group();
                    //给组开启物理引擎
                    platforms.enableBody = true;
                    //在组中创建一个对象
                    var ground2 = platforms.create(400, 400, 'ground');
                    ground2.body.immovable = true;
                    var ground3 = platforms.create(-150, 200, 'ground');
                    ground3.body.immovable = true;
                    //返回一个对象，game.world.height是这个世界的高度
                    ground1 = platforms.create(0, game.world.height-64, 'ground');
                    //scale是对对象进行缩放，横坐标、纵坐标分别缩放为两倍
                    ground1.scale.setTo(2, 2);
                    //开启地面的物理引擎
                    //game.physics.arcade.enable(ground1);
                    //将地面设置为不能移动
                    ground1.body.immovable = true;
                    player = game.add.sprite(32, game.world.height-150, 'dude');
                    //打开小人的物理引擎
                    game.physics.arcade.enable(player);
                    //enable之后对象就有body属性，通过gravity设置重力
                    player.body.gravity.y = 300;
                    //使小人不能掉出边界
                    player.body.collideWorldBounds = true;
                    //为小人添加动画，第一个参数为动画名，第二个参数是动画的帧数，第三个参数是每隔10秒播放一次，第四个参数是一直循环
                    player.animations.add('left', [0, 1, 2, 3], 10, true);
                    player.animations.add('right', [5, 6, 7, 8], 10, true);
                    //将方向键赋给cursors
                    cursors = game.input.keyboard.createCursorKeys();
    
                    stars = game.add.group();
                    stars.enableBody = true;
                    for(var i = 0; i < 12; i++){
                        var star = stars.create(i*70, 0, 'star');
                        star.body.gravity.y = 300;
                        //bounce设置星星的弹性系数
                        star.body.bounce.y = 0.7 + Math.random() * 0.2;
                    }
    
                    //创建文本，前两个参数为位置，第三个参数是文本内容，第四个参数是样式
                    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
                }
                //游戏循环的函数
                function update(){
                    //小人和地面之间的碰撞检测
                    game.physics.arcade.collide(player, platforms);
                    game.physics.arcade.collide(stars, platforms);
                    //overlap也是碰撞检验，不过在碰撞时会调用一个函数
                    game.physics.arcade.overlap(player, stars, collectStars, null, this);
                    //如果左键按下，速度为150
                    if(cursors.left.isDown){
                        //velocity是速度的意思
                        player.body.velocity.x = -150;
                        player.play('left');
                    }else if(cursors.right.isDown){
                        player.body.velocity.x = 150;
                        player.play('right');
                    }else{
                        //让小人静止
                        player.body.velocity.x = 0;
                        //让小人在第四帧
                        player.frame = 4;
                    }
                    //当向上键按下且着地的时候才能起跳
                    if(cursors.up.isDown&& player.body.touching.down){
                        player.body.velocity.y = -350;
                    }
                }
                function collectStars(player, stars){
                    stars.kill();
                    score += 10;
                    scoreText.text = "score: " + score;
                }
                */
    
                //添加游戏场景
                game.state.add('boot', game.states.boot);
                game.state.add('load', game.states.load);
                game.state.add('start', game.states.start);
                game.state.add('play', game.states.play);
                game.state.add('over', game.states.over);
    
                //开启游戏场景
                game.state.start('boot');
    
            </script>
        </body>  
    </html>

[http_139.9.200.70_8080_myGame_index.html]: http://139.9.200.70:8080/myGame/index.html