Phaser引擎开发:Phaser基础入门_Phaser引擎概述v1

Phaser引擎概述

Phaser是一个开源的HTML5游戏开发框架,广泛用于创建2D游戏。它基于Pixi.js,一个高性能的2D渲染引擎,旨在简化游戏开发过程,使开发者能够专注于游戏逻辑和创意。Phaser支持多种游戏类型,但特别适合用于开发动作游戏,因为它提供了丰富的功能和灵活的API来处理游戏中的动画、物理、输入等关键要素。

什么是Phaser引擎?

Phaser引擎是一个使用JavaScript和TypeScript编写的2D游戏框架,它可以帮助开发者快速地创建和发布HTML5游戏。Phaser的核心优势在于其简单易用的API和强大的功能集,这些功能包括但不限于:

  • 精灵和动画:轻松创建和管理游戏中的精灵(sprites)和动画。

  • 物理引擎:内置了多个物理引擎,如Arcade Physics、P2 Physics和Matter.js,可以模拟复杂的物理效果。

  • 输入处理:支持鼠标、触摸屏和键盘输入,使游戏在不同设备上都能流畅运行。

  • 场景管理:简化了游戏的多场景管理,使得游戏结构更加清晰。

  • 音频支持:提供了对音频的全面支持,包括背景音乐和音效。

  • 加载资源:高效地加载游戏所需的图像、音频和JSON等资源。

  • 调试工具:内置了丰富的调试工具,帮助开发者快速定位和解决问题。

Phaser的历史

Phaser引擎最初由Richard Davey于2013年创建,自那时以来,它已经发展成为一个拥有庞大社区和丰富文档的游戏开发框架。Phaser 3是目前的最新版本,相比Phaser 2,它进行了大量的改进和优化,包括性能提升、API改进和更多的内置功能。

为什么选择Phaser?

选择Phaser引擎开发游戏的原因有很多:

  1. 易于上手:Phaser的API设计直观,文档丰富,适合初学者快速入门。

  2. 高性能:基于Pixi.js的渲染引擎,使得Phaser在不同设备上都能保持良好的性能。

  3. 社区支持:Phaser有一个活跃的社区,提供了大量的教程、示例和插件。

  4. 跨平台:支持Web、桌面和移动设备,使得游戏可以在多种平台上运行。

  5. 灵活性:Phaser提供了多种物理引擎和渲染模式,可以根据项目需求进行选择和配置。

安装Phaser引擎

通过CDN安装

最简单的方法是通过CDN(内容分发网络)直接在HTML文件中引入Phaser引擎。这种方式适合快速原型开发和简单的项目。


DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Phaser Gametitle>

  <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js">script>

head>

<body>

  <script>

    // 游戏代码将在这里编写

  script>

body>

html>

通过npm安装

对于大型项目或需要版本管理的项目,可以使用npm(Node Package Manager)来安装Phaser。首先,确保你已经安装了Node.js和npm。

  1. 创建一个新的项目目录并进入该目录:

    
    mkdir phaser-game
    
    cd phaser-game
    
    
  2. 初始化一个新的npm项目:

    
    npm init -y
    
    
  3. 安装Phaser:

    
    npm install phaser
    
    
  4. 创建一个index.html文件并引入Phaser:

    
    DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
      <meta charset="UTF-8">
    
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
      <title>Phaser Gametitle>
    
    head>
    
    <body>
    
      <script type="module">
    
        import Phaser from 'phaser';
    
        // 游戏代码将在这里编写
    
      script>
    
    body>
    
    html>
    
    

本地安装

你也可以将Phaser引擎下载到本地项目中,这样可以避免依赖CDN或网络连接。

  1. 下载Phaser引擎的最新版本并将其放在项目的lib目录中。

  2. index.html文件中引入本地的Phaser文件:

    
    DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
      <meta charset="UTF-8">
    
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
      <title>Phaser Gametitle>
    
      <script src="lib/phaser.min.js">script>
    
    head>
    
    <body>
    
      <script>
    
        // 游戏代码将在这里编写
    
      script>
    
    body>
    
    html>
    
    

