学习 Phaser.js HTML5游戏开发-DAY2
学习 Phaser.js HTML5游戏开发-DAY2
tonglei0429
发布于 2019-07-20 16:25:35
发布于 2019-07-20 16:25:35
今天尝试充实前一天的内容，增加场景的变化，增加时间处理。
第一步，搭建框架＋准备素材
<!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);至此，一个可以跟随主角移动的场景就开发完成了
最终效果如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读