学习 Phaser.js HTML5游戏开发-DAY3
学习 Phaser.js HTML5游戏开发-DAY3
tonglei0429
发布于 2019-07-22 13:58:14
发布于 2019-07-22 13:58:14
今天学习一个打飞机的效果，先上图。
1. 图片资源（背景、前景、小飞机）
2. 还是先把基本框架堆起来，创建好背景、前景、飞机、方向键控制飞机
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>万事屋-Phaser.js-Day3</title>
</head>
<body>
<script type="text/javascript" src="../../../libs/phaser.min.js"></script>
<script type="text/javascript">
var game = new Phaser.Game(640, 400, Phaser.AUTO, 'game');
var PhaserGame = function () {
this.foreground = null;
this.background = null;
this.player = null;
this.cursors = null;
this.speed = 300;
};
PhaserGame.prototype = {
init: function () {
this.game.renderer.renderSession.roundPixels = true;
this.physics.startSystem(Phaser.Physics.ARCADE);
},
preload: function () {
this.load.image('background', 'assets/back.png');
this.load.image('foreground', 'assets/fore.png');
this.load.image('player', 'assets/ship.png');
},
create: function () {
this.background = this.add.tileSprite(0, 0, this.game.width, this.game.height, 'background');
this.background.autoScroll(-40, 0);
this.player = this.add.sprite(64, 200, 'player');
this.physics.arcade.enable(this.player);
this.player.body.collideWorldBounds = true;
this.foreground = this.add.tileSprite(0, 0, this.game.width, this.game.height, 'foreground');
this.foreground.autoScroll(-60, 0);
this.cursors = this.input.keyboard.createCursorKeys();
},
update: function () {
this.player.body.velocity.set(0);
if (this.cursors.left.isDown) {
this.player.body.velocity.x = -this.speed;
}
else if (this.cursors.right.isDown) {
this.player.body.velocity.x = this.speed;
}
if (this.cursors.up.isDown) {
this.player.body.velocity.y = -this.speed;
}
else if (this.cursors.down.isDown) {
this.player.body.velocity.y = this.speed;
}
}
};
game.state.add('Game', PhaserGame, true);
</script>
</body>
</html>3. 构建基本的子弹对象，fire 方法用来初始化子弹实例，update方法用来绘制子弹轨迹
在 <script></script> 节点中添加
var Bullet = function (game, key) {
Phaser.Sprite.call(this, game, 0, 0, key);
this.texture.baseTexture.scaleMode = PIXI.scaleModes.NEAREST;
this.anchor.set(0.5);
this.checkWorldBounds = true;
this.outOfBoundsKill = true;
this.exists = false;
this.tracking = false;
this.scaleSpeed = 0;
};
Bullet.prototype = Object.create(Phaser.Sprite.prototype);
Bullet.prototype.constructor = Bullet;
Bullet.prototype.fire = function (x, y, angle, speed, gx, gy) {
gx = gx || 0;
gy = gy || 0;
this.reset(x, y);
this.scale.set(1);
this.game.physics.arcade.velocityFromAngle(angle, speed, this.body.velocity);
this.angle = angle;
this.body.gravity.set(gx, gy);
};
Bullet.prototype.update = function () {
if (this.tracking) {
this.rotation = Math.atan2(this.body.velocity.y, this.body.velocity.x);
}
if (this.scaleSpeed > 0) {
this.scale.x += this.scaleSpeed;
this.scale.y += this.scaleSpeed;
}
};4. 构建可以发射子弹的武器对象
var Weapon = {};
Weapon.SingleBullet = function (game) {
Phaser.Group.call(this, game, game.world, 'Single Bullet', false, true, Phaser.Physics.ARCADE);
this.nextFire = 0;
this.bulletSpeed = 600;
this.fireRate = 100;
for (var i = 0; i < 64; i++) {
this.add(new Bullet(game, 'bullet5'), true);
}
return this;
};
Weapon.SingleBullet.prototype = Object.create(Phaser.Group.prototype);
Weapon.SingleBullet.prototype.constructor = Weapon.SingleBullet;
Weapon.SingleBullet.prototype.fire = function (source) {
if (this.game.time.time < this.nextFire) { return; }
var x = source.x + 10;
var y = source.y + 10;
this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
this.nextFire = this.game.time.time + this.fireRate;
};5. 按空格键发射子弹，也就是调用 Weapon.fire 方法
在 create 方法中添加
this.weapon = new Weapon.SingleBullet(this.game);
this.weapon.visible = true;在 update 方法中添加
if (this.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
this.weapon.fire(this.player);
}6. 完成后效果如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读