创建第一个Phaser游戏

初始化游戏

要创建一个基本的Phaser游戏,首先需要初始化游戏对象。Phaser提供了一个构造函数来创建游戏实例,你可以在其中配置游戏的基本参数。


const config = {

  type: Phaser.AUTO, // 自动选择渲染模式(Canvas或WebGL)

  width: 800, // 游戏窗口的宽度

  height: 600, // 游戏窗口的高度

  scene: {

    preload: preload, // 预加载资源的函数

    create: create, // 创建游戏对象和初始设置的函数

    update: update // 游戏逻辑更新的函数

  }

};



const game = new Phaser.Game(config);



function preload() {

  // 预加载资源

}



function create() {

  // 创建游戏对象和初始设置

}



function update() {

  // 游戏逻辑更新

}

预加载资源

preload函数中,你可以加载游戏所需的资源,如图像、音频和JSON文件。Phaser提供了多种加载方法,例如load.imageload.audio


function preload() {

  this.load.image('background', 'assets/images/background.png'); // 加载背景图像

  this.load.image('player', 'assets/images/player.png'); // 加载玩家图像

  this.load.image('enemy', 'assets/images/enemy.png'); // 加载敌人图像

  this.load.audio('jump', 'assets/audio/jump.mp3'); // 加载跳跃音效

}

创建游戏对象

create函数中,你可以创建游戏中的各种对象,如精灵、文本和按钮。这些对象可以通过Phaser的API轻松地添加到游戏场景中。


function create() {

  // 创建背景

  this.add.image(400, 300, 'background').setDepth(-1); // 设置背景深度



  // 创建玩家

  this.player = this.physics.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true); // 玩家碰到边界时反弹



  // 创建敌人

  this.enemy = this.physics.add.sprite(700, 450, 'enemy');

  this.enemy.setCollideWorldBounds(true); // 敌人碰到边界时反弹



  // 创建地面

  this.ground = this.physics.add.sprite(400, 550, 'ground');

  this.ground.body.immovable = true; // 地面固定不动



  // 创建碰撞检测

  this.physics.add.collider(this.player, this.ground); // 玩家与地面碰撞

  this.physics.add.collider(this.enemy, this.ground); // 敌人与地面碰撞



  // 创建玩家控制

  this.cursors = this.input.keyboard.createCursorKeys(); // 创建键盘控制对象

}

更新游戏逻辑

update函数中,你可以编写游戏的主要逻辑,如玩家移动、敌人行为和碰撞检测。


function update() {

  // 玩家移动

  if (this.cursors.left.isDown) {

    this.player.setVelocityX(-160); // 向左移动

  } else if (this.cursors.right.isDown) {

    this.player.setVelocityX(160); // 向右移动

  } else {

    this.player.setVelocityX(0); // 停止移动

  }



  // 玩家跳跃

  if (this.cursors.up.isDown && this.player.body.touching.down) {

    this.player.setVelocityY(-330); // 跳跃

    this.sound.play('jump'); // 播放跳跃音效

  }



  // 敌人移动

  this.enemy.setVelocityX(-100); // 敌人向左移动



  // 敌人碰到边界时反弹

  if (this.enemy.x < 50) {

    this.enemy.setVelocityX(100); // 敌人向右移动

  } else if (this.enemy.x > 750) {

    this.enemy.setVelocityX(-100); // 敌人向左移动

  }

}

运行游戏

将上述代码保存到index.html文件中,然后在浏览器中打开该文件,你将看到一个简单的Phaser游戏。玩家可以通过方向键控制移动和跳跃,敌人会在屏幕上左右移动。

Phaser的基本概念

场景(Scenes)

Phaser中的场景是游戏的基本单元,每个场景都包含自己的加载、创建和更新逻辑。通过管理多个场景,可以使游戏结构更加清晰和模块化。


class BootScene extends Phaser.Scene {

  constructor() {

    super({ key: 'BootScene' });

  }



  preload() {

    this.load.image('logo', 'assets/images/phaser-logo.png');

  }



