// Code formatted for clarity on stackoverflow
document.body.style = "display: flex;flex-direction: column;";
class Scene extends Phaser.Scene {
constructor() {
super({ key: 'testScene' });
}
create() {
// Start -- GENERATE TEXTURE just for demo
let helperGraphics = this.make.graphics({x: -250, y: -105, add: false});
helperGraphics.fillStyle(0xEAEAEA, 1);
helperGraphics.fillRect(0, 20, 500, 100 );
helperGraphics.generateTexture('land', 500, 210);
// End -- GENERATE TEXTURE just for demo
this.baseLand = this.textures.get('land').getSourceImage()
this.baseCanvas = this.textures.createCanvas('currentLand', 800, 200);
// Create initial Land Texture
this.baseCanvas.draw(0, 0, this.baseLand);
this.baseCanvas.context.globalCompositeOperation = 'destination-out';
// load image to scene
this.land = this.add.image(0, 20, 'currentLand').setOrigin(0);
this.physics.add.existing(this.land);
this.land.body.setImmovable(true);
this.land.body.setAllowGravity(false);
// init bomb
this.createBomb();
}
// creates always new bomb
createBomb(bomb, land) {
this.bomb = this.add.circle(Phaser.Math.Between(100, 300), -5, 5, 0x6666ff);
this.physics.add.existing(this.bomb);
this.physics.add.overlap(
this.bomb,
this.land,
this.overlap,
this.shouldProcess, this);
}
// action on overlap
overlap(bomb, land) {
// remove bomb on contact
let {x, y} = bomb.body.center;
bomb.destroy();
// create crater on old bomb position
this.createCrater({x, y});
// create new bomb
this.createBomb();
}
// checks if bomb hits land
shouldProcess(bomb, land) {
let x = Math.floor(bomb.body.center.x - land.x);
let y = Math.floor(bomb.body.center.y - land.y);
return this.textures.getPixelAlpha(x, y, "currentLand") === 255;
}
// create crater
createCrater({ x, y }) {
this.baseCanvas.context.beginPath();
this.baseCanvas.context.arc(x- this.land.x, y - this.land.y, 23, 0, Math.PI * 2, false);
this.baseCanvas.context.fill();
this.baseCanvas.update();
}
update(){
if(this.bomb && this.bomb.body.y > 160){
this.bomb.destroy();
this.createBomb();
}
}
}
var config = {
type: Phaser.AUTO,
width: 500,
height: 153,
physics: {
default: "arcade",
arcade: {
gravity: { y: 100 }
}
},
scene: [Scene],
banner: false
};
new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabaa2abb9afb88af9e4ffffe4f8">[email protected]</a>/dist/phaser.js">
</script>