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

最新推荐文章于 2022-11-27 09:09:38 发布

马马也

最新推荐文章于 2022-11-27 09:09:38 发布

阅读量1.2k

点赞数 1

分类专栏： Phaser 游戏开发文章标签： Phaser 游戏开发

本文链接：https://blog.csdn.net/machi1/article/details/98988839

版权

Phaser 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

游戏开发

3 篇文章 0 订阅

订阅专栏

一.简介

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

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

二.代码

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

<!doctype html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Phaser游戏实例</title>
        <!--引入phaser-->
        <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>

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

效果：

QQ:1224881150 欢迎交流~

马马也

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5游戏框架Phaser实例一（完成官方例子）

一.简介在开始先简单介绍一下phaser吧，phaser是一个H5游戏框架，并且编写的游戏可以简便的移植到微信上，它的语法比较简单明了，目前最新的版本是Pharser 3,官方说明Pharser将实现3D游戏效果，但以目前的文档来看还未实现，所以可以先用Pharser 2编写一些游戏。下面安利一下一个学习Phaser的网站：Phaser小站二.代码这个程序是官方的一个实例程序，素材...
复制链接

扫一扫