  create() {

    this.add.image(400, 300, 'logo').setScale(2);

    this.scene.start('MainScene'); // 开始主场景

  }

}



class MainScene extends Phaser.Scene {

  constructor() {

    super({ key: 'MainScene' });

  }



  preload() {

    // 加载资源

  }



  create() {

    // 创建游戏对象

  }



  update() {

    // 更新游戏逻辑

  }

}



const config = {

  type: Phaser.AUTO,

  width: 800,

  height: 600,

  scene: [BootScene, MainScene]

};



const game = new Phaser.Game(config);

精灵(Sprites)

精灵是游戏中的基本可视对象,可以是图像、动画或自定义图形。Phaser提供了丰富的API来创建和管理精灵。


function create() {

  this.player = this.physics.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true);



  // 创建动画

  this.anims.create({

    key: 'walk',

    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),

    frameRate: 10,

    repeat: -1

  });



  // 播放动画

  this.player.anims.play('walk', true);

}

物理引擎(Physics)

Phaser内置了多个物理引擎,如Arcade Physics、P2 Physics和Matter.js,可以模拟复杂的物理效果。Arcade Physics是最简单和性能最高的物理引擎,适合大多数2D游戏。


function create() {

  this.physics.add.sprite(100, 450, 'player');

  this.physics.add.sprite(700, 450, 'enemy');



  // 创建地面

  this.ground = this.physics.add.sprite(400, 550, 'ground');

  this.ground.body.immovable = true;



  // 创建碰撞检测

  this.physics.add.collider(this.player, this.ground);

  this.physics.add.collider(this.enemy, this.ground);

}

输入处理(Input)

Phaser支持多种输入方式,包括键盘、鼠标和触摸屏。你可以通过input对象来处理这些输入。


function create() {

  this.cursors = this.input.keyboard.createCursorKeys();

}



function update() {

  if (this.cursors.left.isDown) {

    this.player.setVelocityX(-160);

  } else if (this.cursors.right.isDown) {

    this.player.setVelocityX(160);

  } else {

    this.player.setVelocityX(0);

  }



  if (this.cursors.up.isDown && this.player.body.touching.down) {

    this.player.setVelocityY(-330);

    this.sound.play('jump');

  }

}

音频支持(Audio)

Phaser提供了对音频的全面支持,包括背景音乐和音效。你可以通过sound对象来加载和播放音频。


function preload() {

  this.load.audio('jump', 'assets/audio/jump.mp3');

}



function create() {

  this.jumpSound = this.sound.add('jump');

}



function update() {

  if (this.cursors.up.isDown && this.player.body.touching.down) {

    this.player.setVelocityY(-330);

    this.jumpSound.play();

  }

}

资源加载(Loading)

Phaser提供了一套强大的资源加载机制,可以轻松地加载各种类型的资源。你可以在preload函数中使用load方法来加载资源。


function preload() {

  this.load.image('background', 'assets/images/background.png');

  this.load.image('player', 'assets/images/player.png');

  this.load.image('enemy', 'assets/images/enemy.png');

  this.load.audio('jump', 'assets/audio/jump.mp3');

}

渲染模式(Rendering Modes)

Phaser支持两种渲染模式:Canvas和WebGL。你可以通过配置对象中的type属性来选择渲染模式。


const config = {

  type: Phaser.AUTO, // 自动选择渲染模式

  width: 800,

  height: 600,

  scene: {

    preload: preload,

    create: create,

    update: update

  }

};



const game = new Phaser.Game(config);

调试工具(Debug Tools)

Phaser内置了丰富的调试工具,可以帮助开发者快速定位和解决问题。例如,你可以使用physics.world对象来调试物理效果。


function create() {

  this.player = this.physics.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true);



  // 创建地面

  this.ground = this.add.sprite(400, 550, 'ground');

  this.physics.add.existing(this.ground);

  this.ground.body.immovable = true;



  // 创建碰撞检测

  this.physics.add.collider(this.player, this.ground);



  // 启用物理调试

  this.physics.world.createDebugGraphic();

  this.add.graphics().lineStyle(2, 0x00ff00).strokeRect(0, 0, 800, 600);

}

