const TILE_WIDTH = 4; const TILE_HEIGHT = 4; class Example extends Phaser.Scene { constructor() { super(); this.touchInput = { left: false, right: false }; // Add touch input state } preload() { this.load.image('plane', `https://play.rosebud.ai/assets/cute side view of a plane.png?CAdU`); this.load.image('lavaDrop', `https://play.rosebud.ai/assets/lava drop.png?UtWE`); } create() { this.cursors = this.input.keyboard.createCursorKeys(); // Create cursor keys this.restartKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.R); // Add the 'R' key event this.initializeTouchInputs(); // Initialize touch inputs this.map = this.createTerrain(); const mapDimensions = this.map.getPixelDimensions(); this.player = new Player(this, 50, mapDimensions.height-20, 'plane'); // Instantiate the Player class using the 'plane' image this.eruptions = []; const lavaDropletSources = this.map.getLavaDropletSources(); for (const point of lavaDropletSources) { const eruption = new LavaDrops(this); this.eruptions.push(eruption); this.physics.add.collider(this.player, eruption, function(player, eruption) { this.explodePlayer(this.player.x, this.player.y, this.player.body.velocity); }, null, this) eruption.erupt(point); } this.generateSky(mapDimensions.width, mapDimensions.height); this.generateClouds(mapDimensions.width, mapDimensions.height); this.cameras.main.setBounds(0, 0, mapDimensions.width, mapDimensions.height); this.cameras.main.setZoom(1.5); this.cameras.main.startFollow(this.player); this.physics.world.setBounds(0, 0, mapDimensions.width, mapDimensions.height); // set world bounds //this.map.terrainLayer.setVisible(false); this.physics.add.collider(this.player, this.map.terrainEdgeLayer, function(player, tile) { if (tile.properties.type === "rock") { this.explodePlayer(this.player.x, this.player.y, this.player.body.velocity); } else if (tile.properties.type === "runway" && tile.properties.id === "runway2"){ console.log("Landed!"); } }, null, this); } explodePlayer(x, y, vector) { if (this.player.currentState === Player.States.Crash) { return; } this.player.transitionTo(Player.States.Crash); this.cameras.main.stopFollow(); this.plane = this.add.image(400, 300, 'plane'); this.plane.visible = false; // Create a rectangle that's 33% the size of the image and offset it to 1/3 of the width and 1/3 of the height of the image let rectWidth = this.plane.width / 3; let rectHeight = this.plane.height / 3; let offsetX = this.plane.width / 3; let offsetY = this.plane.height / 3; // Determine the size of each cell within the rectangle let cellWidth = rectWidth / 5; let cellHeight = rectHeight / 5; // Split the rectangle into 25 cells and use those cells as the crop regions for the plane image for(let i=0; i<5; i++) { for(let j=0; j<5; j++) { let piece = this.physics.add.image(x, y, 'plane'); piece.setCrop(offsetX + i * cellWidth, offsetY + j * cellHeight, cellWidth, cellHeight); piece.setScale(0.2); // Add some directional variation to the vector for each piece let variation = new Phaser.Math.Vector2(Phaser.Math.Between(-50, 50), Phaser.Math.Between(-50, 50)); let finalVector = vector.clone().add(variation); // Set the velocity of the pieces based on the final vector with variation piece.body.velocity.set(finalVector.x, finalVector.y); } } this.time.addEvent({ delay: 500, loop: false, callback: () => { window.location.reload(); }, }); } generateSky(width, height) { const bgGraphics = this.add.graphics(); bgGraphics.fillGradientStyle(0x000066, 0x000066, 0x66ccff, 0x66ccff, 1); bgGraphics.fillRect(0, 0, width, height); // draw the background bgGraphics.setDepth(-1); } update() { if (this.restartKey.isDown) { // Check if the 'R' key is pressed this.scene.restart(); // Restart the scene } let leftDown = this.cursors.left.isDown || this.touchInput.left; let rightDown = this.cursors.right.isDown || this.touchInput.right; this.player.updateInputs(leftDown, rightDown); this.player.update(); } createTerrain() { const terrain = new Terrain(this); let tilemapParams = { height: 340, segments: [{ length: 60, generator: new Terrain.Generator.Plateau(), features: [{ type: 'runway', id: 'runway1' }] }, { length: 200, generator: new Terrain.Generator.Mountain({ delta: 2, maxSlope: 2, minimumHeight: 0, maximumHeight: 90 }), features: [{ type: 'caldera' }] }, { length: 200, generator: new Terrain.Generator.Mountain({ delta: 2, maxSlope: 3, minimumHeight: 0, maximumHeight: 90 }), features: [{ type: 'caldera' }] }, { length: 200, generator: new Terrain.Generator.Mountain({ delta: 2, maxSlope: 5, minimumHeight: 20, maximumHeight: 90 }), features: [{ type: 'caldera' }] }, { length: 30, generator: new Terrain.Generator.Slope({ endHeight: 0, delta: 2, maxSlope: 3, minimumHeight: 0, maximumHeight: 50 }) }, { length: 50, generator: new Terrain.Generator.Plateau(), features: [{ type: 'runway', id: 'runway2' }] },{ length: 200, generator: new Terrain.Generator.Mountain({ delta: 2, maxSlope: 5, minimumHeight: 50, maximumHeight: 140 }), features: [{ type: 'caldera' }] }, ] }; return terrain.generateTilemap(tilemapParams); } initializeTouchInputs() { // Add pointer down event this.input.on('pointerdown', function(pointer) { if (pointer.x < this.scale.width / 2) { this.touchInput.left = true; } else { this.touchInput.right = true; } }, this); // Add pointer up event this.input.on('pointerup', function(pointer) { this.touchInput.left = false; this.touchInput.right = false; }, this); } generateCloudTexture(key, width, height) { const graphics = this.add.graphics(); graphics.fillStyle(0xFFFFFF, 0.9); // White color const circles = []; for (let theta = 0; theta < 2 * Math.PI; theta += Math.PI / 18) { const x = (width / 2) * Math.cos(theta); const y = (height / 2) * Math.sin(theta); const minDimension = Math.min(width, height); const maxDimension = Math.max(width, height); const minRadius = minDimension * 0.1; // 10% of the smaller dimension const maxRadius = maxDimension * 0.3; // 30% of the larger dimension const randomRadius = Phaser.Math.Between(minRadius, maxRadius); circles.push({ x: x + width / 2, y: y + height / 2, radius: randomRadius }); } let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity; for (const circle of circles) { minX = Math.min(minX, circle.x - circle.radius); minY = Math.min(minY, circle.y - circle.radius); maxX = Math.max(maxX, circle.x + circle.radius); maxY = Math.max(maxY, circle.y + circle.radius); } const shiftX = -minX; const shiftY = -minY; for (const circle of circles) { graphics.fillCircle(circle.x + shiftX, circle.y + shiftY, circle.radius); } graphics.fillEllipse((maxX - minX) / 2, (maxY - minY) / 2, width, height); // Draw the filled ellipse if (this.textures.exists(key)) { this.textures.remove(key); } const texture = graphics.generateTexture(key, maxX - minX, maxY - minY); graphics.destroy(); return texture; } generateClouds(mapWidth, mapHeight) { for (let i = 0; i < 50; i++) { const width = Phaser.Math.Between(50, 100); // Random width between 50 and 200 const height = Phaser.Math.Between(width * 0.25, width * 0.5); // Random height between 25% and 50% of width this.generateCloudTexture(`cloud${i}`, width, height); // Generate cloud texture with unique key const x = Phaser.Math.Between(0, mapWidth); // Random x position within the tilemap bounds const y = Phaser.Math.Between(0, mapHeight / 2); // Random y position within the tilemap bounds const img = this.add.image(x, y, `cloud${i}`); // Create sprite from texture and place it in the random position img.setDepth(-1); img.setScrollFactor(Phaser.Math.FloatBetween(0.95, 0.97)); } } } class Player extends Phaser.Physics.Arcade.Sprite { static StallSpeed = -300; // Add stallSpeed as a static property of the Player class static ThrustAcceleration = 150; // Add ThrustAcceleration as a static property of the Player class static StallRecoveryVelocity = 150; // Add StallRecoveryVelocity as a static property of the Player class static States = { Glide: 'Glide', Thrust: 'Thrust', Taxi: 'Taxi', Stall: 'Stall', Crash: 'Crash' }; constructor(scene, x, y, texture) { super(scene, x, y, texture); scene.add.existing(this); scene.physics.add.existing(this); this.setScale(0.125); // scale down the sprite even more this.setCollideWorldBounds(true); // make the sprite collide with world bounds this.body.setSize(this.width / 2.5, this.height / 4); // Reduce the size of the bounding box this.inputs = { left: false, right: false }; this.currentTween = null; this.facing = -1; // Replace "left" with -1 this.currentState = null; this.states = { [Player.States.Glide]: { onEnter: () => { this.setAccelerationX(0); // Set horizontal acceleration to zero }, onExecute: () => { this.applyLift(); this.applyDrag(); if ((this.inputs.left && !this.inputs.right) || (!this.inputs.left && this.inputs.right)) { this.transitionTo(Player.States.Thrust); } } }, [Player.States.Thrust]: { onEnter: () => {}, onExecute: () => { this.applyLift(); this.applyDrag(); if (this.inputs.left) { this.setAccelerationX(-Player.ThrustAcceleration); // Apply leftward acceleration this.faceDirection(-1); } else if (this.inputs.right) { this.setAccelerationX(Player.ThrustAcceleration); // Apply rightward acceleration this.faceDirection(1); } else { this.transitionTo(Player.States.Glide); // Transition to Glide state if neither input is down } } }, [Player.States.Taxi]: { onEnter: () => {}, onExecute: () => { this.applyLift(); this.applyDrag(); } }, [Player.States.Stall]: { onEnter: () => { const gravity = this.body.world.gravity.y; // Get the gravity from the physics world this.setAccelerationY(gravity); // Set vertical acceleration to gravity this.setAccelerationX(0); // Set horizontal acceleration to 0 }, onExecute: () => { this.applyDrag(); if (this.body.velocity.y > Player.StallRecoveryVelocity) { // Use Player.StallRecoveryVelocity as threshold this.transitionTo(Player.States.Glide); } } }, [Player.States.Crash]: { onEnter: () => { this.setVisible(false); // Hide the player this.setActive(false); // Disable the player }, onExecute: () => { // Implement what happens when the player is in the Crash state } } }; } applyLift() { // Constants for lift calculation const Cl = 0.04; const A = 1; const rho = 1; const V = this.body.velocity.x; // Use horizontal velocity instead of vertical // Calculate lift force let Lift = 0.5 * Cl * A * rho * V * V; // Check if the plane is stalling if (this.body.velocity.y < Player.StallSpeed) { // Use Player.StallSpeed instead of stallSpeed this.transitionTo(Player.States.Stall); } // Calculate acceleration due to lift (a = F/m) const a = Lift / this.body.mass; // Apply acceleration to player this.setAccelerationY(-a); } updateInputs(left, right) { this.inputs.left = left; this.inputs.right = right; } transitionTo(state) { if (this.currentState !== state) { this.nextState = state; // Store the new state in nextState } } applyDrag(Cd = 0.025) { // Constants for drag calculation const A = 1; const rho = 1; const Vx = this.body.velocity.x; // Calculate horizontal drag force const DragX = 0.5 * Cd * A * rho * Vx * Vx; // Use setDrag to apply horizontal drag to the player's physics body this.setDragX(DragX); } faceDirection(dir) { if (this.facing === dir) return; // If already facing in the direction, do nothing if (this.currentTween) { this.currentTween.stop(); // Stop the current tween if there is one running } this.currentTween = this.scene.tweens.timeline({ tweens: [{ targets: this, scaleX: 0, duration: 150, }, { targets: this, scaleX: 0.125, onStart: () => { this.flipX = (dir === -1) ? false : true; // Flip sprite based on direction }, duration: 150, }, ], }); this.facing = dir; // Update facing direction } update() { if (this.nextState) { this.currentState = this.nextState; // Set currentState to nextState this.states[this.currentState].onEnter(); // Call the onEnter method of the new state this.nextState = null; // Clear nextState } if (this.currentState) { this.states[this.currentState].onExecute(); } else { this.transitionTo(Player.States.Glide); } // Adjust the rotation of the sprite to match the vertical velocity this.rotation = Phaser.Math.Clamp(this.body.velocity.y / 600, -0.8, 0.8) * this.facing; } } class Terrain { static TileMap = class { constructor(scene, heights, tilesetTextures, height) { this.scene = scene; this.height = height; this.tilesetTextures = tilesetTextures; this.buildTilemap(heights, tilesetTextures); } buildTilemap(columns, tilesetTextures) { this.tilemap = this.scene.make.tilemap({ tileWidth: TILE_WIDTH, tileHeight: TILE_HEIGHT, width: columns.length, height: this.height }); this.tileset = this.tilemap.addTilesetImage('terrain', tilesetTextures.tilesetTextureName); this.terrainLayer = this.tilemap.createBlankLayer('terrainLayer', this.tileset); this.terrainEdgeLayer = this.tilemap.createBlankLayer('terrainEdgeLayer', this.tileset); //this.terrainLayer.setVisible(false); for (let x = 0; x < columns.length; x++) { switch (columns[x].type) { case 'rock': this.processRockColumn(x, columns[x]); break; case 'runway': this.processRunway(x, columns[x]); break; case 'caldera': case 'volcano': this.processCaldera(x, columns[x], columns[x].type); break; } } this.terrainEdgeLayer.setCollisionBetween(0, this.tileset.total - 1); // Make all tiles collidable } processRockColumn(x, column) { let tileIndices = this.tilesetTextures.getIndices(/mountain/); for (let y = 0; y <= column.height; y++) { let tileIndex = Phaser.Math.RND.pick(tileIndices); const layer = y === column.height ? this.terrainEdgeLayer : this.terrainLayer; let tile = layer.putTileAt(tileIndex, x, this.invertY(y)); tile.properties = { type: "rock" }; } } processRunway(x, column) { let mountainTileIndices = this.tilesetTextures.getIndices(/mountain/); let mountainTileIndex = Phaser.Math.RND.pick(mountainTileIndices); let runwayTileIndex = this.tilesetTextures.getIndex('runway'); // for runway let runwaylightTileIndex = this.tilesetTextures.getIndex('runwaylight'); // for runway light // Loop through the column height, placing mountain tiles up to height - 2 for (let y = 0; y <= column.height; y++) { const t = this.terrainLayer.putTileAt(mountainTileIndex, x, this.invertY(y)); } // At height - 1, place a runway or runwaylight tile let tile = (x % 3 == 0) ? this.terrainLayer.putTileAt(runwaylightTileIndex, x, this.invertY(column.height + 1)) : this.terrainLayer.putTileAt(runwayTileIndex, x, this.invertY(column.height + 1)); tile.properties = { type: "runway", id: column.runwayId // Set the runway id on the tile property }; } processCaldera(x, column, columnType) { let rockTileIndices = this.tilesetTextures.getIndices(/mountain/); let lavaTileIndex = this.tilesetTextures.getIndex('lava'); for (let y = 0; y <= column.height; y++) { let rockTileIndex = Phaser.Math.RND.pick(rockTileIndices); let tile = this.terrainLayer.putTileAt(rockTileIndex, x, this.invertY(y)); tile.properties = { type: "rock" }; } for (let depth = 0; depth <= column.lavaDepth; depth++) { let tile = this.terrainLayer.putTileAt(lavaTileIndex, x, this.invertY(column.height + depth)); tile.properties = { type: "lava" }; if (columnType === 'volcano' && depth === column.lavaDepth) { tile.properties.lavaDropletSource = true; // Make the topmost lava tile of the 'volcano' column a lava droplet source } } } getPixelDimensions() { return { width: this.tilemap.widthInPixels, height: this.tilemap.heightInPixels }; } invertY(y) { return this.tilemap.height - y - 1; } getLavaDropletSources() { let lavaDropletSourceTiles = []; this.terrainLayer.forEachTile((tile) => { if (tile.properties.lavaDropletSource) { let worldPoint = this.terrainLayer.tileToWorldXY(tile.x, tile.y); // Add half of the tile width and height to get the center of the tile worldPoint.x += this.terrainLayer.tilemap.tileWidth / 2; worldPoint.y += this.terrainLayer.tilemap.tileHeight / 2; lavaDropletSourceTiles.push(worldPoint); } }); return lavaDropletSourceTiles; } } getLavaDropletSources() { let lavaDropletSourceTiles = []; this.terrainLayer.forEachTile((tile) => { if (tile.properties.lavaDropletSource) { let worldPoint = this.terrainLayer.tileToWorldXY(tile.x, tile.y); // Add half of the tile width and height to get the center of the tile worldPoint.x += this.terrainLayer.tilemap.tileWidth / 2; worldPoint.y += this.terrainLayer.tilemap.tileHeight / 2; lavaDropletSourceTiles.push(worldPoint); } }); return lavaDropletSourceTiles; } static Generator = class { constructor(maximumHeight) { this.maximumHeight = maximumHeight; } static Mountain = class { constructor({ delta, maxSlope, minimumHeight, maximumHeight }) { this.delta = delta; this.maxSlope = maxSlope; this.minimumHeight = minimumHeight; this.maximumHeight = maximumHeight; } reset(startHeight) { this.height = startHeight; this.slope = Phaser.Math.FloatBetween(-this.delta, this.delta); this.index = 0; } next() { if (this.index++ === 0) { return this.height; } this.slope += Phaser.Math.FloatBetween(-this.delta, this.delta); this.slope = Phaser.Math.Clamp(this.slope, -this.maxSlope, this.maxSlope); this.height = Math.floor(this.height + this.slope); if (this.height < this.minimumHeight || this.height > this.maximumHeight - 1) { this.height = Phaser.Math.Clamp(this.height, this.minimumHeight, this.maximumHeight - 1); this.slope = -this.slope; } return this.height; } } static Slope = class { constructor({ endHeight, delta, maxSlope, minimumHeight, maximumHeight }) { this.endHeight = endHeight; this.delta = delta; this.maxSlope = maxSlope; this.minimumHeight = minimumHeight; this.maximumHeight = maximumHeight; this.reset(); } reset(startHeight) { this.height = startHeight; this.slope = Phaser.Math.FloatBetween(-this.delta, this.delta); this.index = 0; } next() { if (this.index++ === 0) { return this.height; } const randomDown = () => Phaser.Math.FloatBetween(0, -this.delta); const randomUp = () => Phaser.Math.FloatBetween(0, this.delta); const p = 0.7; if (this.endHeight < this.height) { this.slope += Phaser.Math.FloatBetween(0,1) < p ? randomDown() : randomUp(); } else if (this.endHeight > this.height) { this.slope += Phaser.Math.FloatBetween(0,1) < p ? randomUp() : randomDown(); } else { this.slope += Phaser.Math.Between(-this.delta, this.delta); } this.slope = Phaser.Math.Clamp(this.slope, -this.maxSlope, this.maxSlope); this.height = Math.floor(this.height + this.slope); if (this.height < this.minimumHeight || this.height > this.maximumHeight - 1) { this.height = Phaser.Math.Clamp(this.height, this.minimumHeight, this.maximumHeight - 1); this.slope = -this.slope; } return this.height; } } static Plateau = class { constructor() {} reset(startHeight) { this.startHeight = startHeight; } next() { return this.startHeight; } } generateTerrain(startHeight, segments) { let height = startHeight; let segmentHeights = []; let currentSegmentHeights = []; for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) { let segment = segments[segmentIndex]; if (segment.length === undefined && segment.generator.endHeight === undefined) { throw new Error("Segment must have either a length or an endHeight specified"); } segment.generator.reset(height); if (segment.generator.endHeight !== undefined) { while (height !== segment.generator.endHeight) { height = segment.generator.next(); currentSegmentHeights.push({ height: height, segmentIndex: segmentIndex, type: "rock" }); } } else { for (let i = 0; i < segment.length; i++) { height = segment.generator.next(); currentSegmentHeights.push({ height: height, segmentIndex: segmentIndex, type: "rock" }); } } // Process features if (segment.features) { for (let feature of segment.features) { switch (feature.type) { case 'caldera': currentSegmentHeights = this.addCaldera(currentSegmentHeights); break; case 'runway': currentSegmentHeights = this.addRunway(currentSegmentHeights, segmentIndex, segment.length, feature.id); break; default: throw new Error(`Feature type ${feature.type} not supported.`); } } } segmentHeights.push(currentSegmentHeights); currentSegmentHeights = []; } return segmentHeights; } addCaldera(columns) { const calderaHalfWidth = 4; const calderaDepth = 15; // Create a copy of the columns array const result = columns.slice(); // Find the index of the tallest peak let peakIndex = 0; let peakHeight = result[calderaHalfWidth].height; for (let i = calderaHalfWidth; i < result.length - calderaHalfWidth; i++) { if (result[i].height > peakHeight) { peakHeight = result[i].height; peakIndex = i; } } if (peakHeight < calderaDepth) { return; } for (let i = -calderaHalfWidth; i <= calderaHalfWidth; i++) { let index = peakIndex + i; if (index >= 0 && index < result.length) { const offset = Math.pow(i, 2) - calderaDepth; //result[index].height = Math.max(1, Math.min(result[index].height, result[index].height + offset)); result[index].height = result[index].height + offset; if (index === peakIndex) { result[index].type = "volcano"; } else { result[index].type = "caldera"; } } } // Calculate the lavaLevelConstant const leftEdgeOfCaldera = result[peakIndex - calderaHalfWidth].height; const rightEdgeOfCaldera = result[peakIndex + calderaHalfWidth].height; const lavaLevelConstant = Math.min(leftEdgeOfCaldera, rightEdgeOfCaldera) - 1; // Calculate the constant value for lava pool level based on the lower edge of the caldera // Compute the lavaDepths for (let i = 0; i < result.length; i++) { if (result[i].type === "caldera" || result[i].type === "volcano") { result[i].lavaDepth = lavaLevelConstant - result[i].height; } } return result; } addRunway(columns, x, length, runwayId) { const result = columns.slice(); // Create a copy of the heights array let highestPeak = 0; // Find the highest peak in the range for (let i = x; i < x + length; i++) { if (result[i] && result[i].height > highestPeak) { highestPeak = result[i].height; } } // Raise all the heights in the range to the highest peak for (let i = x; i < x + length; i++) { if (result[i]) { result[i].height = highestPeak; result[i].type = 'runway'; result[i].runwayId = runwayId; } } return result; } } static TextureGenerator = class { static TilesetTextures = class { constructor(tilesetTextureName, textureMap) { this.tilesetTextureName = tilesetTextureName; this.textureMap = textureMap; } getIndices(pattern) { const matchingTextures = []; for (const [key, index] of this.textureMap.entries()) { if (pattern.test(key)) { matchingTextures.push(index); } } return matchingTextures; } getIndex(textureKey) { if (!this.textureMap.has(textureKey)) { throw new Error(`Texture key "${textureKey}" not found in texture map.`); } return this.textureMap.get(textureKey); } } constructor(scene) { this.scene = scene; } generateTexture(key, width, height, color) { let graphics = this.scene.make.graphics(); graphics.fillStyle(color, 1); graphics.fillRect(0, 0, width, height); graphics.generateTexture(key, width, height); graphics.destroy(); } generateTilesetTexture(key, width, height, textures) { let renderTexture = this.scene.make.renderTexture({ width: width * textures.length, height: height, add: false }); let x = 0; let textureMap = new window.Map(); for (let i = 0; i < textures.length; i++) { let textureKey = textures[i]; renderTexture.draw(textureKey, x, 0); textureMap.set(textureKey, i); x += width; } renderTexture.saveTexture(key); return new Terrain.TextureGenerator.TilesetTextures(key, textureMap); } } constructor(scene) { this.scene = scene; this.textureGenerator = new Terrain.TextureGenerator(this.scene); } generateTilemap(spec) { this.textureGenerator.generateTexture('mountain1', TILE_WIDTH, TILE_HEIGHT, 0x949494); // gray this.textureGenerator.generateTexture('mountain2', TILE_WIDTH, TILE_HEIGHT, 0x989898); // lighter gray this.textureGenerator.generateTexture('mountain3', TILE_WIDTH, TILE_HEIGHT, 0x9C9C9C); // lightest gray this.textureGenerator.generateTexture('runway', TILE_WIDTH, TILE_HEIGHT, 0x6060A0); // new contrasted color this.textureGenerator.generateTexture('lava', TILE_WIDTH, TILE_HEIGHT, 0xFF4500); // lava color this.textureGenerator.generateTexture('runwaylight', TILE_WIDTH, TILE_HEIGHT, 0x00FF00); // new light color for runway (bright green) this.textureGenerator.generateTexture('debris', TILE_WIDTH, TILE_HEIGHT, 0xFFFF00); // yellow this.textureGenerator.generateTexture('debris', TILE_WIDTH, TILE_HEIGHT, 0xFFFF00); // yellow let tilesetTextures = this.textureGenerator.generateTilesetTexture('terrain', TILE_WIDTH, TILE_HEIGHT, ['mountain1', 'mountain2', 'mountain3', 'lava', 'runway', 'runwaylight']); this.terrainGenerator = new Terrain.Generator(spec.height); // New TerrainGenerator instance let columns = this.terrainGenerator.generateTerrain(0, spec.segments); // Instantiate the Map this.map = new Terrain.TileMap(this.scene, columns.flat(), tilesetTextures, spec.height); return this.map; } } class LavaDrop extends Phaser.Physics.Arcade.Sprite { static LIVE = 'live'; static DYING = 'dying'; static DEAD = 'dead'; static SCALE = 0.05; constructor(scene, x, y, texture, frame) { super(scene, x, y, texture, frame); scene.add.existing(this); // Add sprite to scene scene.physics.world.enable(this); // Enable physics on this sprite this.currentState = LavaDrop.DEAD; // Initialize the state as Dead } goLive(x, y, angle, velocity) { if (this.currentState === LavaDrop.LIVE) return; // If the LavaDrop is already live, return this.currentState = LavaDrop.LIVE; this.enableBody(true, x, y, true, true); // Enable body and set position const radianAngle = Phaser.Math.DegToRad(angle); // Convert angle from degrees to radians this.setVelocityX(velocity * Math.cos(radianAngle)); // Set x component of velocity this.setVelocityY(velocity * Math.sin(radianAngle)); // Set y component of velocity this.setScale(LavaDrop.SCALE); // Reset scale to 1 this.setAlpha(1); // Set alpha back to 1 this.body.setSize(this.width * 0.2, this.height * 0.2); // Further reduce the size of the bounding box } goDying() { if (this.currentState === LavaDrop.DYING) return; // If the LavaDrop is already dying, return this.currentState = LavaDrop.DYING; // Create a tween that fades the LavaDrop out this.scene.tweens.add({ targets: this, alpha: { from: 1, to: 0 }, scale: { from: LavaDrop.SCALE, to: 0 }, duration: 1000, // Change this value for a faster or slower fade out onComplete: () => this.goDead() }); } goDead() { if (this.currentState === LavaDrop.DEAD) return; // If the LavaDrop is already dead, return this.currentState = LavaDrop.DEAD; this.disableBody(true, true); // Disable body and hide game object } preUpdate() { if (!this.scene.physics.world.bounds.contains(this.x, this.y)) { this.goDead(); } else { // Rotate the sprite based on its vertical velocity const angle = Phaser.Math.RadToDeg(this.body.velocity.y * 0.01); this.setAngle(angle); } } update() { // If the LavaDrop is outside the world bounds, set it to Dead if (!this.scene.physics.world.bounds.contains(this.x, this.y)) { this.goDead(); } } } class LavaDrops extends Phaser.Physics.Arcade.Group { constructor(scene) { super(scene.physics.world, scene); // Create 100 inactive and invisible LavaDrop instances and add them to the group this.createMultiple({ classType: LavaDrop, key: 'lavaDrop', quantity: 100, active: false, visible: false, setXY: { x: -1000, y: -1000 }, runChildUpdate: true // Automatically run child update method }); } launchLavaDrop(x, y, angle, velocity) { const lavaDrop = this.getFirstDead(); // Get the first inactive LavaDrop if (lavaDrop) { lavaDrop.goLive(x, y, angle, velocity); // If an inactive LavaDrop is found, launch it } } erupt({ x, y }) { // Remove old timer if it exists if (this.timer) { this.timer.remove(); } // Create a new timer event this.timer = this.scene.time.addEvent({ delay: 500, // Time delay between calls callback: () => { const launchAngle = Phaser.Math.Between(-95, -85); // Angle to simulate volcano launch const launchVelocity = Phaser.Math.Between(200, 300); // Velocity to simulate volcano launch this.launchLavaDrop(x, y, launchAngle, launchVelocity); }, loop: true, // Repeat forever }); } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 }, debug: false } }, scene: Example }; window.phaserGame = new Phaser.Game(config);

Other games like this

About Tiny Jet