phaser.js入门篇

最新推荐文章于 2023-05-05 23:19:12 发布

明天去哪

最新推荐文章于 2023-05-05 23:19:12 发布

阅读量6.4k

点赞数

本文链接：https://blog.csdn.net/u014451076/article/details/51499564

版权

js框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

基础知识

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>Test Phaser</title>
   <script src="js/phaser.js"></script>
   <style>
      #container{ height:600px; width: 600px; margin: 10px auto; outline: 3px solid #f00; overflow: hidden;}
   </style>
</head>
<body>
   <!-- 如果不指定phaser的容器,会默认挂在body下 -->
   <div id="container"></div>
   <script>
      //------------------创建游戏---------------
      // 画布wh
      // renderer:渲染方式, Phaser.CANVAS,Phaser.WEBGL,Phaser.AUTO
      // parent:存放画布元素的容器
      // state:游戏场景;transparent:画布元素是否透明,默认不透明;
      // antialias:是否开启抗锯齿模式;phCon:物理引擎配置
      // new Phaser.Game(width, height, renderer, parent, state, transparent, antialias,physicsConfig);
      var game = new Phaser.Game(300, 400, Phaser.AUTO, 'container', state);
      // true表示暂停
      // game.paused = false;
      // game.add; //对游戏工厂的引用
      // game.camera
      // game.input 游戏中的用户交互事件的引用
      // game.load 游戏资源加载模块的引用
      // game.scale 游戏缩放模块的引用
      // game.sound
      // game.stage
      // game.world
      // game.particles 游戏粒子系统的引用
      // game.physics
      // game.state 游戏场景管理对象的引用

      //------------------创建场景-------------------
      // 场景管理对象Phaser.StateManager
      // init()
      // preload() 加载游戏资源
      // create 创建游戏显示对象或注册资源
      // update()
      // render()
      // 五个函数的执行顺序,从上到下
      function state( ) {
         this.init = function () {};
         this.preload = function () {};
         this.create = function () {};
         this.update = function () {};
         this.render = function () {};
      }
      //------------------管理场景-----------------
      // 添加场景
      game.state.add('state', state);
      // 启动场景
      game.state.start('state');

      //------------------资源加载-----------------
      // 资源加载对象Phaser.Loader
      // 资源加载必须写在preload方法中
      // image(key, url)
      // spritesheet(key, url, frameWidht, frameHeight) //加载的图片由多张大小相同的图片合成
      // atlas(key, url, atlasURL, atlasData, format) //atlasURL,atlasData来描述小图片的信息,与spritesheet不同的地方,小图尺寸可以不同

      // audio(key, url, autoDecode)
      // autdiosprite(key, url, jsonURL, jsonData, autoDecode)

      // text()
      // xml()
      // binary()

      // 当某个资源加载完成时触发
      // game.load.onFileComplete.add(function(){})
      // game.load.process 表示所有资源的加载进度,百分制
      // 当所有资源加载完成时触发
      // game.load.onLoadComplete.add(function(){})

      //---------------------舞台---------------------
      // 舞台对象Phaser.Stage
      // game.stage.setBackgroundColor(backgroundColor); //改变舞台背景颜色
      function state(game) {
         this.create = function () {
            game.stage.setBackgroundColor(0xff0000);
         }
      }
      //----------------------世界--------------------
      // 世界对象Phaser.World
      // game.world.setBounds(x, y, width, height) //设置世界的边界大小
      //---------------------摄像机------------------
      // Phaser.Camera //原点在左上角
      // game.camera.x = 100;
      // game.camera.y = 100
      // game.camera.focusOn(disObj);
      // game.camera.focusOnXY(x, y)
      // game.camera.follow(target) //跟随
      function state(game) {

         var jiqimao;
         this.preload = function () {
            game.load.image('bg', 'assets/bg.jpg');
            game.load.image('jiqimao', 'assets/jiqimao.png');
         }
         this.create = function () {
            game.world.setBounds(0, 0, 2000, 600);
            game.add.image(0, 0, 'bg');
            jiqimao = game.add.image(200, 300, 'jiqimao');//创建一个机器猫
            jiqimao.anchor.set(0.5, 0.5);

            game.input.onDown.add(function(){
               game.camera.focusOn(jiqimao);
            });

            game.camera.follow(jiqimao);
         }
         this.update = function () {
            var keys = game.input.keyboard.createCursorKeys();
            if(keys.right.isDown) game.camera.x += 1;
            else if (keys.left.isDown) game.camera.x -= 1;
            else if (keys.up.isDown) game.camera.y -= 1;
            else if (keys.down.isDown) game.camera.y += 1;

            jiqimao.x += 1;
         }
      }
      // -------------------缩放控制--------------------
      // Phaser.ScaleManager
      // 三种模式: EXACT_FIT 缩放到父元素的大小,SHOW_ALL, USER_SCALE自定义缩放
      // game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
      function state(game) {
         this.init = function () {
            game.scale.pageAlignHorizontally = true ; //水平居中
            game.scale.pageAlignVertically = true;

            //game.scale.scaleMode =  Phaser.ScaleManager.EXACT_FIT;
            //game.scale.scaleMode =  Phaser.ScaleManager.SHOW_ALL;
            game.scale.scaleMode =  Phaser.ScaleManager.USER_SCALE;
            game.scale.setUserScale(0.5, 0.5);
         }
         this.preload = function () {
            game.load.image('jiqimao', 'assets/jiqimao.png');
         }
         this.create = function () {
            game.add.image(game.width/2, game.height/2, 'jiqimao').anchor.set(0.5, 0.5);
         }
      }
   </script>
</body>
</html>

实例(进度加载)

<!--index.html-->
<!DOCTYPE html>
<head>
    <meta content="width=device-width, user-scalable=no" name="viewport">
    <meta charset="utf-8">
    <title>Flappy Bird</title>
    <style>
        #container canvas {
            margin: 0 auto;
        }
    </style>
    <script src="js/phaser.js"></script>
    <script src="js/boot.js"></script>
    <script src="js/loader.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        var game = new Phaser.Game(320, 505, Phaser.AUTO, 'container');
        game.state.add('boot', bootState);
        game.state.add('loader', loaderState);
        game.state.start('boot');
    </script>
</body>
</html>

<!--boot.js-->
var bootState = function (game) {
    this.preload = function () {
       game.load.image('loading', 'assets/loading.gif');
    }
    this.create = function () {
       game.state.start('loader');
    }
}

<!--loader.js-->
var loaderState = function (game) {
    this.init = function () {
        // 添加图片
        var sprite = game.add.image(game.world.centerX, game.world.centerY, 'loading');
        // 设置图片锚点
        sprite.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.preload = function () {
        game.load.image('loading', 'assets/loading1.gif');
        game.load.onFileComplete.add(function(progress){
            progressText.text = progress + '%';
        });
    }
}

明天去哪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
phaser.js入门篇

基础知识<!DOCTYPE html><head> <meta charset="utf-8"> <title>Test Phaser</title> <script src="js/phaser.js"></script> <style> #container{ height:600px; width: 600px; margin: 10px auto; ou
复制链接

扫一扫