Phaser的高级功能

动画(Animations)

Phaser提供了强大的动画系统,可以轻松创建和播放动画。你可以使用anims.create方法来定义动画,并通过anims.play方法来播放动画。


function preload() {

  this.load.spritesheet('player', 'assets/images/player.png', { frameWidth: 32, frameHeight: 48 });

}



function create() {

  this.player = this.physics.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true);



  // 创建动画

  this.anims.create({

    key: 'walk',

    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),

    frameRate: 10,

    repeat: -1

  });



  // 播放动画

  this.player.anims.play('walk', true);

}

粒子系统(Particles)

Phaser的粒子系统可以用于创建各种视觉效果,如爆炸、火焰和烟雾。你可以通过add.particles方法来创建粒子发射器。


function create() {

  this.player = this.physics.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true);



  // 创建粒子发射器

  this.particles = this.add.particles('flame');



  this.emitter = this.particles.createEmitter({

    speed: { min: -100, max: 100 },

    scale: { start: 1, end: 0 },

    blendMode: 'ADD'

  });



  // 将粒子发射器绑定到玩家

  this.emitter.startFollow(this.player);

}

地图编辑器(Tiled Map Editor)

Phaser支持Tiled地图编辑器生成的地图文件。你可以使用load.tilemapTiledJSON方法来加载地图,并通过make.tilemap方法来创建地图对象。


function preload() {

  this.load.tilemapTiledJSON('map', 'assets/maps/level1.json');

  this.load.image('tiles', 'assets/images/tiles.png');

}



function create() {

  const map = this.make.tilemap({ key: 'map' });

  const tileset = map.addTileset('tiles', 'tiles');

  const layer = map.createLayer(0, tileset, 0, 0);



  // 创建碰撞检测

  layer.setCollisionByProperty({ collides: true });

  this.physics.add.collider(this.player, layer);

}

插件(Plugins)

Phaser支持插件系统,可以通过安装插件来扩展其功能。例如,你可以使用Phaser.Plugins来安装和使用第三方插件。插件可以提供额外的UI组件、物理效果、动画工具等,帮助你更高效地开发游戏。


import Phaser from 'phaser';

import {rexUI} from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';



class UIPluginScene extends Phaser.Scene {

  constructor() {

    super({ key: 'UIPluginScene' });

  }



  preload() {

    this.load.image('button', 'assets/images/button.png');

  }



  create() {

    // 添加UI插件

    this.rexUI = this.plugins.get('rexUI').add(this, {});



    // 创建按钮

    const button = this.rexUI.add.label({

      x: 400,

      y: 300,

      width: 200,

      height: 50,

      background: this.add.image(0, 0, 'button'),

      text: this.add.text(0, 0, 'Click Me', { fontSize: '20px', color: '#ffffff' }),

      space: {

        left: 10,

        right: 10,

        top: 10,

        bottom: 10

      }

    });



    // 添加点击事件

    button.setInteractive();

    button.on('pointerdown', () => {

      this.scene.start('GameScene'); // 点击按钮后切换到游戏场景

    });

  }

}



const config = {

  type: Phaser.AUTO,

  width: 800,

  height: 600,

  scene: [UIPluginScene, GameScene]

};



const game = new Phaser.Game(config);

粒子系统(Particles)

Phaser的粒子系统可以用于创建各种视觉效果,如爆炸、火焰和烟雾。你可以通过add.particles方法来创建粒子发射器,并使用createEmitter方法来配置粒子发射器的属性。


function create() {

  this.player = this.physics.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true);



  // 创建粒子发射器

  this.particles = this.add.particles('flame');



  this.emitter = this.particles.createEmitter({

    speed: { min: -100, max: 100 },

    scale: { start: 1, end: 0 },

    blendMode: 'ADD',

    lifespan: 1000, // 粒子的生命周期

    quantity: 5, // 每次发射的粒子数量

    frequency: 200 // 发射频率

  });



  // 将粒子发射器绑定到玩家

  this.emitter.startFollow(this.player);

}

地图编辑器(Tiled Map Editor)

