H5游戏框架Phaser实例一（完成官方例子）

﹏ヽ暗。殇╰゛Y 2021-11-04 12:34 693阅读 0赞

一.简介

在开始先简单介绍一下phaser吧，phaser是一个H5游戏框架，并且编写的游戏可以简便的移植到微信上，它的语法比较简单明了，目前最新的版本是Pharser 3,官方说明Pharser将实现3D游戏效果，但以目前的文档来看还未实现，所以可以先用Pharser 2编写一些游戏。

下面安利一下一个学习Phaser的网站：[Phaser小站][Phaser]

二.代码

这个程序是官方的一个实例程序，素材可以从官网上下载，所以我们直接贴代码了：

<!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, '', {
                    preload: preload,
                    create: create,
                    update: update
                });
                //加载资源的函数
                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;
                }
            </script>
        </body>  
    </html>

这个游戏主要完成了人物的动画移动、碰撞等

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hY2hpMQ_size_16_color_FFFFFF_t_70][]

QQ:1224881150 欢迎交流~

[Phaser]: https://www.phaser-china.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hY2hpMQ_size_16_color_FFFFFF_t_70]: /images/20211104/746807fe4bc54c60b818e61789fe02ff.png