学习 Phaser.js HTML5游戏开发-DAY2

最新推荐文章于 2020-06-29 10:34:53 发布

chenjinfeng1994

最新推荐文章于 2020-06-29 10:34:53 发布

阅读量169

点赞数

原文链接：https://my.oschina.net/tonglei0429/blog/703819

版权

本文详细介绍使用Phaser.js游戏引擎开发2D游戏的过程，包括物理环境设置、资源预加载、角色创建、按键响应、碰撞检测及动画实现，同时演示如何创建动态场景，如移动平台和背景变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天尝试充实前一天的内容，增加场景的变化，增加时间处理。

第一步，搭建框架＋准备素材

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>万事屋-Phaser.js-Day2</title>
</head>
<body>
  <h1>学习用phaser.js开发游戏－第二天</h1>
  <div id="game"></div>

  <script type="text/javascript" src="../libs/phaser.min.js"></script>
  <script type="text/javascript">
    var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update });

    function init() {
    }

    function preload() {
    }

    function create() {
    }

    function update() {
    }

  </script>
</body>
</html>

第二步，初始化物理环境＋预加载图片资源

在 init 方法中添加

game.physics.startSystem(Phaser.Physics.ARCADE);
game.physics.arcade.gravity.y = 800;

在 preload 方法中添加

game.load.image('background', 'assets/background.png');
game.load.image('grass-platform', 'assets/grass-platform.png');
game.load.image('ice-platform', 'assets/ice-platform.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

第三步，在场景增加背景图片和台阶

增加背景图片，在 create 方法中添加

this.add.sprite(0, 0, 'background');

创建台阶组并增加台阶

game.platforms = this.add.physicsGroup();
game.platforms.create(0, 64, 'ice-platform');
game.platforms.create(200, 180, 'grass-platform');
game.platforms.create(400, 296, 'ice-platform');
game.platforms.create(600, 412, 'grass-platform');

效果如下

由于有重力环境，台阶默认会掉下来，下面代码用来固定台阶

platforms.setAll('body.allowGravity', false);
platforms.setAll('body.immovable', true);

第四步，创建角色＋按键响应＋碰撞事件

与第一天的方式一样，create 方法中添加

player = game.add.sprite(320, 432, 'dude');
game.physics.arcade.enable(player);

player.body.collideWorldBounds = true;
player.body.setSize(20, 32, 5, 16);

player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('turn', [4], 20, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);

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

update 方法中添加

game.physics.arcade.collide(player, platforms, onCollided, null, this);
var standing = player.body.blocked.down || player.body.touching.down;
player.body.velocity.x = 0;

if (game.cursors.left.isDown) {
  player.body.velocity.x = -200;
  player.play('left');
}
else if (game.cursors.right.isDown) {
  player.body.velocity.x = 200;
  player.play('right');
}
else {
  player.animations.stop();
}

if (standing && game.cursors.up.isDown && game.time.time > jumpTimer) {
    player.body.velocity.y = -500;
    jumpTimer = game.time.time + 750;
}

第五步，让台阶动起来＋增加不同台阶的效果，让冰台阶变滑

在 create 方法中添加

platforms.setAll('body.velocity.x', 100);

在 onCollide 方法中添加

if (platform.key === 'ice-platform') {
  player.body.x -= platform.body.x - platform.body.prev.x;
}

在 update 中添加

platforms.forEach(function(platform) {
  if(platform.body.velocity.x < 0 && platform.x <= -160) platform.x = 640;
  if(platform.body.velocity.x > 0 && platform.x >= 640) platform.x = -160;
}, game);

第六步，让场景更生动

修改create，改变场景背景

game.stage.backgroundColor = '#2f9acc';
sky = this.add.tileSprite(0, 0, 640, 480, 'clouds');
sky.fixedToCamera = true;
game.add.sprite(0, 396, 'trees');

...

game.camera.follow(player);

增加场景高度及各组件的位置，最后在 update 方法中添加，

sky.tilePosition.y = -(game.camera.y * 0.7);

至此，一个可以跟随主角移动的场景就开发完成了

最终效果如下：

http://gintama.vip/examples-phaser/day2.html

转载于:https://my.oschina.net/tonglei0429/blog/703819