Phaser支持Tiled地图编辑器生成的地图文件,这使得创建复杂的地图和关卡变得更加容易。你可以使用load.tilemapTiledJSON方法来加载地图文件,并通过make.tilemap方法来创建地图对象。然后,使用createLayer方法来创建地图层,并设置碰撞检测。


function preload() {

  this.load.tilemapTiledJSON('map', 'assets/maps/level1.json');

  this.load.image('tiles', 'assets/images/tiles.png');

}



function create() {

  const map = this.make.tilemap({ key: 'map' });

  const tileset = map.addTileset('tiles', 'tiles');

  const layer = map.createLayer(0, tileset, 0, 0);



  // 创建碰撞检测

  layer.setCollisionByProperty({ collides: true });

  this.physics.add.collider(this.player, layer);



  // 设置玩家的初始位置

  const spawnPoint = map.findObject("Objects", obj => obj.name === "SpawnPoint");

  if (spawnPoint) {

    this.player.setPosition(spawnPoint.x, spawnPoint.y);

  }

}

高级物理引擎(Advanced Physics Engines)

虽然Arcade Physics是最简单和性能最高的物理引擎,Phaser还支持P2 Physics和Matter.js,这两个引擎可以模拟更复杂的物理效果。例如,Matter.js支持软体物理和更真实的物理模拟。


function create() {

  // 使用Matter.js物理引擎

  this.matter.world.gravity.y = 0.8; // 设置重力



  // 创建玩家

  this.player = this.matter.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true);



  // 创建敌人

  this.enemy = this.matter.add.sprite(700, 450, 'enemy');

  this.enemy.setCollideWorldBounds(true);



  // 创建地面

  this.ground = this.matter.add.rectangle(400, 550, 800, 100, { isStatic: true });



  // 创建碰撞检测

  this.matter.add.collider(this.player, this.ground);

  this.matter.add.collider(this.enemy, this.ground);

}

场景管理(Scene Management)

Phaser的场景管理功能可以帮助你更好地组织游戏的不同部分,如加载场景、游戏玩法场景、菜单场景等。每个场景都可以有自己的加载、创建和更新逻辑,通过scene.start方法可以在不同场景之间切换。


class BootScene extends Phaser.Scene {

  constructor() {

    super({ key: 'BootScene' });

  }



  preload() {

    this.load.image('logo', 'assets/images/phaser-logo.png');

  }



  create() {

    this.add.image(400, 300, 'logo').setScale(2);

    this.scene.start('MainScene'); // 开始主场景

  }

}



class MainScene extends Phaser.Scene {

  constructor() {

    super({ key: 'MainScene' });

  }



  preload() {

    this.load.image('background', 'assets/images/background.png');

    this.load.image('player', 'assets/images/player.png');

    this.load.image('enemy', 'assets/images/enemy.png');

    this.load.image('ground', 'assets/images/ground.png');

    this.load.audio('jump', 'assets/audio/jump.mp3');

  }



  create() {

    // 创建背景

    this.add.image(400, 300, 'background').setDepth(-1);



    // 创建玩家

    this.player = this.physics.add.sprite(100, 450, 'player');

    this.player.setCollideWorldBounds(true);



    // 创建敌人

    this.enemy = this.physics.add.sprite(700, 450, 'enemy');

    this.enemy.setCollideWorldBounds(true);



    // 创建地面

    this.ground = this.physics.add.sprite(400, 550, 'ground');

    this.ground.body.immovable = true;



    // 创建碰撞检测

    this.physics.add.collider(this.player, this.ground);

    this.physics.add.collider(this.enemy, this.ground);



    // 创建玩家控制

    this.cursors = this.input.keyboard.createCursorKeys();

  }



  update() {

    // 玩家移动

    if (this.cursors.left.isDown) {

      this.player.setVelocityX(-160);

    } else if (this.cursors.right.isDown) {

      this.player.setVelocityX(160);

    } else {

      this.player.setVelocityX(0);

    }



    // 玩家跳跃

    if (this.cursors.up.isDown && this.player.body.touching.down) {

      this.player.setVelocityY(-330);

      this.sound.play('jump');

    }



    // 敌人移动

    this.enemy.setVelocityX(-100);



    // 敌人碰到边界时反弹

    if (this.enemy.x < 50) {

      this.enemy.setVelocityX(100);

    } else if (this.enemy.x > 750) {

      this.enemy.setVelocityX(-100);

    }

  }

}



