This chapter covers some of the logic of the game scenario, including aircraft towing, boundary detection, firing bullets, and enemy aircraft collision detection.
Writing in the front
The aircraft battle footage comes from Phaser station: www.phaser-china.com/tutorial-de… The original text uses phaser2 to implement, this article uses Phaser3 to reconstruct the aircraft war again, in the actual combat to learn about phaser3 API source code: github.com/YUPENG12138…
1. Add the game scene and set the background plate to scroll
1. First add a Play scene; 2. Switch scenes when clicking the Start button; 3. Add the plane and the background, and set the background cyclic rolling to visually produce the feeling of the plane flying forward.
// plane/src/index.js.// In the start scene, the startButton is raised to jump to the game scene
startButton.on('pointerup', () => {
startButton.setFrame(1);
console.log('start game');
this.scene.start('play'); })...// Add play scene
gameSenceCenter.play = {
key: 'play',
create() {
// Add background
this.bg = this.add.tileSprite(0.0.this.game.config.width, this.game.config.height, 'bg').setOrigin(0);
// Introduce airplane elves
const plane = this.add.sprite(this.game.config.width / 2.100.'myplane');
// Create a flight frame animation
this.anims.create({
key: 'fly'.frames: this.anims.generateFrameNumbers('myplane', { start: 0.end: 3 }),
frameRate: 10.repeat: - 1
})
// The plane calls the flight animation
plane.anims.play('fly');
},
update() {
// Set vertical scrolling
/ / API link: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.TileSprite.html
this.bg.tilePositionY -= 1; }}... const config = {type: Phaser.AUTO,
width: 240.height: 400.// Add the new Play scene
scene: [gameSenceCenter.boot, gameSenceCenter.start, gameSenceCenter.play],
};
Copy the code
2. Add planes to move to the bottom
Now that the plane is flying at the top, we need to make it fly automatically to the bottom after the game starts.
// plane/ SRC /index.js // plane call flight animation plane.anims.play('fly'); / / new supplement between dynamic effect / / API: https://photonstorm.github.io/phaser3-docs/Phaser.Tweens.TweenManager.html#add__anchor
this.tweens.add({
targets: plane,
y: this.game.config.height - plane.height,
duration: 1000,
});
Copy the code
3. Set up the scoring copy of aircraft towing and firing bullets
1. When the aircraft is flying at the bottom of automatic flight, we set the aircraft towing; 2. After entering the Play scene, the plane starts to fire bullets, and the scoring text is added in the upper left corner;
// Add the scoring text this.add.text(0, 0,'Score: 0', {color: '#ff0000', fontSize: '16px'}); // To ensure that the plane instance is accessible in both create and Update life cycles, we attach the plane instance to this; // use 'setInteractive ` method, is used to set the elves can enter configuration / / API link: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Sprite.html#setInteractive__anchor
// draggable: truePlane = this.add. Sprite (this.game.config.width / 2, 100,'myplane').setInteractive({ draggable: true}); . This.tweens. add({... onComplete: () => { this.plane.on('drag'.function(pointer, dragX, dragY) { this.x = dragX; this.y = dragY; }); }}); BeforeTime = 0; // Here we record an initial time to store the spawn time of each bullet this.beforeTime = 0; . // In the update life cycle, we create bullets // here we use the physics engine to handle bullet movement, so we need to add the physics engine configuration to the overall configurationupdate() { const time = new Date().getTime(); // Introduce bulletsif (time - this.beforeTime > 500) {
const bullet = this.add.sprite(this.plane.x, this.plane.y - this.plane.height / 2, 'mybullet'); this.beforeTime = time; / / add the bullet physics engine / / API link: https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Factory.html#existing__anchorthis.physics.add.existing(bullet); // After adding the Sprite to the physics engine, it is given a body object //setVelocity bullet movement speed / / API links: https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#setVelocity__anchor
bullet.body.setVelocity(0, -300);
}
this.bg.tilePositionY -= 1;
},
const config = {
type: Phaser.AUTO,
width: 240,
height: 400,
scene: [gameSenceCenter.boot, gameSenceCenter.start, gameSenceCenter.play],
physics: {
default: 'arcade',}};Copy the code
4. Aircraft towing boundary detection
We found that we could drag it up here, but the plane would drag out our image, so let’s deal with that.
// Add the physics engine to the plane and set it to world collision detection // in the onComplete callbacksetCollideWorldBounds used to set the border collision detection with the world / / API link: https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Body.html#setCollideWorldBounds__anchor
onComplete: () => {
...
this.physics.add.existing(this.plane);
this.plane.body.setCollideWorldBounds(true);
}
Copy the code
5, add bullet group, create enemy aircraft detection bullets and enemy aircraft collision
We create a bullet group, add all bullets to this group, use the group to conduct collision detection with enemy aircraft, unified processing.
// In the Craete life cycle, we create a bullet bank and an enemy plane and set them up for collision detection // Create a bullet bank // API link: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectFactory.html#group__anchorthis.bullets = this.add.group(); This. EnemySmall = this.add.sprite(30, 30,'enemy1'); this.physics.add.existing(this.enemySmall); // Set the default time to 0 this.beforeTime = 0; / / / / overlap collision detection method API link: https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.Factory.html#overlap__anchor
this.physics.add.overlap(this.bullets, this.enemySmall, function(bullet, enemy) { bullet.destroy(); enemy.destroy(); }, null, this); . / / in the update in the life cycle, we will create the bullets added to the bullet cluster / / API link: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Group.html#add__anchor
this.bullets.add(bullet);
Copy the code
That’s it for this issue, next time we’ll deal with bullet performance optimization, making enemy aircraft generation logic