const config = {

  type: Phaser.AUTO,

  width: 800,

  height: 600,

  scene: [BootScene, MainScene]

};



const game = new Phaser.Game(config);

调试工具(Debug Tools)

Phaser内置了丰富的调试工具,可以帮助开发者快速定位和解决问题。例如,你可以使用physics.world.createDebugGraphic方法来调试物理效果,或者使用cameras.main.setBounds方法来调试相机边界。


function create() {

  this.player = this.physics.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true);



  // 创建地面

  this.ground = this.add.sprite(400, 550, 'ground');

  this.physics.add.existing(this.ground);

  this.ground.body.immovable = true;



  // 创建碰撞检测

  this.physics.add.collider(this.player, this.ground);



  // 启用物理调试

  this.physics.world.createDebugGraphic();

  this.add.graphics().lineStyle(2, 0x00ff00).strokeRect(0, 0, 800, 600);



  // 启用相机调试

  this.cameras.main.setBounds(0, 0, 800, 600);

  this.cameras.main.startFollow(this.player);

}

性能优化(Performance Optimization)

Phaser提供了多种性能优化的方法,包括使用WebGL渲染模式、减少对象的创建和销毁、使用对象池等。合理地使用这些方法可以显著提高游戏的性能。


const config = {

  type: Phaser.WEBGL, // 使用WebGL渲染模式

  width: 800,

  height: 600,

  scene: {

    preload: preload,

    create: create,

    update: update

  }

};



const game = new Phaser.Game(config);



function preload() {

  this.load.image('background', 'assets/images/background.png');

  this.load.image('player', 'assets/images/player.png');

  this.load.image('enemy', 'assets/images/enemy.png');

  this.load.audio('jump', 'assets/audio/jump.mp3');

}



function create() {

  // 创建背景

  this.add.image(400, 300, 'background').setDepth(-1);



  // 创建玩家

  this.player = this.physics.add.sprite(100, 450, 'player');

  this.player.setCollideWorldBounds(true);



  // 创建敌人

  this.enemy = this.physics.add.sprite(700, 450, 'enemy');

  this.enemy.setCollideWorldBounds(true);



  // 创建地面

  this.ground = this.physics.add.sprite(400, 550, 'ground');

  this.ground.body.immovable = true;



  // 创建碰撞检测

  this.physics.add.collider(this.player, this.ground);

  this.physics.add.collider(this.enemy, this.ground);



  // 创建玩家控制

  this.cursors = this.input.keyboard.createCursorKeys();

}



function update() {

  // 玩家移动

  if (this.cursors.left.isDown) {

    this.player.setVelocityX(-160);

  } else if (this.cursors.right.isDown) {

    this.player.setVelocityX(160);

  } else {

    this.player.setVelocityX(0);

  }



  // 玩家跳跃

  if (this.cursors.up.isDown && this.player.body.touching.down) {

    this.player.setVelocityY(-330);

    this.sound.play('jump');

  }



  // 敌人移动

  this.enemy.setVelocityX(-100);



  // 敌人碰到边界时反弹

  if (this.enemy.x < 50) {

    this.enemy.setVelocityX(100);

  } else if (this.enemy.x > 750) {

    this.enemy.setVelocityX(-100);

  }

}

总结

Phaser引擎是一个功能强大且易于上手的HTML5游戏开发框架,适合初学者和有经验的开发者。通过其丰富的API和内置功能,你可以快速地创建和发布2D游戏。无论是简单的动作游戏还是复杂的平台游戏,Phaser都能提供强大的支持。希望本文档能够帮助你更好地理解和使用Phaser引擎,祝你游戏开发顺利!
在这里插入图片描述

你可能感兴趣的:(游戏开发2,html5,前端,html,游戏,ui)