[{"_1":2,"_119":-5,"_120":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_117":-5,"_113":-5,"_118":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":55,"_56":57,"_58":57,"_59":60,"_61":57,"_62":57,"_63":57,"_64":57,"_65":57,"_66":57,"_67":17,"_68":25,"_69":-5,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":-5,"_78":17,"_79":80,"_113":30,"_114":115,"_116":17},"id","65a4868e36326a0fe2a8","isMyApp",false,"name","Tennis Smash","description","Serve, volley, and unleash chaos in this supercharged tennis showdown where the sky is literally your court! Battle an AI opponent amidst floating clouds while collecting absurd power-ups that turn your paddle into a weapon of mass destruction.","brief","Defy gravity in this tennis battle where power-ups turn your paddle into a weapon of mass destruction!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/65a4868e36326a0fe2a8/78304_70a0b58e.webp","cdnUrl","https://cdn.dev.fun/app/65a4868e36326a0fe2a8/78304","createdAt",["D",1749494589065],"updatedAt",["D",1749568763976],"lastCommitId",["B","78304"],"tier",1,"credits",62,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"7e57312f-8ef0-4978-9877-29f307e0b888","uniqueId","2mskwuc2nZTjEtS93Gt9RDbmxSVzh7tajECMBCQzhvfQ","username","solanaWallet","displayName","2ms...vfQ","bio","avatar","/avatar.svg","commitCount",23,"forkCount",0,"likeCount","runsCount",21,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import * as Phaser from \"phaser\";\nimport { createNoise2D, createNoise3D } from 'simplex-noise';\nimport { StateClient } from '@devfunlabs/state-client';\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '65a4868e36326a0fe2a8'\n});\nlet globalWeatherSystem;\nlet globalSoundManager;\nlet globalPlayerData = {\n coins: 0,\n xp: 0,\n level: 1,\n skillPoints: 0,\n unlockedSkins: [\"defaultSkin\"],\n unlockedAbilities: [],\n currentSkin: \"defaultSkin\",\n currentElemental: null,\n currency: {\n usdt: 0,\n sol: 0,\n usdc: 0\n },\n tournament: {\n rank: 0,\n wins: 0,\n losses: 0\n }\n};\nclass BootScene extends Phaser.Scene {\n constructor() {\n super({\n key: \"BootScene\"\n });\n this.noise2D = createNoise2D();\n this.noise3D = createNoise3D();\n }\n preload() {\n const width = this.cameras.main.width;\n const height = this.cameras.main.height;\n const loadingBg = this.add.graphics();\n loadingBg.fillStyle(0x000000, 1);\n loadingBg.fillRect(0, 0, width, height);\n const lightRays = this.add.graphics();\n for (let i = 0; i < 5; i++) {\n const rayWidth = Phaser.Math.Between(50, 200);\n const rayX = Phaser.Math.Between(0, width);\n const rayAngle = Phaser.Math.Between(-30, 30);\n lightRays.fillStyle(0x3366ff, 0.1);\n lightRays.fillRect(rayX, 0, rayWidth, height);\n lightRays.setRotation(Phaser.Math.DegToRad(rayAngle));\n }\n const fogParticles = [];\n for (let i = 0; i < 50; i++) {\n const x = Phaser.Math.Between(0, width);\n const y = Phaser.Math.Between(0, height);\n const size = Phaser.Math.Between(100, 300);\n const fog = this.add.graphics();\n fog.fillStyle(0x3366ff, 0.05);\n fog.fillCircle(0, 0, size);\n fog.x = x;\n fog.y = y;\n this.tweens.add({\n targets: fog,\n x: x + Phaser.Math.Between(-100, 100),\n y: y + Phaser.Math.Between(-100, 100),\n alpha: {\n from: 0.05,\n to: 0.1\n },\n duration: Phaser.Math.Between(5000, 10000),\n yoyo: true,\n repeat: -1\n });\n fogParticles.push(fog);\n }\n const logoContainer = this.add.container(width / 2, height / 3);\n const logoGlow = this.add.graphics();\n logoGlow.fillStyle(0x3366ff, 0.2);\n logoGlow.fillCircle(0, 0, 200);\n const logoShadow = this.add.text(5, 5, \"TENNIS SMASH\", {\n fontFamily: 'Futura, \"Trebuchet MS\", Arial',\n fontSize: '64px',\n fontStyle: 'bold',\n color: '#000000'\n });\n logoShadow.setOrigin(0.5);\n logoShadow.setAlpha(0.6);\n const logoText = this.add.text(0, 0, \"TENNIS SMASH\", {\n fontFamily: 'Futura, \"Trebuchet MS\", Arial',\n fontSize: '64px',\n fontStyle: 'bold',\n color: '#ffffff'\n });\n logoText.setOrigin(0.5);\n const ultraText = this.add.text(0, 60, \"ULTRA EDITION\", {\n fontFamily: 'Futura, \"Trebuchet MS\", Arial',\n fontSize: '28px',\n fontStyle: 'bold',\n color: '#4499ff'\n });\n ultraText.setOrigin(0.5);\n logoContainer.add([logoGlow, logoShadow, logoText, ultraText]);\n this.tweens.add({\n targets: logoGlow,\n scaleX: 1.1,\n scaleY: 1.1,\n alpha: 0.3,\n duration: 2000,\n yoyo: true,\n repeat: -1\n });\n this.tweens.add({\n targets: logoText,\n y: '-=5',\n duration: 3000,\n yoyo: true,\n repeat: -1,\n ease: 'Sine.easeInOut'\n });\n const progressBarContainer = this.add.container(width / 2, height / 2);\n const blurBg = this.add.graphics();\n blurBg.fillStyle(0x000000, 0.4);\n blurBg.fillRoundedRect(-180, -35, 360, 70, 20);\n const progressBarBg = this.add.graphics();\n progressBarBg.fillStyle(0x111122, 0.8);\n progressBarBg.fillRoundedRect(-160, -15, 320, 30, 15);\n progressBarBg.lineStyle(2, 0x4488ff, 1);\n progressBarBg.strokeRoundedRect(-160, -15, 320, 30, 15);\n const progressBar = this.add.graphics();\n const reflection = this.add.graphics();\n reflection.fillStyle(0xffffff, 0.1);\n reflection.fillRoundedRect(-160, -12, 320, 5, 5);\n progressBarContainer.add([blurBg, progressBarBg, progressBar, reflection]);\n const loadingTexts = [\"Loading Photorealistic Textures...\", \"Generating Volumetric Clouds...\", \"Initializing Physics Engine...\", \"Preparing Weather Systems...\", \"Compiling Shaders...\", \"Connecting to Tournament Servers...\"];\n const loadingText = this.add.text(width / 2, height / 2 + 40, loadingTexts[0], {\n fontFamily: 'Futura, \"Trebuchet MS\", Arial',\n fontSize: '16px',\n color: '#ffffff'\n });\n loadingText.setOrigin(0.5);\n const assetText = this.add.text(width / 2, height / 2 + 70, \"0%\", {\n fontFamily: 'Futura, \"Trebuchet MS\", Arial',\n fontSize: '24px',\n fontStyle: 'bold',\n color: '#4499ff'\n });\n assetText.setOrigin(0.5);\n let currentTextIndex = 0;\n const loadingTextTimer = this.time.addEvent({\n delay: 2000,\n callback: () => {\n currentTextIndex = (currentTextIndex + 1) % loadingTexts.length;\n loadingText.setText(loadingTexts[currentTextIndex]);\n },\n loop: true\n });\n this.load.on(\"progress\", value => {\n progressBar.clear();\n const gradientWidth = 316 * value;\n for (let i = 0; i < gradientWidth; i++) {\n const ratio = i / gradientWidth;\n const r = Math.floor(20 + (80 - 20) * ratio);\n const g = Math.floor(120 + (180 - 120) * ratio);\n const b = Math.floor(220 + (255 - 220) * ratio);\n const color = Phaser.Display.Color.GetColor(r, g, b);\n progressBar.fillStyle(color, 1);\n progressBar.fillRect(-158 + i, -13, 1, 26);\n }\n const shinePos = -158 + gradientWidth * value;\n progressBar.fillStyle(0xffffff, 0.5);\n progressBar.fillRect(shinePos - 5, -13, 10, 26);\n assetText.setText(`${Math.floor(value * 100)}%`);\n if (value > 0 && Math.floor(value * 10) === Math.floor(value * 10)) {\n if (value % 0.25 < 0.01) {\n this.cameras.main.shake(100, 0.002);\n }\n }\n });\n this.load.on(\"complete\", () => {\n loadingTextTimer.remove();\n this.cameras.main.flash(500, 255, 255, 255);\n this.time.delayedCall(500, () => {\n progressBarContainer.destroy();\n loadingText.destroy();\n assetText.destroy();\n const finalText = this.add.text(width / 2, height / 2, \"PRESS ANY KEY TO START\", {\n fontFamily: 'Futura, \"Trebuchet MS\", Arial',\n fontSize: '24px',\n fontStyle: 'bold',\n color: '#ffffff'\n });\n finalText.setOrigin(0.5);\n this.tweens.add({\n targets: finalText,\n alpha: 0,\n duration: 800,\n yoyo: true,\n repeat: -1\n });\n this.input.keyboard.once('keydown', () => {\n this.cameras.main.fade(1000, 0, 0, 0);\n this.time.delayedCall(1000, () => {\n this.scene.start(\"GameScene\");\n });\n });\n this.input.once('pointerdown', () => {\n this.cameras.main.fade(1000, 0, 0, 0);\n this.time.delayedCall(1000, () => {\n this.scene.start(\"GameScene\");\n });\n });\n });\n });\n this.createParticleTextures();\n this.createCloudTextures();\n this.createPowerUpTextures();\n this.createRacketSkinTextures();\n this.createElementalEffects();\n this.createEnvironmentTextures();\n this.createCharacterTextures();\n }\n createParticleTextures() {\n const ballHitParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n ballHitParticle.fillStyle(0xffffff, 1);\n ballHitParticle.fillCircle(8, 8, 8);\n ballHitParticle.fillStyle(0xccffff, 0.7);\n ballHitParticle.fillCircle(8, 8, 5);\n ballHitParticle.fillStyle(0xffffff, 0.9);\n ballHitParticle.fillCircle(6, 6, 3);\n ballHitParticle.generateTexture(\"ballHitParticle\", 16, 16);\n const sparkParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n sparkParticle.fillStyle(0xffffff, 1);\n const points = [];\n for (let i = 0; i < 8; i++) {\n const angle = i * Math.PI / 4;\n const radius = i % 2 === 0 ? 8 : 4;\n points.push({\n x: 8 + Math.cos(angle) * radius,\n y: 8 + Math.sin(angle) * radius\n });\n }\n sparkParticle.beginPath();\n sparkParticle.moveTo(points[0].x, points[0].y);\n for (let i = 1; i < points.length; i++) {\n sparkParticle.lineTo(points[i].x, points[i].y);\n }\n sparkParticle.closePath();\n sparkParticle.fillPath();\n sparkParticle.generateTexture(\"sparkParticle\", 16, 16);\n const superShotParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n superShotParticle.fillStyle(0xffaa00, 0.5);\n superShotParticle.fillCircle(16, 16, 14);\n superShotParticle.fillStyle(0xffff00, 1);\n const starPoints = [];\n const outerRadius = 10;\n const innerRadius = 5;\n const spikes = 5;\n for (let i = 0; i < spikes * 2; i++) {\n const radius = i % 2 === 0 ? outerRadius : innerRadius;\n const angle = i * Math.PI / spikes - Math.PI / 2;\n starPoints.push({\n x: 16 + Math.cos(angle) * radius,\n y: 16 + Math.sin(angle) * radius\n });\n }\n superShotParticle.beginPath();\n superShotParticle.moveTo(starPoints[0].x, starPoints[0].y);\n for (let i = 1; i < starPoints.length; i++) {\n superShotParticle.lineTo(starPoints[i].x, starPoints[i].y);\n }\n superShotParticle.closePath();\n superShotParticle.fillPath();\n superShotParticle.fillStyle(0xffffff, 0.8);\n superShotParticle.fillCircle(16, 16, 3);\n superShotParticle.generateTexture(\"superShotParticle\", 32, 32);\n this.createElementalParticles();\n const distortionParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n distortionParticle.fillStyle(0xaaaaff, 0.6);\n distortionParticle.fillCircle(16, 16, 16);\n distortionParticle.lineStyle(2, 0xffffff, 0.8);\n distortionParticle.strokeCircle(16, 16, 12);\n distortionParticle.strokeCircle(16, 16, 8);\n distortionParticle.strokeCircle(16, 16, 4);\n distortionParticle.fillStyle(0xffffff, 0.9);\n distortionParticle.fillCircle(16, 16, 2);\n distortionParticle.generateTexture(\"distortionParticle\", 32, 32);\n const energyFieldParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n energyFieldParticle.fillStyle(0xffff88, 0.8);\n energyFieldParticle.fillCircle(8, 8, 7);\n energyFieldParticle.fillStyle(0xffffff, 0.9);\n energyFieldParticle.fillCircle(7, 7, 3);\n const glowSize = 12;\n for (let i = 0; i < 5; i++) {\n const alpha = 0.1 - i * 0.02;\n energyFieldParticle.fillStyle(0xffffaa, alpha);\n energyFieldParticle.fillCircle(8, 8, glowSize - i);\n }\n energyFieldParticle.generateTexture(\"energyFieldParticle\", 16, 16);\n const sweatParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n sweatParticle.fillStyle(0xaaddff, 0.7);\n sweatParticle.fillCircle(4, 4, 3);\n sweatParticle.fillStyle(0xffffff, 0.5);\n sweatParticle.fillCircle(3, 3, 1);\n sweatParticle.generateTexture(\"sweatParticle\", 8, 8);\n const confettiParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n confettiParticle.fillStyle(0xffffff, 1);\n confettiParticle.fillRect(0, 0, 6, 6);\n confettiParticle.generateTexture(\"confettiParticle\", 6, 6);\n }\n createElementalParticles() {\n const fireParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n fireParticle.fillStyle(0xff8800, 0.9);\n fireParticle.fillCircle(16, 16, 12);\n fireParticle.fillStyle(0xff0000, 0.9);\n fireParticle.fillCircle(16, 20, 8);\n fireParticle.fillStyle(0xffff00, 0.9);\n fireParticle.fillCircle(16, 12, 6);\n fireParticle.fillStyle(0xffffff, 0.9);\n fireParticle.fillCircle(16, 10, 3);\n fireParticle.generateTexture(\"fireParticle\", 32, 32);\n const iceParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n iceParticle.fillStyle(0xaaddff, 0.9);\n for (let i = 0; i < 6; i++) {\n const angle = i * Math.PI / 3;\n iceParticle.fillRect(16, 16, 12, 2);\n iceParticle.rotation = angle;\n }\n iceParticle.fillStyle(0xffffff, 0.9);\n iceParticle.fillCircle(16, 16, 5);\n iceParticle.generateTexture(\"iceParticle\", 32, 32);\n const lightningParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n lightningParticle.fillStyle(0xffff00, 0.9);\n lightningParticle.beginPath();\n lightningParticle.moveTo(16, 4);\n lightningParticle.lineTo(20, 14);\n lightningParticle.lineTo(16, 16);\n lightningParticle.lineTo(22, 28);\n lightningParticle.lineTo(12, 20);\n lightningParticle.lineTo(18, 16);\n lightningParticle.lineTo(12, 6);\n lightningParticle.closePath();\n lightningParticle.fillPath();\n lightningParticle.fillStyle(0xffffff, 0.8);\n lightningParticle.beginPath();\n lightningParticle.moveTo(16, 6);\n lightningParticle.lineTo(18, 12);\n lightningParticle.lineTo(16, 14);\n lightningParticle.lineTo(16, 6);\n lightningParticle.closePath();\n lightningParticle.fillPath();\n lightningParticle.generateTexture(\"lightningParticle\", 32, 32);\n const forceFieldParticle = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n forceFieldParticle.fillStyle(0x44aaff, 0.7);\n forceFieldParticle.fillCircle(8, 8, 6);\n forceFieldParticle.lineStyle(2, 0x8888ff, 0.8);\n forceFieldParticle.strokeCircle(8, 8, 8);\n forceFieldParticle.generateTexture(\"forceFieldParticle\", 16, 16);\n }\n createCloudTextures() {\n const smallCloud = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n smallCloud.fillStyle(0xffffff, 0.9);\n smallCloud.fillRoundedRect(10, 10, 60, 30, 15);\n smallCloud.fillStyle(0xffffff, 1);\n smallCloud.fillRoundedRect(15, 5, 40, 25, 15);\n smallCloud.fillRoundedRect(25, 15, 30, 20, 15);\n smallCloud.fillStyle(0xddddff, 0.7);\n smallCloud.fillRoundedRect(5, 15, 30, 20, 15);\n smallCloud.fillRoundedRect(40, 20, 35, 25, 15);\n smallCloud.generateTexture(\"smallCloud\", 100, 50);\n const mediumCloud = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n mediumCloud.fillStyle(0xeeeeff, 0.8);\n mediumCloud.fillRoundedRect(0, 10, 110, 50, 25);\n mediumCloud.fillStyle(0xf5f5ff, 0.9);\n mediumCloud.fillRoundedRect(15, 0, 80, 40, 20);\n mediumCloud.fillRoundedRect(30, 15, 50, 45, 22);\n mediumCloud.fillStyle(0xffffff, 1);\n mediumCloud.fillRoundedRect(20, -5, 70, 30, 15);\n mediumCloud.fillRoundedRect(40, 10, 40, 25, 12);\n mediumCloud.fillStyle(0xccccff, 0.7);\n mediumCloud.fillRoundedRect(5, 30, 90, 40, 20);\n mediumCloud.generateTexture(\"mediumCloud\", 150, 80);\n const largeCloud = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n largeCloud.fillStyle(0xddddff, 0.7);\n largeCloud.fillRoundedRect(0, 30, 180, 60, 30);\n largeCloud.fillStyle(0xeeeeff, 0.8);\n largeCloud.fillRoundedRect(10, 10, 160, 70, 35);\n largeCloud.fillRoundedRect(30, 20, 120, 60, 30);\n largeCloud.fillStyle(0xf5f5ff, 0.9);\n largeCloud.fillRoundedRect(20, 0, 130, 50, 25);\n largeCloud.fillRoundedRect(50, 15, 80, 40, 20);\n largeCloud.fillStyle(0xffffff, 1);\n largeCloud.fillRoundedRect(30, -10, 100, 40, 20);\n largeCloud.fillRoundedRect(60, 5, 60, 30, 15);\n largeCloud.fillStyle(0xffffff, 0.9);\n largeCloud.fillRoundedRect(40, -15, 80, 20, 10);\n largeCloud.fillStyle(0xaaaadd, 0.6);\n largeCloud.fillRoundedRect(20, 50, 140, 40, 20);\n largeCloud.generateTexture(\"largeCloud\", 200, 100);\n const stormCloud = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n stormCloud.fillStyle(0x444466, 0.9);\n stormCloud.fillRoundedRect(0, 30, 180, 70, 35);\n stormCloud.fillStyle(0x666688, 0.8);\n stormCloud.fillRoundedRect(10, 10, 160, 80, 40);\n stormCloud.fillRoundedRect(30, 20, 120, 60, 30);\n stormCloud.fillStyle(0x8888aa, 0.7);\n stormCloud.fillRoundedRect(20, 0, 130, 50, 25);\n stormCloud.fillRoundedRect(50, 15, 80, 40, 20);\n stormCloud.fillStyle(0xbbbbff, 0.5);\n stormCloud.fillRoundedRect(70, 10, 40, 30, 15);\n stormCloud.generateTexture(\"stormCloud\", 200, 100);\n }\n createEnvironmentTextures() {\n const courtSurface = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n courtSurface.fillStyle(0x44aa55, 1);\n courtSurface.fillRect(0, 0, 800, 600);\n courtSurface.lineStyle(1, 0x338844, 0.4);\n for (let x = 0; x < 800; x += 10) {\n courtSurface.lineBetween(x, 0, x, 600);\n }\n courtSurface.lineStyle(1, 0x338844, 0.3);\n for (let y = 0; y < 600; y += 10) {\n courtSurface.lineBetween(0, y, 800, y);\n }\n courtSurface.fillStyle(0x55bb66, 0.3);\n for (let i = 0; i < 300; i++) {\n const x = Phaser.Math.Between(0, 800);\n const y = Phaser.Math.Between(0, 600);\n const size = Phaser.Math.Between(5, 15);\n courtSurface.fillCircle(x, y, size);\n }\n courtSurface.generateTexture(\"courtSurface\", 800, 600);\n const clayCourt = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n clayCourt.fillStyle(0xcc6644, 1);\n clayCourt.fillRect(0, 0, 800, 600);\n clayCourt.lineStyle(1, 0xbb5533, 0.2);\n for (let x = 0; x < 800; x += 20) {\n clayCourt.lineBetween(x, 0, x, 600);\n }\n for (let y = 0; y < 600; y += 20) {\n clayCourt.lineBetween(0, y, 800, y);\n }\n clayCourt.fillStyle(0xdd7755, 0.4);\n for (let i = 0; i < 200; i++) {\n const x = Phaser.Math.Between(0, 800);\n const y = Phaser.Math.Between(0, 600);\n const size = Phaser.Math.Between(3, 8);\n clayCourt.fillCircle(x, y, size);\n }\n clayCourt.generateTexture(\"clayCourt\", 800, 600);\n this.createSkyTextures();\n this.createStadiumTextures();\n }\n createSkyTextures() {\n const daySky = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n const dayHeight = 600;\n const daySegments = 20;\n const daySegmentHeight = dayHeight / daySegments;\n for (let i = 0; i < daySegments; i++) {\n const ratio = i / (daySegments - 1);\n const r = Math.floor(120 + (200 - 120) * ratio);\n const g = Math.floor(170 + (230 - 170) * ratio);\n const b = Math.floor(230 + (255 - 230) * ratio);\n const segmentColor = Phaser.Display.Color.GetColor(r, g, b);\n daySky.fillStyle(segmentColor, 1);\n daySky.fillRect(0, i * daySegmentHeight, 800, daySegmentHeight + 1);\n }\n daySky.generateTexture(\"daySky\", 800, 600);\n const sunsetSky = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n const sunsetSegments = 20;\n const sunsetSegmentHeight = 600 / sunsetSegments;\n for (let i = 0; i < sunsetSegments; i++) {\n const ratio = i / (sunsetSegments - 1);\n let r, g, b;\n if (ratio < 0.4) {\n const subRatio = ratio / 0.4;\n r = Math.floor(220 + (255 - 220) * subRatio);\n g = Math.floor(100 + (180 - 100) * subRatio);\n b = Math.floor(50 + (50 - 50) * subRatio);\n } else if (ratio < 0.7) {\n const subRatio = (ratio - 0.4) / 0.3;\n r = Math.floor(255 - (255 - 130) * subRatio);\n g = Math.floor(180 - (180 - 170) * subRatio);\n b = Math.floor(50 + (230 - 50) * subRatio);\n } else {\n const subRatio = (ratio - 0.7) / 0.3;\n r = Math.floor(130 - (130 - 70) * subRatio);\n g = Math.floor(170 - (170 - 100) * subRatio);\n b = Math.floor(230 - (230 - 180) * subRatio);\n }\n const segmentColor = Phaser.Display.Color.GetColor(r, g, b);\n sunsetSky.fillStyle(segmentColor, 1);\n sunsetSky.fillRect(0, i * sunsetSegmentHeight, 800, sunsetSegmentHeight + 1);\n }\n sunsetSky.generateTexture(\"sunsetSky\", 800, 600);\n const nightSky = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n const nightSegments = 20;\n const nightSegmentHeight = 600 / nightSegments;\n for (let i = 0; i < nightSegments; i++) {\n const ratio = i / (nightSegments - 1);\n const r = Math.floor(10 + (50 - 10) * ratio);\n const g = Math.floor(10 + (50 - 10) * ratio);\n const b = Math.floor(40 + (100 - 40) * ratio);\n const segmentColor = Phaser.Display.Color.GetColor(r, g, b);\n nightSky.fillStyle(segmentColor, 1);\n nightSky.fillRect(0, i * nightSegmentHeight, 800, nightSegmentHeight + 1);\n }\n nightSky.fillStyle(0xffffff, 1);\n for (let i = 0; i < 100; i++) {\n const x = Phaser.Math.Between(0, 800);\n const y = Phaser.Math.Between(0, 500);\n const size = Phaser.Math.FloatBetween(0.5, 2);\n nightSky.fillCircle(x, y, size);\n }\n nightSky.generateTexture(\"nightSky\", 800, 600);\n }\n createStadiumTextures() {\n const stadiumSeating = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n stadiumSeating.fillStyle(0x333344, 1);\n stadiumSeating.fillRect(0, 0, 200, 600);\n for (let y = 20; y < 600; y += 40) {\n stadiumSeating.fillStyle(0x444455, 1);\n stadiumSeating.fillRect(0, y, 200, 30);\n stadiumSeating.fillStyle(0x555566, 1);\n stadiumSeating.fillRect(0, y + 30, 200, 10);\n }\n const crowdColors = [0xeebbbb, 0xbbeeee, 0xbbbbee, 0xeeeebb, 0xbbeecc];\n for (let y = 25; y < 600; y += 40) {\n for (let x = 10; x < 200; x += 15) {\n if (Math.random() > 0.3) {\n const color = Phaser.Utils.Array.GetRandom(crowdColors);\n stadiumSeating.fillStyle(color, 1);\n stadiumSeating.fillCircle(x, y, 5);\n stadiumSeating.fillStyle(0x000000, 0.3);\n stadiumSeating.fillCircle(x, y + 5, 3);\n }\n }\n }\n stadiumSeating.generateTexture(\"stadiumSeating\", 200, 600);\n const luxuryBoxes = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n luxuryBoxes.fillStyle(0x444455, 1);\n luxuryBoxes.fillRect(0, 0, 200, 100);\n for (let x = 10; x < 200; x += 40) {\n luxuryBoxes.fillStyle(0x66aaff, 0.3);\n luxuryBoxes.fillRect(x, 20, 30, 60);\n luxuryBoxes.lineStyle(2, 0x888899, 1);\n luxuryBoxes.strokeRect(x, 20, 30, 60);\n luxuryBoxes.lineBetween(x, 50, x + 30, 50);\n luxuryBoxes.lineBetween(x + 15, 20, x + 15, 80);\n luxuryBoxes.fillStyle(0xffffaa, 0.4);\n luxuryBoxes.fillRect(x + 5, 25, 20, 20);\n luxuryBoxes.fillRect(x + 5, 55, 20, 20);\n }\n luxuryBoxes.generateTexture(\"luxuryBoxes\", 200, 100);\n const scoreboard = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n scoreboard.fillStyle(0x222233, 1);\n scoreboard.fillRect(0, 0, 300, 150);\n scoreboard.fillStyle(0x111122, 1);\n scoreboard.fillRect(10, 10, 280, 100);\n scoreboard.lineStyle(3, 0x3366aa, 1);\n scoreboard.strokeRect(0, 0, 300, 150);\n scoreboard.strokeRect(10, 10, 280, 100);\n for (let y = 15; y < 110; y += 5) {\n scoreboard.fillStyle(0x4499ff, 0.5 * Math.random());\n scoreboard.fillRect(15, y, 270, 1);\n }\n for (let x = 20; x < 280; x += 40) {\n scoreboard.fillStyle(0xff0000, 0.8);\n scoreboard.fillCircle(x, 125, 5);\n scoreboard.fillStyle(0x00ff00, 0.8);\n scoreboard.fillCircle(x + 20, 125, 5);\n }\n scoreboard.generateTexture(\"scoreboard\", 300, 150);\n }\n createCharacterTextures() {\n const playerBody = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n playerBody.fillStyle(0x3366dd, 1);\n playerBody.fillRoundedRect(20, 30, 60, 80, 10);\n playerBody.fillStyle(0x2255cc, 1);\n playerBody.fillRect(20, 30, 60, 15);\n playerBody.fillRect(20, 75, 60, 5);\n playerBody.fillStyle(0x2244aa, 1);\n playerBody.fillRect(25, 110, 50, 30);\n playerBody.fillStyle(0xffddbb, 1);\n playerBody.fillCircle(50, 20, 20);\n playerBody.fillStyle(0x553311, 1);\n playerBody.fillRect(30, 5, 40, 15);\n playerBody.fillStyle(0x000000, 1);\n playerBody.fillCircle(43, 15, 3);\n playerBody.fillCircle(57, 15, 3);\n playerBody.fillStyle(0xee8866, 1);\n playerBody.fillRect(45, 25, 10, 2);\n playerBody.fillStyle(0x3366dd, 1);\n playerBody.fillRect(10, 40, 10, 60);\n playerBody.fillRect(80, 40, 10, 60);\n playerBody.fillStyle(0xffddbb, 1);\n playerBody.fillCircle(15, 100, 6);\n playerBody.fillCircle(85, 100, 6);\n playerBody.fillStyle(0xffddbb, 1);\n playerBody.fillRect(30, 140, 15, 50);\n playerBody.fillRect(55, 140, 15, 50);\n playerBody.fillStyle(0xffffff, 1);\n playerBody.fillRect(25, 190, 25, 10);\n playerBody.fillRect(50, 190, 25, 10);\n playerBody.fillStyle(0xffffff, 1);\n playerBody.fillCircle(50, 50, 10);\n playerBody.fillStyle(0x3366dd, 1);\n playerBody.fillCircle(50, 50, 6);\n playerBody.generateTexture(\"playerBody\", 100, 200);\n const aiBody = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n aiBody.fillStyle(0xdd3366, 1);\n aiBody.fillRoundedRect(20, 30, 60, 80, 10);\n aiBody.fillStyle(0xcc2255, 1);\n aiBody.fillRect(20, 30, 60, 15);\n aiBody.fillRect(20, 75, 60, 5);\n aiBody.fillStyle(0xaa2244, 1);\n aiBody.fillRect(25, 110, 50, 30);\n aiBody.fillStyle(0xffddbb, 1);\n aiBody.fillCircle(50, 20, 20);\n aiBody.fillStyle(0x222222, 1);\n aiBody.fillCircle(50, 12, 18);\n aiBody.fillStyle(0x000000, 1);\n aiBody.fillCircle(43, 15, 3);\n aiBody.fillCircle(57, 15, 3);\n aiBody.fillStyle(0xee8866, 1);\n aiBody.fillRect(45, 25, 10, 2);\n aiBody.fillStyle(0xdd3366, 1);\n aiBody.fillRect(10, 40, 10, 60);\n aiBody.fillRect(80, 40, 10, 60);\n aiBody.fillStyle(0xffddbb, 1);\n aiBody.fillCircle(15, 100, 6);\n aiBody.fillCircle(85, 100, 6);\n aiBody.fillStyle(0xffddbb, 1);\n aiBody.fillRect(30, 140, 15, 50);\n aiBody.fillRect(55, 140, 15, 50);\n aiBody.fillStyle(0x000000, 1);\n aiBody.fillRect(25, 190, 25, 10);\n aiBody.fillRect(50, 190, 25, 10);\n aiBody.fillStyle(0xffffff, 1);\n aiBody.fillCircle(50, 50, 10);\n aiBody.fillStyle(0xdd3366, 1);\n aiBody.fillCircle(50, 50, 6);\n aiBody.generateTexture(\"aiBody\", 100, 200);\n this.createRacketAnimations();\n }\n createRacketAnimations() {}\n createPowerUpTextures() {\n const jetpackPowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n jetpackPowerUp.fillStyle(0xaaaaaa, 1);\n jetpackPowerUp.fillRoundedRect(10, 5, 20, 20, 5);\n jetpackPowerUp.lineStyle(2, 0x666666, 1);\n jetpackPowerUp.strokeRoundedRect(10, 5, 20, 20, 5);\n jetpackPowerUp.fillStyle(0x888888, 1);\n jetpackPowerUp.fillRect(13, 8, 14, 14);\n jetpackPowerUp.fillStyle(0x333333, 1);\n jetpackPowerUp.fillRect(12, 25, 6, 5);\n jetpackPowerUp.fillRect(22, 25, 6, 5);\n jetpackPowerUp.fillStyle(0xff0000, 1);\n jetpackPowerUp.fillTriangle(12, 30, 15, 45, 18, 30);\n jetpackPowerUp.fillTriangle(22, 30, 25, 45, 28, 30);\n jetpackPowerUp.fillStyle(0xffff00, 1);\n jetpackPowerUp.fillTriangle(13, 30, 15, 40, 17, 30);\n jetpackPowerUp.fillTriangle(23, 30, 25, 40, 27, 30);\n jetpackPowerUp.fillStyle(0x555555, 1);\n jetpackPowerUp.fillRect(5, 10, 5, 2);\n jetpackPowerUp.fillRect(30, 10, 5, 2);\n jetpackPowerUp.fillRect(5, 18, 5, 2);\n jetpackPowerUp.fillRect(30, 18, 5, 2);\n jetpackPowerUp.generateTexture(\"jetpackPowerUp\", 40, 50);\n const giantRacketPowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n giantRacketPowerUp.fillStyle(0x663300, 1);\n giantRacketPowerUp.fillRect(15, 25, 10, 20);\n giantRacketPowerUp.lineStyle(1, 0x000000, 0.5);\n for (let y = 28; y <= 42; y += 3) {\n giantRacketPowerUp.lineBetween(15, y, 25, y);\n }\n giantRacketPowerUp.fillStyle(0x00aa00, 1);\n giantRacketPowerUp.fillEllipse(20, 15, 16, 25);\n giantRacketPowerUp.fillStyle(0x333333, 0.8);\n giantRacketPowerUp.fillEllipse(20, 15, 14, 22);\n giantRacketPowerUp.lineStyle(1, 0xffffff, 0.8);\n for (let x = 10; x <= 30; x += 3) {\n giantRacketPowerUp.lineBetween(x, 2, x, 28);\n }\n for (let y = 2; y <= 28; y += 3) {\n giantRacketPowerUp.lineBetween(10, y, 30, y);\n }\n giantRacketPowerUp.fillStyle(0x00ff00, 0.3);\n giantRacketPowerUp.fillEllipse(20, 15, 20, 30);\n giantRacketPowerUp.fillStyle(0xffffff, 1);\n giantRacketPowerUp.fillCircle(30, 10, 8);\n giantRacketPowerUp.fillStyle(0x00aa00, 1);\n giantRacketPowerUp.lineStyle(1.5, 0x00aa00, 1);\n giantRacketPowerUp.beginPath();\n giantRacketPowerUp.moveTo(23, 5);\n giantRacketPowerUp.lineTo(26, 5);\n giantRacketPowerUp.lineTo(26, 8);\n giantRacketPowerUp.lineTo(23, 8);\n giantRacketPowerUp.lineTo(23, 11);\n giantRacketPowerUp.lineTo(27, 11);\n giantRacketPowerUp.strokePath();\n giantRacketPowerUp.beginPath();\n giantRacketPowerUp.moveTo(28, 5);\n giantRacketPowerUp.lineTo(32, 11);\n giantRacketPowerUp.moveTo(32, 5);\n giantRacketPowerUp.lineTo(28, 11);\n giantRacketPowerUp.strokePath();\n giantRacketPowerUp.generateTexture(\"giantRacketPowerUp\", 40, 50);\n const multiBallPowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n multiBallPowerUp.fillStyle(0x0000ff, 0.3);\n multiBallPowerUp.fillCircle(20, 20, 20);\n multiBallPowerUp.fillStyle(0xffff88, 1);\n multiBallPowerUp.fillCircle(12, 12, 10);\n multiBallPowerUp.lineStyle(1.5, 0xdddddd, 1);\n multiBallPowerUp.arc(12, 12, 7, Phaser.Math.DegToRad(30), Phaser.Math.DegToRad(150), false);\n multiBallPowerUp.arc(12, 12, 7, Phaser.Math.DegToRad(210), Phaser.Math.DegToRad(330), false);\n multiBallPowerUp.fillStyle(0xffff88, 1);\n multiBallPowerUp.fillCircle(28, 12, 10);\n multiBallPowerUp.lineStyle(1.5, 0xdddddd, 1);\n multiBallPowerUp.arc(28, 12, 7, Phaser.Math.DegToRad(30), Phaser.Math.DegToRad(150), false);\n multiBallPowerUp.arc(28, 12, 7, Phaser.Math.DegToRad(210), Phaser.Math.DegToRad(330), false);\n multiBallPowerUp.fillStyle(0xffff88, 1);\n multiBallPowerUp.fillCircle(20, 28, 10);\n multiBallPowerUp.lineStyle(1.5, 0xdddddd, 1);\n multiBallPowerUp.arc(20, 28, 7, Phaser.Math.DegToRad(30), Phaser.Math.DegToRad(150), false);\n multiBallPowerUp.arc(20, 28, 7, Phaser.Math.DegToRad(210), Phaser.Math.DegToRad(330), false);\n multiBallPowerUp.fillStyle(0xffffff, 0.5);\n multiBallPowerUp.fillCircle(9, 9, 3);\n multiBallPowerUp.fillCircle(25, 9, 3);\n multiBallPowerUp.fillCircle(17, 25, 3);\n multiBallPowerUp.generateTexture(\"multiBallPowerUp\", 40, 40);\n const coinPowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n coinPowerUp.fillStyle(0xffcc00, 1);\n coinPowerUp.fillCircle(20, 20, 18);\n coinPowerUp.fillStyle(0xffdd00, 1);\n coinPowerUp.fillCircle(20, 20, 16);\n coinPowerUp.fillStyle(0xffee00, 1);\n coinPowerUp.fillCircle(20, 20, 14);\n coinPowerUp.lineStyle(1, 0xffaa00, 1);\n for (let i = 0; i < 24; i++) {\n const angle = i * Math.PI / 12;\n const x1 = 20 + Math.cos(angle) * 17;\n const y1 = 20 + Math.sin(angle) * 17;\n const x2 = 20 + Math.cos(angle) * 19;\n const y2 = 20 + Math.sin(angle) * 19;\n coinPowerUp.lineBetween(x1, y1, x2, y2);\n }\n coinPowerUp.lineStyle(3, 0xffaa00, 1);\n coinPowerUp.beginPath();\n coinPowerUp.moveTo(20, 10);\n coinPowerUp.lineTo(20, 30);\n coinPowerUp.strokePath();\n coinPowerUp.beginPath();\n coinPowerUp.arc(20, 15, 5, Math.PI, 0, false);\n coinPowerUp.strokePath();\n coinPowerUp.beginPath();\n coinPowerUp.arc(20, 25, 5, 0, Math.PI, false);\n coinPowerUp.strokePath();\n coinPowerUp.fillStyle(0xffffff, 0.4);\n coinPowerUp.fillCircle(15, 15, 5);\n coinPowerUp.fillStyle(0x000000, 0.2);\n coinPowerUp.fillCircle(25, 25, 5);\n coinPowerUp.generateTexture(\"coinPowerUp\", 40, 40);\n const slowMoPowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n slowMoPowerUp.fillStyle(0xaaaaff, 1);\n slowMoPowerUp.fillCircle(20, 20, 18);\n slowMoPowerUp.fillStyle(0xffffff, 0.8);\n slowMoPowerUp.fillCircle(20, 20, 15);\n slowMoPowerUp.lineStyle(2, 0x6666dd, 1);\n slowMoPowerUp.strokeCircle(20, 20, 18);\n for (let i = 0; i < 12; i++) {\n const angle = i * Math.PI / 6;\n const x1 = 20 + Math.cos(angle) * 12;\n const y1 = 20 + Math.sin(angle) * 12;\n const x2 = 20 + Math.cos(angle) * 15;\n const y2 = 20 + Math.sin(angle) * 15;\n slowMoPowerUp.lineStyle(1, 0x333399, 1);\n slowMoPowerUp.lineBetween(x1, y1, x2, y2);\n }\n slowMoPowerUp.lineStyle(2, 0x333399, 1);\n slowMoPowerUp.lineBetween(20, 20, 20, 10);\n slowMoPowerUp.lineStyle(1, 0x333399, 1);\n slowMoPowerUp.lineBetween(20, 20, 28, 20);\n slowMoPowerUp.fillStyle(0x333399, 1);\n slowMoPowerUp.fillCircle(20, 20, 2);\n slowMoPowerUp.fillStyle(0x333399, 0.5);\n slowMoPowerUp.fillRect(13, 32, 14, 5);\n slowMoPowerUp.lineStyle(0.5, 0xffffff, 1);\n slowMoPowerUp.lineBetween(15, 34.5, 25, 34.5);\n slowMoPowerUp.generateTexture(\"slowMoPowerUp\", 40, 40);\n const teleportPowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n teleportPowerUp.fillStyle(0x9900ff, 0.5);\n teleportPowerUp.fillCircle(20, 20, 18);\n for (let radius = 2; radius <= 16; radius += 2) {\n const alpha = 1 - radius / 16;\n teleportPowerUp.lineStyle(2, 0xffffff, alpha);\n for (let angle = 0; angle < Math.PI * 2; angle += Math.PI / 8) {\n const startAngle = angle;\n const endAngle = angle + Math.PI / 12;\n teleportPowerUp.beginPath();\n teleportPowerUp.arc(20, 20, radius, startAngle, endAngle);\n teleportPowerUp.strokePath();\n }\n }\n for (let i = 0; i < 4; i++) {\n const angle = i * Math.PI / 2;\n const x = 20 + Math.cos(angle) * 22;\n const y = 20 + Math.sin(angle) * 22;\n teleportPowerUp.fillStyle(0xcc66ff, 0.8);\n teleportPowerUp.fillCircle(x, y, 4);\n teleportPowerUp.lineStyle(1, 0xcc66ff, 0.6);\n teleportPowerUp.lineBetween(20, 20, x, y);\n }\n teleportPowerUp.generateTexture(\"teleportPowerUp\", 40, 40);\n const forceFieldPowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n forceFieldPowerUp.fillStyle(0x44aaff, 0.3);\n forceFieldPowerUp.fillCircle(20, 20, 18);\n forceFieldPowerUp.lineStyle(2, 0x44aaff, 0.8);\n forceFieldPowerUp.strokeCircle(20, 20, 18);\n forceFieldPowerUp.lineStyle(1.5, 0x44aaff, 0.7);\n forceFieldPowerUp.strokeCircle(20, 20, 14);\n forceFieldPowerUp.lineStyle(1, 0x44aaff, 0.6);\n forceFieldPowerUp.strokeCircle(20, 20, 10);\n for (let i = 0; i < 8; i++) {\n const angle = i * Math.PI / 4;\n const x1 = 20 + Math.cos(angle) * 6;\n const y1 = 20 + Math.sin(angle) * 6;\n const x2 = 20 + Math.cos(angle) * 18;\n const y2 = 20 + Math.sin(angle) * 18;\n forceFieldPowerUp.lineStyle(1, 0xffffff, 0.6);\n forceFieldPowerUp.lineBetween(x1, y1, x2, y2);\n }\n forceFieldPowerUp.fillStyle(0xffffff, 0.8);\n forceFieldPowerUp.fillCircle(20, 20, 4);\n forceFieldPowerUp.generateTexture(\"forceFieldPowerUp\", 40, 40);\n this.createElementalPowerUps();\n }\n createElementalPowerUps() {\n const firePowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n firePowerUp.fillStyle(0xff0000, 0.8);\n firePowerUp.fillCircle(20, 30, 15);\n firePowerUp.fillStyle(0xff6600, 0.9);\n firePowerUp.fillCircle(20, 25, 12);\n firePowerUp.fillStyle(0xffcc00, 1);\n firePowerUp.fillCircle(20, 20, 8);\n for (let i = 0; i < 7; i++) {\n const angle = i / 7 * Math.PI + Math.PI / 2;\n const height = 15 + Math.sin(i * 0.9) * 5;\n const x1 = 20 + Math.cos(angle) * 15;\n const y1 = 20 + Math.sin(angle) * 15;\n const x2 = 20;\n const y2 = 20 - height;\n firePowerUp.fillStyle(0xff3300, 0.7);\n firePowerUp.fillTriangle(x1, y1, x2, y2, x1 + 5, y1 + 5);\n }\n firePowerUp.fillStyle(0xffffff, 0.6);\n firePowerUp.fillCircle(20, 18, 4);\n firePowerUp.generateTexture(\"firePowerUp\", 40, 40);\n const icePowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n icePowerUp.fillStyle(0xaaddff, 0.3);\n icePowerUp.fillCircle(20, 20, 18);\n icePowerUp.fillStyle(0xaaddff, 0.9);\n icePowerUp.beginPath();\n icePowerUp.moveTo(20, 5);\n icePowerUp.lineTo(30, 15);\n icePowerUp.lineTo(25, 35);\n icePowerUp.lineTo(15, 35);\n icePowerUp.lineTo(10, 15);\n icePowerUp.closePath();\n icePowerUp.fillPath();\n icePowerUp.lineStyle(1, 0xffffff, 0.8);\n icePowerUp.lineBetween(20, 5, 20, 35);\n icePowerUp.lineBetween(10, 15, 30, 15);\n icePowerUp.lineBetween(15, 25, 25, 25);\n icePowerUp.fillStyle(0xffffff, 0.7);\n icePowerUp.fillTriangle(18, 8, 22, 8, 20, 15);\n for (let i = 0; i < 6; i++) {\n const angle = i * Math.PI / 3;\n const x = 20 + Math.cos(angle) * 15;\n const y = 20 + Math.sin(angle) * 15;\n icePowerUp.fillStyle(0xccffff, 0.8);\n icePowerUp.fillCircle(x, y, 3);\n icePowerUp.lineStyle(1, 0xffffff, 0.6);\n icePowerUp.lineBetween(x - 3, y, x + 3, y);\n icePowerUp.lineBetween(x, y - 3, x, y + 3);\n }\n icePowerUp.generateTexture(\"icePowerUp\", 40, 40);\n const lightningPowerUp = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n lightningPowerUp.fillStyle(0xddddff, 0.3);\n lightningPowerUp.fillCircle(20, 20, 18);\n lightningPowerUp.fillStyle(0xffff00, 1);\n lightningPowerUp.beginPath();\n lightningPowerUp.moveTo(20, 5);\n lightningPowerUp.lineTo(27, 15);\n lightningPowerUp.lineTo(23, 17);\n lightningPowerUp.lineTo(30, 35);\n lightningPowerUp.lineTo(17, 22);\n lightningPowerUp.lineTo(22, 20);\n lightningPowerUp.lineTo(15, 5);\n lightningPowerUp.closePath();\n lightningPowerUp.fillPath();\n lightningPowerUp.fillStyle(0xffffff, 0.8);\n lightningPowerUp.fillTriangle(20, 5, 27, 15, 23, 17);\n for (let i = 0; i < 8; i++) {\n const angle = i * Math.PI / 4;\n const radius = 12 + Math.sin(i) * 3;\n const x = 20 + Math.cos(angle) * radius;\n const y = 20 + Math.sin(angle) * radius;\n const arcAngle = angle + Math.PI / 8;\n const arcX = 20 + Math.cos(arcAngle) * radius;\n const arcY = 20 + Math.sin(arcAngle) * radius;\n lightningPowerUp.lineStyle(1, 0xaaaaff, 0.6);\n lightningPowerUp.lineBetween(x, y, arcX, arcY);\n }\n lightningPowerUp.generateTexture(\"lightningPowerUp\", 40, 40);\n }\n createRacketSkinTextures() {\n const defaultSkin = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n defaultSkin.fillStyle(0x995522, 1);\n defaultSkin.fillRect(5, 60, 10, 40);\n defaultSkin.lineStyle(1, 0x000000, 0.5);\n for (let y = 65; y <= 95; y += 5) {\n defaultSkin.lineBetween(5, y, 15, y);\n }\n defaultSkin.fillStyle(0x444444, 1);\n defaultSkin.fillEllipse(10, 30, 15, 40);\n defaultSkin.fillStyle(0x222222, 0.6);\n defaultSkin.fillEllipse(10, 30, 12, 35);\n defaultSkin.lineStyle(1, 0xffffff, 0.8);\n for (let x = 2; x <= 18; x += 3) {\n defaultSkin.lineBetween(x, 5, x, 55);\n }\n for (let y = 5; y <= 55; y += 5) {\n defaultSkin.lineBetween(2, y, 18, y);\n }\n defaultSkin.fillStyle(0xffffff, 0.3);\n defaultSkin.fillEllipse(7, 25, 5, 15);\n defaultSkin.generateTexture(\"defaultSkin\", 20, 100);\n const curveSkinCanvas = this.textures.createCanvas('curveSkinCanvas', 20, 100).getContext('2d');\n curveSkinCanvas.fillStyle = '#995522';\n curveSkinCanvas.fillRect(5, 60, 10, 40);\n curveSkinCanvas.strokeStyle = 'rgba(0,0,0,0.5)';\n curveSkinCanvas.lineWidth = 1;\n for (let y = 65; y <= 95; y += 5) {\n curveSkinCanvas.beginPath();\n curveSkinCanvas.moveTo(5, y);\n curveSkinCanvas.lineTo(15, y);\n curveSkinCanvas.stroke();\n }\n curveSkinCanvas.fillStyle = '#ff5500';\n curveSkinCanvas.beginPath();\n curveSkinCanvas.ellipse(10, 30, 7.5, 20, 0, 0, 2 * Math.PI);\n curveSkinCanvas.fill();\n curveSkinCanvas.fillStyle = 'rgba(170,51,0,0.6)';\n curveSkinCanvas.beginPath();\n curveSkinCanvas.ellipse(10, 30, 6, 17.5, 0, 0, 2 * Math.PI);\n curveSkinCanvas.fill();\n curveSkinCanvas.strokeStyle = 'rgba(255,170,0,0.8)';\n curveSkinCanvas.lineWidth = 1;\n for (let i = -4; i <= 4; i++) {\n const offset = i * 3;\n curveSkinCanvas.beginPath();\n curveSkinCanvas.moveTo(10 + offset, 5);\n const controlX = 15 + i;\n curveSkinCanvas.quadraticCurveTo(controlX, 30, 10 + offset, 55);\n curveSkinCanvas.stroke();\n }\n for (let y = 5; y <= 55; y += 5) {\n curveSkinCanvas.beginPath();\n curveSkinCanvas.moveTo(2, y);\n curveSkinCanvas.lineTo(18, y);\n curveSkinCanvas.stroke();\n }\n curveSkinCanvas.fillStyle = 'rgba(255,170,0,0.8)';\n curveSkinCanvas.beginPath();\n curveSkinCanvas.arc(15, 20, 3, 0, 2 * Math.PI);\n curveSkinCanvas.fill();\n curveSkinCanvas.strokeStyle = 'rgba(255,170,0,0.5)';\n curveSkinCanvas.lineWidth = 1;\n curveSkinCanvas.beginPath();\n curveSkinCanvas.arc(15, 20, 5, 0, Math.PI * 1.5);\n curveSkinCanvas.stroke();\n curveSkinCanvas.beginPath();\n curveSkinCanvas.arc(15, 20, 7, 0, Math.PI * 1.3);\n curveSkinCanvas.stroke();\n this.textures.get('curveSkinCanvas').refresh();\n this.textures.renameTexture('curveSkinCanvas', 'curveSkin');\n const powerSkin = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n powerSkin.fillStyle(0x662200, 1);\n powerSkin.fillRect(8, 55, 14, 45);\n powerSkin.lineStyle(1, 0x000000, 0.5);\n for (let y = 60; y <= 95; y += 5) {\n powerSkin.lineBetween(8, y, 22, y);\n }\n powerSkin.fillStyle(0xaa0000, 1);\n powerSkin.fillEllipse(15, 30, 20, 40);\n powerSkin.lineStyle(2, 0xff0000, 1);\n powerSkin.strokeEllipse(15, 30, 20, 40);\n powerSkin.fillStyle(0xff0000, 1);\n powerSkin.fillEllipse(15, 30, 18, 38);\n powerSkin.fillStyle(0xaa0000, 0.8);\n powerSkin.fillEllipse(15, 30, 15, 35);\n powerSkin.lineStyle(1.5, 0xffffff, 0.7);\n for (let x = 5; x <= 25; x += 4) {\n powerSkin.lineBetween(x, 5, x, 55);\n }\n for (let y = 5; y <= 55; y += 5) {\n powerSkin.lineBetween(5, y, 25, y);\n }\n powerSkin.fillStyle(0xff5500, 0.5);\n powerSkin.fillCircle(15, 30, 8);\n powerSkin.fillStyle(0xffff00, 1);\n powerSkin.beginPath();\n powerSkin.moveTo(13, 25);\n powerSkin.lineTo(17, 27);\n powerSkin.lineTo(15, 32);\n powerSkin.lineTo(18, 34);\n powerSkin.lineTo(12, 40);\n powerSkin.lineTo(14, 32);\n powerSkin.lineTo(11, 30);\n powerSkin.closePath();\n powerSkin.fillPath();\n powerSkin.generateTexture(\"powerSkin\", 30, 100);\n const speedSkin = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n speedSkin.fillStyle(0x444444, 1);\n speedSkin.fillRect(6, 60, 8, 50);\n speedSkin.lineStyle(0.5, 0x000000, 0.5);\n for (let y = 65; y <= 105; y += 5) {\n speedSkin.lineBetween(6, y, 14, y);\n }\n speedSkin.fillStyle(0x00aaff, 1);\n speedSkin.fillEllipse(10, 30, 12, 45);\n speedSkin.lineStyle(1, 0x0055ff, 1);\n speedSkin.strokeEllipse(10, 30, 12, 45);\n speedSkin.fillStyle(0x0055ff, 1);\n speedSkin.fillTriangle(10, 0, 4, 20, 16, 20);\n speedSkin.fillTriangle(10, 110, 4, 90, 16, 90);\n speedSkin.lineStyle(0.5, 0xffffff, 0.9);\n for (let x = 4; x <= 16; x += 4) {\n speedSkin.lineBetween(x, 5, x, 55);\n }\n for (let y = 5; y <= 55; y += 7) {\n speedSkin.lineBetween(4, y, 16, y);\n }\n speedSkin.fillStyle(0x00aaff, 0.3);\n for (let i = 0; i < 3; i++) {\n const y = 30 + i * 15;\n speedSkin.fillRect(0, y, 3, 2);\n speedSkin.fillRect(-5, y, 3, 2);\n speedSkin.fillRect(-10, y, 3, 2);\n speedSkin.fillRect(17, y, 3, 2);\n speedSkin.fillRect(22, y, 3, 2);\n speedSkin.fillRect(27, y, 3, 2);\n }\n speedSkin.generateTexture(\"speedSkin\", 18, 110);\n const gravitySkinCanvas = document.createElement('canvas');\n gravitySkinCanvas.width = 20;\n gravitySkinCanvas.height = 100;\n const gravitySkin = gravitySkinCanvas.getContext('2d');\n gravitySkin.fillStyle = '#550055';\n gravitySkin.fillRect(5, 60, 10, 40);\n gravitySkin.fillStyle = 'rgba(255, 0, 255, 0.5)';\n gravitySkin.fillRect(7, 70, 6, 5);\n gravitySkin.fillRect(7, 80, 6, 5);\n gravitySkin.fillRect(7, 90, 6, 5);\n gravitySkin.fillStyle = '#aa00aa';\n gravitySkin.beginPath();\n gravitySkin.ellipse(10, 30, 15, 40, 0, 0, Math.PI * 2);\n gravitySkin.fill();\n gravitySkin.strokeStyle = 'rgba(255, 0, 255, 0.9)';\n gravitySkin.lineWidth = 1;\n gravitySkin.beginPath();\n gravitySkin.ellipse(10, 30, 15, 40, 0, 0, Math.PI * 2);\n gravitySkin.stroke();\n gravitySkin.beginPath();\n gravitySkin.ellipse(10, 30, 12, 35, 0, 0, Math.PI * 2);\n gravitySkin.stroke();\n gravitySkin.beginPath();\n gravitySkin.ellipse(10, 30, 9, 30, 0, 0, Math.PI * 2);\n gravitySkin.stroke();\n gravitySkin.fillStyle = '#ff00ff';\n gravitySkin.beginPath();\n gravitySkin.arc(10, 15, 5, 0, Math.PI * 2);\n gravitySkin.fill();\n gravitySkin.beginPath();\n gravitySkin.arc(10, 45, 5, 0, Math.PI * 2);\n gravitySkin.fill();\n gravitySkin.strokeStyle = '#ff88ff';\n gravitySkin.lineWidth = 1;\n gravitySkin.beginPath();\n gravitySkin.moveTo(10, 15);\n gravitySkin.lineTo(10, 45);\n gravitySkin.stroke();\n gravitySkin.fillStyle = 'rgba(255, 0, 255, 0.3)';\n gravitySkin.beginPath();\n gravitySkin.arc(10, 15, 8, 0, Math.PI * 2);\n gravitySkin.fill();\n gravitySkin.beginPath();\n gravitySkin.arc(10, 45, 8, 0, Math.PI * 2);\n gravitySkin.fill();\n gravitySkin.strokeStyle = 'rgba(255, 187, 255, 0.7)';\n gravitySkin.lineWidth = 0.5;\n function drawGravityEffect() {\n for (let i = 0; i < 6; i++) {\n const y1 = 10 + i * 10;\n const y2 = 10 + (5 - i) * 10;\n gravitySkin.beginPath();\n gravitySkin.moveTo(2, y1);\n gravitySkin.quadraticCurveTo(10, 30, 18, y2);\n gravitySkin.stroke();\n }\n }\n drawGravityEffect();\n this.textures.addCanvas('gravitySkin', gravitySkinCanvas);\n const fireSkin = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n fireSkin.fillStyle(0x662200, 1);\n fireSkin.fillRect(5, 60, 10, 40);\n fireSkin.fillStyle(0xff3300, 0.7);\n for (let y = 60; y <= 90; y += 10) {\n fireSkin.fillTriangle(5, y + 10, 10, y, 15, y + 10);\n }\n fireSkin.fillStyle(0xff3300, 1);\n fireSkin.fillEllipse(10, 30, 15, 40);\n fireSkin.fillStyle(0xff6600, 0.9);\n fireSkin.fillEllipse(10, 30, 12, 35);\n fireSkin.fillStyle(0xffcc00, 0.8);\n fireSkin.fillEllipse(10, 30, 9, 30);\n fireSkin.lineStyle(0.5, 0xffff00, 0.7);\n for (let i = 0; i < 10; i++) {\n const x = 2 + i * 2;\n fireSkin.beginPath();\n fireSkin.moveTo(x, 5);\n for (let y = 10; y <= 50; y += 10) {\n const offset = Math.sin(i + y * 0.1) * 2;\n fireSkin.lineTo(x + offset, y);\n }\n fireSkin.lineTo(x, 55);\n fireSkin.strokePath();\n }\n for (let i = 0; i < 8; i++) {\n const angle = i * Math.PI / 4;\n const x = 10 + Math.cos(angle) * 18;\n const y = 30 + Math.sin(angle) * 43;\n fireSkin.fillStyle(0xff6600, 0.5);\n fireSkin.fillCircle(x, y, 5);\n }\n fireSkin.generateTexture(\"fireSkin\", 20, 100);\n const iceSkin = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n iceSkin.fillStyle(0x66ccff, 1);\n iceSkin.fillRect(5, 60, 10, 40);\n iceSkin.lineStyle(1, 0xffffff, 0.7);\n for (let y = 65; y <= 95; y += 10) {\n iceSkin.lineBetween(5, y, 15, y);\n iceSkin.lineBetween(5, y + 5, 15, y - 5);\n }\n iceSkin.fillStyle(0xaaddff, 0.9);\n iceSkin.fillEllipse(10, 30, 15, 40);\n iceSkin.fillStyle(0xccffff, 0.8);\n iceSkin.fillEllipse(10, 30, 12, 35);\n iceSkin.fillStyle(0xffffff, 0.9);\n iceSkin.fillEllipse(10, 30, 9, 25);\n iceSkin.lineStyle(1, 0xffffff, 0.9);\n for (let i = 0; i < 6; i++) {\n const angle = i * Math.PI / 3;\n const x = 10 + Math.cos(angle) * 12;\n const y = 30 + Math.sin(angle) * 35;\n iceSkin.lineBetween(10, 30, x, y);\n }\n iceSkin.lineStyle(0.5, 0xffffff, 0.9);\n for (let i = 0; i < 5; i++) {\n const offset = i * 3;\n iceSkin.lineBetween(2, 10 + offset, 18, 10 + offset);\n iceSkin.lineBetween(2, 25 + offset, 18, 25 + offset);\n iceSkin.lineBetween(2, 40 + offset, 18, 40 + offset);\n iceSkin.lineBetween(4 + offset, 5, 4 + offset, 55);\n }\n iceSkin.fillStyle(0xaaddff, 0.3);\n iceSkin.fillCircle(10, 30, 20);\n iceSkin.generateTexture(\"iceSkin\", 20, 100);\n }\n createElementalEffects() {\n const fireAura = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n for (let i = 0; i < 15; i++) {\n const radius = 40 - i * 2;\n const alpha = 0.1 + i * 0.05;\n const r = 255;\n const g = 100 + i * 5;\n const b = 0;\n const color = Phaser.Display.Color.GetColor(r, g, b);\n fireAura.fillStyle(color, alpha);\n fireAura.fillCircle(50, 50, radius);\n }\n fireAura.generateTexture('fireAura', 100, 100);\n const iceAura = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n for (let i = 0; i < 8; i++) {\n const angle = i * Math.PI / 4;\n iceAura.lineStyle(Phaser.Math.Between(2, 5), 0xffffff, 0.8);\n const length = 30 + Phaser.Math.Between(-5, 5);\n iceAura.beginPath();\n iceAura.moveTo(50, 50);\n iceAura.lineTo(50 + Math.cos(angle) * length, 50 + Math.sin(angle) * length);\n iceAura.strokePath();\n }\n iceAura.fillStyle(0xaaddff, 0.2);\n iceAura.fillCircle(50, 50, 40);\n iceAura.generateTexture('iceAura', 100, 100);\n const lightningAura = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n lightningAura.lineStyle(2, 0xffff00, 0.8);\n for (let i = 0; i < 10; i++) {\n let x = 50;\n let y = 50;\n const angle = Math.random() * Math.PI * 2;\n lightningAura.beginPath();\n lightningAura.moveTo(x, y);\n for (let j = 0; j < 5; j++) {\n x += Math.cos(angle + (Math.random() - 0.5)) * 10;\n y += Math.sin(angle + (Math.random() - 0.5)) * 10;\n lightningAura.lineTo(x, y);\n }\n lightningAura.strokePath();\n }\n lightningAura.fillStyle(0xaaaaff, 0.1);\n lightningAura.fillCircle(50, 50, 45);\n lightningAura.generateTexture('lightningAura', 100, 100);\n }\n create() {\n this.createGameObjects();\n globalWeatherSystem = {\n currentWeather: 'clear',\n windDirection: {\n x: 0,\n y: 0\n },\n windStrength: 0,\n rainIntensity: 0,\n lightningFrequency: 0,\n timeOfDay: 'day',\n changeWeather: function (weather, duration = 5000) {\n this.targetWeather = weather;\n switch (weather) {\n case 'clear':\n this.targetWind = {\n x: 0,\n y: 0\n };\n this.targetWindStrength = 0;\n this.targetRainIntensity = 0;\n this.targetLightningFrequency = 0;\n break;\n case 'windy':\n this.targetWind = {\n x: Phaser.Math.FloatBetween(-1, 1),\n y: Phaser.Math.FloatBetween(-0.5, 0.5)\n };\n this.targetWindStrength = Phaser.Math.FloatBetween(0.3, 0.7);\n this.targetRainIntensity = 0;\n this.targetLightningFrequency = 0;\n break;\n case 'stormy':\n this.targetWind = {\n x: Phaser.Math.FloatBetween(-1, 1),\n y: Phaser.Math.FloatBetween(-0.5, 0.5)\n };\n this.targetWindStrength = Phaser.Math.FloatBetween(0.6, 1);\n this.targetRainIntensity = Phaser.Math.FloatBetween(0.5, 1);\n this.targetLightningFrequency = Phaser.Math.FloatBetween(0.3, 0.7);\n break;\n }\n this.transitionDuration = duration;\n this.transitionStartTime = Date.now();\n },\n update: function () {\n if (this.targetWeather) {\n const elapsed = Date.now() - this.transitionStartTime;\n const progress = Math.min(elapsed / this.transitionDuration, 1);\n this.windDirection.x = Phaser.Math.Linear(this.windDirection.x, this.targetWind.x, progress);\n this.windDirection.y = Phaser.Math.Linear(this.windDirection.y, this.targetWind.y, progress);\n this.windStrength = Phaser.Math.Linear(this.windStrength, this.targetWindStrength, progress);\n this.rainIntensity = Phaser.Math.Linear(this.rainIntensity, this.targetRainIntensity, progress);\n this.lightningFrequency = Phaser.Math.Linear(this.lightningFrequency, this.targetLightningFrequency, progress);\n if (progress >= 1) {\n this.currentWeather = this.targetWeather;\n this.targetWeather = null;\n }\n }\n return {\n windDirection: this.windDirection,\n windStrength: this.windStrength,\n rainIntensity: this.rainIntensity,\n lightningFrequency: this.lightningFrequency,\n timeOfDay: this.timeOfDay\n };\n },\n setTimeOfDay: function (time) {\n this.timeOfDay = time;\n }\n };\n globalSoundManager = {\n bgm: null,\n sfx: {},\n ambience: {},\n commentators: {},\n setBackgroundMusic: function (key, volume = 0.5) {\n console.log(`Playing background music: ${key} at volume ${volume}`);\n this.bgm = {\n key,\n volume\n };\n },\n playSfx: function (key, volume = 1.0, pitch = 1.0) {\n console.log(`Playing SFX: ${key} at volume ${volume} and pitch ${pitch}`);\n this.sfx[key] = {\n volume,\n pitch,\n lastPlayed: Date.now()\n };\n },\n playAmbience: function (key, volume = 0.3, loop = true) {\n console.log(`Playing ambience: ${key} at volume ${volume}, loop: ${loop}`);\n this.ambience[key] = {\n volume,\n loop,\n lastPlayed: Date.now()\n };\n },\n playCommentary: function (event) {\n const comments = {\n 'ace': ['Amazing ace!', 'What a serve!', 'Unreturnable!'],\n 'winner': ['Fantastic shot!', 'Beautiful winner!', 'Perfect placement!'],\n 'rally': ['What a rally!', 'They\\'re both playing at their best!', 'Incredible exchange!'],\n 'gamePoint': ['Game point now.', 'Chance to close out the game.', 'One point away from taking the game.'],\n 'matchPoint': ['Match point!', 'One point away from victory!', 'Can they convert this match point?']\n };\n if (comments[event]) {\n const line = Phaser.Utils.Array.GetRandom(comments[event]);\n console.log(`Commentator: \"${line}\"`);\n this.commentators[event] = {\n line,\n lastPlayed: Date.now()\n };\n }\n },\n update: function (scene) {\n const now = Date.now();\n for (const key in this.sfx) {\n if (now - this.sfx[key].lastPlayed > 5000) {\n delete this.sfx[key];\n }\n }\n }\n };\n this.loadUserData();\n }\n async loadUserData() {\n try {\n const userData = await stateClient.getEntity('users', 'currentUser');\n if (userData) {\n globalPlayerData = userData;\n console.log('Loaded user data:', userData);\n } else {\n const newUser = {\n id: 'currentUser',\n ...globalPlayerData,\n createdAt: Date.now()\n };\n await stateClient.createEntity('users', newUser);\n console.log('Created new user data');\n }\n } catch (error) {\n console.error('Error loading user data:', error);\n }\n }\n createGameObjects() {\n const ballGraphics = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n ballGraphics.fillStyle(0xffff88, 1);\n ballGraphics.fillCircle(16, 16, 16);\n ballGraphics.lineStyle(2, 0xdddddd, 1);\n ballGraphics.beginPath();\n ballGraphics.arc(16, 16, 12, Phaser.Math.DegToRad(30), Phaser.Math.DegToRad(150), false);\n ballGraphics.arc(16, 16, 12, Phaser.Math.DegToRad(210), Phaser.Math.DegToRad(330), false);\n ballGraphics.strokePath();\n for (let i = 0; i < 40; i++) {\n const angle = Math.random() * Math.PI * 2;\n const radius = Math.random() * 14;\n const x = 16 + Math.cos(angle) * radius;\n const y = 16 + Math.sin(angle) * radius;\n ballGraphics.fillStyle(0xffffaa, 0.2);\n ballGraphics.fillCircle(x, y, 1);\n }\n ballGraphics.fillStyle(0xffffff, 0.5);\n ballGraphics.fillCircle(10, 10, 8);\n ballGraphics.fillStyle(0x000000, 0.3);\n ballGraphics.fillCircle(22, 22, 12);\n ballGraphics.generateTexture(\"ball\", 32, 32);\n this.createElementalBalls();\n this.createCourtElements();\n this.createPlayerCharacters();\n }\n createElementalBalls() {\n const fireBall = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n fireBall.fillStyle(0xff8800, 1);\n fireBall.fillCircle(16, 16, 16);\n for (let i = 0; i < 12; i++) {\n const angle = i * Math.PI / 6;\n const x = 16 + Math.cos(angle) * 16;\n const y = 16 + Math.sin(angle) * 16;\n fireBall.fillStyle(0xff0000, 0.7);\n fireBall.fillTriangle(16, 16, x, y, 16 + Math.cos(angle + 0.4) * 18, 16 + Math.sin(angle + 0.4) * 18);\n }\n fireBall.fillStyle(0xffff00, 0.6);\n fireBall.fillCircle(16, 16, 10);\n fireBall.fillStyle(0xffffff, 0.8);\n fireBall.fillCircle(16, 16, 5);\n fireBall.generateTexture(\"fireBall\", 32, 32);\n const iceBall = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n iceBall.fillStyle(0xaaddff, 0.8);\n iceBall.fillCircle(16, 16, 16);\n for (let i = 0; i < 8; i++) {\n const angle = i * Math.PI / 4;\n const x1 = 16 + Math.cos(angle) * 16;\n const y1 = 16 + Math.sin(angle) * 16;\n const x2 = 16 + Math.cos(angle + Math.PI / 4) * 16;\n const y2 = 16 + Math.sin(angle + Math.PI / 4) * 16;\n iceBall.fillStyle(0xffffff, 0.4);\n iceBall.fillTriangle(16, 16, x1, y1, x2, y2);\n }\n iceBall.fillStyle(0xffffff, 0.8);\n iceBall.fillCircle(12, 12, 5);\n for (let i = 0; i < 6; i++) {\n const angle = i * Math.PI / 3;\n const x = 16 + Math.cos(angle) * 16;\n const y = 16 + Math.sin(angle) * 16;\n iceBall.fillStyle(0xffffff, 0.7);\n iceBall.fillTriangle(x, y, 16 + Math.cos(angle) * 20, 16 + Math.sin(angle) * 20, 16 + Math.cos(angle + 0.2) * 16, 16 + Math.sin(angle + 0.2) * 16);\n }\n iceBall.generateTexture(\"iceBall\", 32, 32);\n const lightningBall = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n lightningBall.fillStyle(0x6666ff, 0.7);\n lightningBall.fillCircle(16, 16, 16);\n lightningBall.fillStyle(0xffffff, 0.8);\n lightningBall.fillCircle(16, 16, 10);\n for (let i = 0; i < 8; i++) {\n const angle = i * Math.PI / 4;\n const length = 16 + Math.random() * 5;\n lightningBall.fillStyle(0xffff00, 0.9);\n const points = [];\n points.push({\n x: 16,\n y: 16\n });\n let currentLength = 0;\n let segments = 3;\n let currentAngle = angle;\n for (let j = 0; j < segments; j++) {\n currentAngle += (Math.random() - 0.5) * 0.5;\n const segmentLength = length / segments;\n currentLength += segmentLength;\n points.push({\n x: 16 + Math.cos(currentAngle) * currentLength,\n y: 16 + Math.sin(currentAngle) * currentLength\n });\n if (Math.random() < 0.3) {\n const branchAngle = currentAngle + (Math.random() - 0.5) * 1;\n const branchLength = segmentLength * 0.6;\n lightningBall.fillStyle(0xffff00, 0.7);\n lightningBall.fillTriangle(points[points.length - 1].x, points[points.length - 1].y, 16 + Math.cos(branchAngle) * (currentLength + branchLength), 16 + Math.sin(branchAngle) * (currentLength + branchLength), 16 + Math.cos(branchAngle + 0.1) * (currentLength + branchLength * 0.8), 16 + Math.sin(branchAngle + 0.1) * (currentLength + branchLength * 0.8));\n }\n }\n for (let j = 1; j < points.length; j++) {\n lightningBall.lineStyle(2, 0xffff00, 0.9);\n lightningBall.lineBetween(points[j - 1].x, points[j - 1].y, points[j].x, points[j].y);\n }\n }\n lightningBall.fillStyle(0xffffff, 0.4);\n lightningBall.fillCircle(16, 16, 6);\n lightningBall.generateTexture(\"lightningBall\", 32, 32);\n }\n createCourtElements() {\n const netGraphics = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n netGraphics.fillStyle(0xdddddd, 1);\n netGraphics.fillRect(0, 0, 8, 300);\n for (let y = 10; y < 280; y += 10) {\n netGraphics.fillStyle(0xffffff, 0.8);\n netGraphics.fillRect(0, y, 8, 5);\n }\n netGraphics.generateTexture(\"net\", 8, 300);\n const courtMarkings = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n courtMarkings.fillStyle(0xffffff, 0.8);\n courtMarkings.fillRect(0, 0, 600, 4);\n courtMarkings.fillRect(150, 0, 300, 4);\n courtMarkings.fillRect(298, 0, 4, 300);\n courtMarkings.generateTexture(\"courtMarkings\", 600, 300);\n const courtSurface = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n courtSurface.fillStyle(0x44aa44, 1);\n courtSurface.fillRect(0, 0, 800, 600);\n courtSurface.lineStyle(1, 0x338833, 0.3);\n for (let x = 0; x < 800; x += 20) {\n courtSurface.lineBetween(x, 0, x, 600);\n }\n for (let y = 0; y < 600; y += 20) {\n courtSurface.lineBetween(0, y, 800, y);\n }\n courtSurface.generateTexture(\"courtSurface\", 800, 600);\n }\n createPlayerCharacters() {\n const playerBody = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n playerBody.fillStyle(0x3366cc, 1);\n playerBody.fillRoundedRect(10, 25, 30, 50, 10);\n playerBody.fillStyle(0xffddbb, 1);\n playerBody.fillCircle(25, 15, 15);\n playerBody.fillStyle(0x000000, 1);\n playerBody.fillCircle(20, 12, 2);\n playerBody.fillCircle(30, 12, 2);\n playerBody.fillStyle(0x3366cc, 1);\n playerBody.fillRect(5, 40, 10, 30);\n playerBody.fillRect(35, 40, 10, 30);\n playerBody.fillRect(15, 75, 10, 25);\n playerBody.fillRect(25, 75, 10, 25);\n playerBody.generateTexture(\"playerBody\", 50, 100);\n const aiBody = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n aiBody.fillStyle(0xcc3366, 1);\n aiBody.fillRoundedRect(10, 25, 30, 50, 10);\n aiBody.fillStyle(0xffddbb, 1);\n aiBody.fillCircle(25, 15, 15);\n aiBody.fillStyle(0x000000, 1);\n aiBody.fillCircle(20, 12, 2);\n aiBody.fillCircle(30, 12, 2);\n aiBody.fillStyle(0xcc3366, 1);\n aiBody.fillRect(5, 40, 10, 30);\n aiBody.fillRect(35, 40, 10, 30);\n aiBody.fillRect(15, 75, 10, 25);\n aiBody.fillRect(25, 75, 10, 25);\n aiBody.generateTexture(\"aiBody\", 50, 100);\n this.createTennisRackets();\n }\n createTennisRackets() {\n const racketGraphics = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n racketGraphics.fillStyle(0x995522, 1);\n racketGraphics.fillRect(20, 70, 10, 40);\n racketGraphics.fillStyle(0x444444, 1);\n racketGraphics.fillEllipse(25, 40, 25, 40);\n racketGraphics.fillStyle(0x222222, 0.6);\n racketGraphics.fillEllipse(25, 40, 20, 35);\n racketGraphics.lineStyle(1, 0xffffff, 0.8);\n for (let y = 15; y <= 65; y += 7) {\n racketGraphics.lineBetween(10, y, 40, y);\n }\n for (let x = 10; x <= 40; x += 7) {\n racketGraphics.lineBetween(x, 15, x, 65);\n }\n racketGraphics.lineStyle(1, 0x000000, 0.5);\n for (let y = 75; y <= 105; y += 5) {\n racketGraphics.lineBetween(20, y, 30, y);\n }\n racketGraphics.fillStyle(0xffffff, 0.3);\n racketGraphics.fillEllipse(20, 35, 10, 20);\n racketGraphics.generateTexture(\"racket\", 50, 110);\n const paddleGraphics = this.make.graphics({\n x: 0,\n y: 0,\n add: false\n });\n paddleGraphics.fillStyle(0xffffff, 0);\n paddleGraphics.fillRect(0, 0, 20, 100);\n paddleGraphics.generateTexture(\"paddle\", 20, 100);\n }\n}\nclass GameScene extends Phaser.Scene {\n constructor() {\n super({\n key: \"GameScene\"\n });\n this.playerScore = 0;\n this.aiScore = 0;\n this.winScore = 5;\n this.playerSpeed = 400;\n this.aiSpeed = 300;\n this.ballSpeed = 400;\n this.activePowerUps = [];\n this.balls = [];\n this.powerUpTimer = 0;\n this.powerUpInterval = Phaser.Math.Between(10000, 15000);\n this.isPaused = false;\n this.comboCount = 0;\n this.comboMultiplier = 1;\n this.maxComboMultiplier = 1.5;\n this.isSuperShotCharging = false;\n this.superShotCharge = 0;\n this.maxSuperShotCharge = 100;\n this.superShotChargeRate = 50;\n this.warpIntensity = 0;\n this.noise2D = createNoise2D();\n this.warpTime = 0;\n this.coins = 0;\n this.unlockedSkins = [\"defaultSkin\"];\n this.currentSkin = \"defaultSkin\";\n this.skinPrices = {\n \"curveSkin\": 50,\n \"powerSkin\": 100,\n \"speedSkin\": 150,\n \"gravitySkin\": 200\n };\n }\n create() {\n this.createBackground();\n this.createClouds();\n this.createBoundaries();\n this.createPaddles();\n this.createBall();\n this.setupCollisions();\n this.createUI();\n this.setupControls();\n this.createStartButton();\n this.distortionContainer = this.add.container(0, 0);\n this.distortionContainer.setDepth(-80);\n this.cloudWarpContainer = this.add.container(0, 0);\n this.cloudWarpContainer.setDepth(-90);\n const comboStyle = {\n font: \"bold 28px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000000\",\n strokeThickness: 4\n };\n this.comboText = this.add.text(this.cameras.main.width / 2, 80, \"\", comboStyle);\n this.comboText.setOrigin(0.5);\n this.comboText.setDepth(100);\n this.comboText.setAlpha(0);\n this.shopButton = this.add.rectangle(this.cameras.main.width - 60, this.cameras.main.height - 30, 100, 40, 0x4499ff, 1);\n this.shopButton.setStrokeStyle(2, 0xffffff, 1);\n this.shopText = this.add.text(this.cameras.main.width - 60, this.cameras.main.height - 30, \"SHOP\", {\n font: \"16px Arial\",\n fill: \"#ffffff\"\n });\n this.shopText.setOrigin(0.5);\n this.shopButton.setInteractive({\n useHandCursor: true\n }).on(\"pointerdown\", () => {\n this.openShop();\n });\n }\n createBackground() {\n this.createStadium();\n this.createTennisCourt();\n this.createDecorativeElements();\n }\n createStadium() {\n const width = this.cameras.main.width;\n const height = this.cameras.main.height;\n const gradientSegments = 20;\n const segmentHeight = height / 2 / gradientSegments;\n for (let i = 0; i < gradientSegments; i++) {\n const ratio = i / (gradientSegments - 1);\n const r = Math.floor(100 + (180 - 100) * ratio);\n const g = Math.floor(150 + (220 - 150) * ratio);\n const b = Math.floor(220 + (255 - 220) * ratio);\n const segmentColor = Phaser.Display.Color.GetColor(r, g, b);\n const segment = this.add.rectangle(width / 2, i * segmentHeight, width, segmentHeight + 1, segmentColor);\n segment.setDepth(-100);\n }\n const standLeft = this.add.graphics();\n standLeft.fillStyle(0x333344, 1);\n standLeft.fillRect(0, 0, width * 0.15, height);\n standLeft.fillStyle(0x444455, 1);\n for (let y = 20; y < height; y += 15) {\n for (let x = 10; x < width * 0.15; x += 15) {\n standLeft.fillCircle(x, y, 4);\n }\n }\n standLeft.setDepth(-98);\n const standRight = this.add.graphics();\n standRight.fillStyle(0x333344, 1);\n standRight.fillRect(width * 0.85, 0, width * 0.15, height);\n standRight.fillStyle(0x444455, 1);\n for (let y = 20; y < height; y += 15) {\n for (let x = width * 0.85 + 10; x < width; x += 15) {\n standRight.fillCircle(x, y, 4);\n }\n }\n standRight.setDepth(-98);\n }\n createTennisCourt() {\n const width = this.cameras.main.width;\n const height = this.cameras.main.height;\n const courtBase = this.add.graphics();\n courtBase.fillStyle(0x44aa44, 1);\n const topWidth = width * 0.7;\n const bottomWidth = width * 0.9;\n courtBase.beginPath();\n courtBase.moveTo((width - bottomWidth) / 2, height * 0.8);\n courtBase.lineTo((width + bottomWidth) / 2, height * 0.8);\n courtBase.lineTo((width + topWidth) / 2, height * 0.2);\n courtBase.lineTo((width - topWidth) / 2, height * 0.2);\n courtBase.closePath();\n courtBase.fillPath();\n courtBase.setDepth(-97);\n const courtTexture = this.add.graphics();\n courtTexture.lineStyle(1, 0x338833, 0.3);\n for (let percent = 0.2; percent <= 0.8; percent += 0.05) {\n const lineY = height * percent;\n const lineWidthRatio = (percent - 0.2) / 0.6;\n const lineWidth = topWidth + (bottomWidth - topWidth) * lineWidthRatio;\n const startX = (width - lineWidth) / 2;\n const endX = (width + lineWidth) / 2;\n courtTexture.lineBetween(startX, lineY, endX, lineY);\n }\n for (let xPercent = 0; xPercent <= 1; xPercent += 0.05) {\n const topX = (width - topWidth) / 2 + topWidth * xPercent;\n const bottomX = (width - bottomWidth) / 2 + bottomWidth * xPercent;\n courtTexture.lineBetween(topX, height * 0.2, bottomX, height * 0.8);\n }\n courtTexture.setDepth(-96);\n const courtMarkings = this.add.graphics();\n courtMarkings.lineStyle(3, 0xffffff, 0.9);\n courtMarkings.strokeRect((width - bottomWidth) / 2, height * 0.8, bottomWidth, -height * 0.6);\n courtMarkings.lineBetween(width / 2, height * 0.2, width / 2, height * 0.8);\n const serviceLineY = height * 0.4;\n const serviceLineWidth = topWidth + (bottomWidth - topWidth) * 0.333;\n courtMarkings.lineBetween((width - serviceLineWidth) / 2, serviceLineY, (width + serviceLineWidth) / 2, serviceLineY);\n courtMarkings.setDepth(-95);\n const netTop = height * 0.3;\n const netBottom = height * 0.7;\n const netWidth = 8;\n const net = this.add.graphics();\n net.fillStyle(0x333333, 1);\n net.fillRect(width / 2 - netWidth / 2, netTop, netWidth, netBottom - netTop);\n net.lineStyle(1, 0xffffff, 0.5);\n for (let y = netTop + 5; y < netBottom; y += 10) {\n net.lineBetween(width / 2 - netWidth / 2, y, width / 2 + netWidth / 2, y);\n }\n for (let x = width / 2 - netWidth / 2 + 5; x < width / 2 + netWidth / 2; x += 10) {\n net.lineBetween(x, netTop, x, netBottom);\n }\n net.fillStyle(0x666666, 1);\n net.fillRect(width / 2 - netWidth / 2 - 5, netTop - 10, 10, 10);\n net.fillRect(width / 2 + netWidth / 2 - 5, netTop - 10, 10, 10);\n net.setDepth(-93);\n const shadow = this.add.graphics();\n shadow.fillStyle(0x000000, 0.2);\n shadow.fillRect(width / 2 - netWidth / 2 + 5, netBottom, netWidth + 10, 10);\n shadow.setDepth(-94);\n }\n createDecorativeElements() {\n const width = this.cameras.main.width;\n const height = this.cameras.main.height;\n const createLight = (x, y) => {\n const light = this.add.graphics();\n light.fillStyle(0x333333, 1);\n light.fillRect(x - 15, y - 5, 30, 10);\n light.fillStyle(0xffffaa, 0.1);\n light.fillTriangle(x, y, x - 100, y + 300, x + 100, y + 300);\n return light;\n };\n createLight(width * 0.2, 10).setDepth(-90);\n createLight(width * 0.8, 10).setDepth(-90);\n const scoreboardBg = this.add.graphics();\n scoreboardBg.fillStyle(0x222233, 0.8);\n scoreboardBg.fillRoundedRect(width / 2 - 150, 10, 300, 70, 10);\n scoreboardBg.setDepth(-85);\n for (let i = 0; i < 20; i++) {\n const x = Phaser.Math.Between(10, width * 0.15 - 10);\n const y = Phaser.Math.Between(50, height - 50);\n const spectator = this.add.circle(x, y, 4, 0xffddbb);\n this.tweens.add({\n targets: spectator,\n y: y - 5,\n duration: Phaser.Math.Between(500, 1500),\n yoyo: true,\n repeat: -1\n });\n }\n for (let i = 0; i < 20; i++) {\n const x = Phaser.Math.Between(width * 0.85 + 10, width - 10);\n const y = Phaser.Math.Between(50, height - 50);\n const spectator = this.add.circle(x, y, 4, 0xffddbb);\n this.tweens.add({\n targets: spectator,\n y: y - 5,\n duration: Phaser.Math.Between(500, 1500),\n yoyo: true,\n repeat: -1\n });\n }\n }\n createClouds() {\n this.clouds = this.add.group();\n for (let i = 0; i < 10; i++) {\n this.addCloud();\n }\n }\n addCloud() {\n const width = this.cameras.main.width;\n const height = this.cameras.main.height;\n const cloudTypes = [\"smallCloud\", \"mediumCloud\", \"largeCloud\"];\n const cloudType = Phaser.Utils.Array.GetRandom(cloudTypes);\n const x = Phaser.Math.Between(-50, width + 50);\n const y = Phaser.Math.Between(0, height);\n const cloud = this.add.image(x, y, cloudType);\n cloud.setAlpha(Phaser.Math.FloatBetween(0.5, 0.9));\n cloud.setDepth(-95);\n const speed = Phaser.Math.FloatBetween(10, 30);\n cloud.speed = speed;\n this.clouds.add(cloud);\n }\n createBoundaries() {\n this.topBoundary = this.physics.add.sprite(this.cameras.main.width / 2, -10, \"paddle\");\n this.topBoundary.setDisplaySize(this.cameras.main.width, 20);\n this.topBoundary.setImmovable(true);\n this.topBoundary.visible = false;\n this.bottomBoundary = this.physics.add.sprite(this.cameras.main.width / 2, this.cameras.main.height + 10, \"paddle\");\n this.bottomBoundary.setDisplaySize(this.cameras.main.width, 20);\n this.bottomBoundary.setImmovable(true);\n this.bottomBoundary.visible = false;\n }\n createPaddles() {\n this.playerContainer = this.add.container(80, this.cameras.main.height / 2);\n this.playerBody = this.add.sprite(0, 0, \"playerBody\");\n this.playerRacket = this.add.sprite(30, 0, \"racket\");\n this.playerRacket.setOrigin(0.5, 0.4);\n this.playerRacket.angle = 30;\n this.playerContainer.add([this.playerBody, this.playerRacket]);\n const playerShadow = this.add.ellipse(0, 50, 60, 20, 0x000000, 0.3);\n this.playerContainer.add(playerShadow);\n playerShadow.setDepth(-1);\n this.playerPaddle = this.physics.add.sprite(80, this.cameras.main.height / 2, \"paddle\");\n this.playerPaddle.setImmovable(true);\n this.playerPaddle.setVisible(false);\n this.playerPaddle.originalHeight = this.playerPaddle.displayHeight;\n this.aiContainer = this.add.container(this.cameras.main.width - 80, this.cameras.main.height / 2);\n this.aiBody = this.add.sprite(0, 0, \"aiBody\");\n this.aiRacket = this.add.sprite(-30, 0, \"racket\");\n this.aiRacket.setOrigin(0.5, 0.4);\n this.aiRacket.angle = -30;\n this.aiRacket.setFlipX(true);\n this.aiContainer.add([this.aiBody, this.aiRacket]);\n const aiShadow = this.add.ellipse(0, 50, 60, 20, 0x000000, 0.3);\n this.aiContainer.add(aiShadow);\n aiShadow.setDepth(-1);\n this.aiPaddle = this.physics.add.sprite(this.cameras.main.width - 80, this.cameras.main.height / 2, \"paddle\");\n this.aiPaddle.setImmovable(true);\n this.aiPaddle.setVisible(false);\n this.aiPaddle.originalHeight = this.aiPaddle.displayHeight;\n this.createRacketAnimations();\n this.createPaddleEffects();\n }\n createRacketAnimations() {\n this.playerSwingTween = this.tweens.create({\n targets: this.playerRacket,\n angle: {\n from: 30,\n to: 110\n },\n duration: 150,\n ease: 'Power2',\n paused: true,\n yoyo: true,\n onComplete: () => {\n this.playerRacket.angle = 30;\n }\n });\n this.aiSwingTween = this.tweens.create({\n targets: this.aiRacket,\n angle: {\n from: -30,\n to: -110\n },\n duration: 150,\n ease: 'Power2',\n paused: true,\n yoyo: true,\n onComplete: () => {\n this.aiRacket.angle = -30;\n }\n });\n this.playerBodySwingTween = this.tweens.create({\n targets: this.playerBody,\n angle: {\n from: 0,\n to: 15\n },\n duration: 150,\n ease: 'Power2',\n paused: true,\n yoyo: true,\n onComplete: () => {\n this.playerBody.angle = 0;\n }\n });\n this.aiBodySwingTween = this.tweens.create({\n targets: this.aiBody,\n angle: {\n from: 0,\n to: -15\n },\n duration: 150,\n ease: 'Power2',\n paused: true,\n yoyo: true,\n onComplete: () => {\n this.aiBody.angle = 0;\n }\n });\n }\n createPaddleEffects() {\n this.playerRacketGlow = this.add.graphics();\n this.playerRacketGlow.fillStyle(0x4499ff, 0.3);\n this.playerRacketGlow.fillCircle(0, 0, 40);\n this.playerRacketGlow.setVisible(false);\n this.playerContainer.add(this.playerRacketGlow);\n this.playerRacketGlow.setDepth(-1);\n this.aiRacketGlow = this.add.graphics();\n this.aiRacketGlow.fillStyle(0xff4499, 0.3);\n this.aiRacketGlow.fillCircle(0, 0, 40);\n this.aiRacketGlow.setVisible(false);\n this.aiContainer.add(this.aiRacketGlow);\n this.aiRacketGlow.setDepth(-1);\n this.playerMoveParticles = this.add.particles(0, 0, \"ballHitParticle\", {\n follow: this.playerContainer,\n followOffset: {\n x: 0,\n y: 40\n },\n scale: {\n start: 0.4,\n end: 0\n },\n alpha: {\n start: 0.3,\n end: 0\n },\n speed: 20,\n lifespan: 200,\n frequency: -1,\n tint: 0x4499ff\n });\n this.aiMoveParticles = this.add.particles(0, 0, \"ballHitParticle\", {\n follow: this.aiContainer,\n followOffset: {\n x: 0,\n y: 40\n },\n scale: {\n start: 0.4,\n end: 0\n },\n alpha: {\n start: 0.3,\n end: 0\n },\n speed: 20,\n lifespan: 200,\n frequency: -1,\n tint: 0xff4499\n });\n }\n createBall() {\n this.ballContainer = this.add.container(this.cameras.main.width / 2, this.cameras.main.height / 2);\n this.ballSprite = this.add.sprite(0, 0, \"ball\");\n this.ballSprite.setScale(0.8);\n this.ballShadow = this.add.ellipse(0, 0, 20, 10, 0x000000, 0.3);\n this.ballShadow.setDepth(-20);\n this.ballContainer.add([this.ballSprite]);\n this.ball = this.physics.add.sprite(this.cameras.main.width / 2, this.cameras.main.height / 2, \"ball\");\n this.ball.setCollideWorldBounds(false);\n this.ball.setVisible(false);\n this.ball.setCircle(10);\n this.balls.push(this.ball);\n this.ballTrail = this.add.particles(0, 0, \"ballHitParticle\", {\n follow: this.ball,\n scale: {\n start: 0.7,\n end: 0\n },\n alpha: {\n start: 0.5,\n end: 0\n },\n speed: 20,\n lifespan: 300,\n frequency: 20,\n tint: 0xffffaa\n });\n this.ballShadowTween = this.tweens.create({\n targets: this.ballShadow,\n alpha: 0.1,\n scaleX: 0.5,\n scaleY: 0.5,\n duration: 500,\n yoyo: true,\n repeat: 0,\n paused: true\n });\n this.energyField = this.add.particles(0, 0, \"energyFieldParticle\", {\n follow: this.ball,\n scale: {\n start: 0.8,\n end: 0\n },\n alpha: {\n start: 0.7,\n end: 0\n },\n speed: 60,\n lifespan: 400,\n frequency: 10,\n tint: 0xffff00,\n emitting: false,\n blendMode: Phaser.BlendModes.ADD\n });\n this.ballGlow = this.add.sprite(0, 0, \"ball\");\n this.ballGlow.setScale(1.5);\n this.ballGlow.setTint(0xffff00);\n this.ballGlow.setAlpha(0.3);\n this.ballGlow.setBlendMode(Phaser.BlendModes.ADD);\n this.ballGlow.setVisible(false);\n this.ballSpinTween = this.tweens.create({\n targets: this.ballSprite,\n angle: 360,\n duration: 1000,\n repeat: -1,\n paused: false\n });\n this.ballHeight = 0;\n this.ballHeightDirection = 1;\n this.ballMaxHeight = 100;\n }\n setupCollisions() {\n this.physics.add.collider(this.balls, this.playerPaddle, this.hitPlayerPaddle, null, this);\n this.physics.add.collider(this.balls, this.aiPaddle, this.hitAiPaddle, null, this);\n this.physics.add.collider(this.balls, this.topBoundary, this.hitBoundary, null, this);\n this.physics.add.collider(this.balls, this.bottomBoundary, this.hitBoundary, null, this);\n }\n hitPlayerPaddle(ball, paddle) {\n if (this.playerSwingTween && !this.playerSwingTween.isPlaying()) {\n this.playerSwingTween.play();\n this.playerBodySwingTween.play();\n }\n if (this.playerRacketGlow) {\n this.playerRacketGlow.setVisible(true);\n this.time.delayedCall(300, () => {\n if (this.playerRacketGlow) {\n this.playerRacketGlow.setVisible(false);\n }\n });\n }\n this.ballHeight = 0;\n this.ballHeightDirection = 1;\n this.ballShadowTween.play();\n this.hitPaddle(ball, paddle, 1);\n this.incrementCombo();\n }\n hitAiPaddle(ball, paddle) {\n if (this.aiSwingTween && !this.aiSwingTween.isPlaying()) {\n this.aiSwingTween.play();\n this.aiBodySwingTween.play();\n }\n if (this.aiRacketGlow) {\n this.aiRacketGlow.setVisible(true);\n this.time.delayedCall(300, () => {\n if (this.aiRacketGlow) {\n this.aiRacketGlow.setVisible(false);\n }\n });\n }\n this.ballHeight = 0;\n this.ballHeightDirection = 1;\n this.ballShadowTween.play();\n this.hitPaddle(ball, paddle, -1);\n }\n hitPaddle(ball, paddle, direction) {\n let speedMultiplier = 1.05;\n let angleMultiplier = 1;\n let addedAngle = 0;\n if (paddle === this.playerPaddle) {\n if (this.currentSkin === \"curveSkin\") {\n addedAngle = 0.2 * Math.sin(this.time.now / 500);\n } else if (this.currentSkin === \"powerSkin\") {\n speedMultiplier = 1.15;\n } else if (this.currentSkin === \"speedSkin\") {\n speedMultiplier = 1.1;\n angleMultiplier = 1.2;\n } else if (this.currentSkin === \"gravitySkin\") {\n addedAngle = (Math.random() - 0.5) * 0.3;\n }\n }\n speedMultiplier *= this.comboMultiplier;\n const relativeImpact = (ball.y - paddle.y) / paddle.displayHeight * 2;\n const currentVelocity = ball.body.velocity;\n const speed = Math.sqrt(currentVelocity.x * currentVelocity.x + currentVelocity.y * currentVelocity.y);\n const newSpeed = Math.min(speed * speedMultiplier, 800);\n const angle = relativeImpact * Math.PI / 4 * angleMultiplier + addedAngle;\n ball.body.setVelocity(Math.cos(angle) * newSpeed * direction, Math.sin(angle) * newSpeed);\n const intensity = Math.min(1 + this.comboCount * 0.1, 2);\n this.createHitEffect(ball.x, ball.y, intensity);\n if (this.comboCount > 3) {\n this.warpReality(ball.x, ball.y, this.comboCount * 0.1);\n }\n }\n hitBoundary(ball, boundary) {\n this.createSmallHitEffect(ball.x, ball.y);\n }\n createHitEffect(x, y, intensity = 1) {\n const emitter = this.add.particles(x, y, \"ballHitParticle\", {\n speed: {\n min: 100 * intensity,\n max: 200 * intensity\n },\n scale: {\n start: 1 * intensity,\n end: 0\n },\n alpha: {\n start: 1,\n end: 0\n },\n lifespan: 300 * intensity,\n blendMode: Phaser.BlendModes.ADD,\n emitting: false,\n tint: this.getComboColor()\n });\n const particleCount = Math.floor(15 * intensity);\n emitter.explode(particleCount);\n if (intensity > 1) {\n this.cameras.main.shake(100 * (intensity - 1), 0.005 * (intensity - 1));\n }\n this.time.delayedCall(300 * intensity, () => {\n emitter.destroy();\n });\n }\n warpReality(x, y, intensity) {\n this.warpIntensity = intensity;\n this.warpTime = this.time.now;\n const distortEmitter = this.add.particles(x, y, \"distortionParticle\", {\n speed: {\n min: 50,\n max: 150\n },\n scale: {\n start: 2 * intensity,\n end: 0\n },\n alpha: {\n start: 0.3,\n end: 0\n },\n lifespan: 500,\n blendMode: Phaser.BlendModes.SCREEN,\n tint: 0xffffff,\n emitting: false\n });\n distortEmitter.explode(10);\n const cleanupTimer = this.time.delayedCall(500, () => {\n if (distortEmitter && !distortEmitter.destroyed) {\n distortEmitter.destroy();\n }\n });\n const velocityTimers = [];\n const activeBalls = this.balls.filter(ball => ball && ball.active && ball.body);\n activeBalls.forEach(ball => {\n const currentVelocity = {\n x: ball.body.velocity.x,\n y: ball.body.velocity.y\n };\n ball.body.setVelocity(currentVelocity.x * 0.3, currentVelocity.y * 0.3);\n const timer = this.time.delayedCall(200, () => {\n if (ball && ball.active && ball.body) {\n ball.body.setVelocity(currentVelocity.x * 1.1, currentVelocity.y * 1.1);\n }\n });\n velocityTimers.push(timer);\n });\n this._activeEffects = this._activeEffects || [];\n this._activeEffects.push({\n emitter: distortEmitter,\n cleanupTimer: cleanupTimer,\n velocityTimers: velocityTimers\n });\n this._activeEffects = this._activeEffects.filter(effect => {\n if (effect.emitter && !effect.emitter.destroyed) {\n return true;\n }\n return false;\n });\n }\n createSmallHitEffect(x, y) {\n const emitter = this.add.particles(x, y, \"ballHitParticle\", {\n speed: {\n min: 50,\n max: 100\n },\n scale: {\n start: 0.5,\n end: 0\n },\n alpha: {\n start: 0.7,\n end: 0\n },\n lifespan: 200,\n blendMode: Phaser.BlendModes.ADD,\n emitting: false\n });\n emitter.explode(5);\n this.time.delayedCall(200, () => {\n emitter.destroy();\n });\n }\n createUI() {\n const scoreStyle = {\n font: \"32px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000000\",\n strokeThickness: 4\n };\n this.playerScoreText = this.add.text(this.cameras.main.width / 4, 30, \"0\", scoreStyle);\n this.playerScoreText.setOrigin(0.5);\n this.aiScoreText = this.add.text(this.cameras.main.width * 3 / 4, 30, \"0\", scoreStyle);\n this.aiScoreText.setOrigin(0.5);\n const labelStyle = {\n font: \"18px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000000\",\n strokeThickness: 3\n };\n this.add.text(this.cameras.main.width / 4, 60, \"YOU\", labelStyle).setOrigin(0.5);\n this.add.text(this.cameras.main.width * 3 / 4, 60, \"AI\", labelStyle).setOrigin(0.5);\n this.powerUpIndicator = this.add.container(80, this.cameras.main.height - 80);\n const indicatorBg = this.add.rectangle(0, 0, 140, 50, 0x000000, 0.6);\n indicatorBg.setStrokeStyle(2, 0xffffff, 0.8);\n this.powerUpText = this.add.text(0, 0, \"No Power-Up\", {\n font: \"16px Arial\",\n fill: \"#ffffff\"\n });\n this.powerUpText.setOrigin(0.5);\n this.powerUpIndicator.add([indicatorBg, this.powerUpText]);\n this.coinDisplay = this.add.container(this.cameras.main.width - 80, 30);\n const coinBg = this.add.rectangle(0, 0, 120, 40, 0x000000, 0.6);\n coinBg.setStrokeStyle(2, 0xffdd00, 0.8);\n const coinIcon = this.add.sprite(-40, 0, \"coinPowerUp\");\n coinIcon.setScale(0.6);\n this.coinText = this.add.text(0, 0, \"0\", {\n font: \"18px Arial\",\n fill: \"#ffdd00\"\n });\n this.coinText.setOrigin(0, 0.5);\n this.coinDisplay.add([coinBg, coinIcon, this.coinText]);\n this.chargeBarContainer = this.add.container(this.cameras.main.width / 2, this.cameras.main.height - 30);\n this.chargeBarBg = this.add.rectangle(0, 0, 200, 15, 0x000000, 0.6);\n this.chargeBarBg.setStrokeStyle(1, 0xffffff, 0.8);\n this.chargeBar = this.add.rectangle(-100, 0, 0, 13, 0xffff00, 1);\n this.chargeBar.setOrigin(0, 0.5);\n this.chargeBarContainer.add([this.chargeBarBg, this.chargeBar]);\n this.chargeBarContainer.setVisible(false);\n this.mobileControlsHint = this.add.text(this.cameras.main.width / 2, this.cameras.main.height - 60, \"Tap top/bottom half of screen to move up/down. Double tap for Super Shot!\", {\n font: \"14px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000000\",\n strokeThickness: 2,\n align: \"center\"\n });\n this.mobileControlsHint.setOrigin(0.5);\n this.mobileControlsHint.visible = false;\n if (this.scale.width < 768) {\n this.mobileControlsHint.visible = true;\n }\n this.skinIndicator = this.add.container(80, 30);\n const skinBg = this.add.rectangle(0, 0, 140, 40, 0x000000, 0.6);\n skinBg.setStrokeStyle(2, 0xffffff, 0.8);\n this.skinText = this.add.text(0, 0, \"Default Skin\", {\n font: \"14px Arial\",\n fill: \"#ffffff\"\n });\n this.skinText.setOrigin(0.5);\n this.skinIndicator.add([skinBg, this.skinText]);\n }\n setupControls() {\n this.cursors = this.input.keyboard.createCursorKeys();\n this.input.keyboard.on(\"keydown-SPACE\", () => {\n if (!this.isPaused && !this.isSuperShotCharging) {\n this.startSuperShotCharge();\n }\n });\n this.input.keyboard.on(\"keyup-SPACE\", () => {\n if (!this.isPaused && this.isSuperShotCharging) {\n this.releaseSuperShot();\n }\n });\n this.input.keyboard.on(\"keydown-R\", () => {\n this.resetGame();\n });\n this.input.keyboard.on(\"keydown-S\", () => {\n this.openShop();\n });\n this.input.on(\"pointerdown\", pointer => {\n if (this.isPaused) return;\n if (pointer.y < this.cameras.main.height / 2) {\n this.mobileControlUp = true;\n } else {\n this.mobileControlDown = true;\n }\n });\n this.input.on(\"pointerup\", () => {\n this.mobileControlUp = false;\n this.mobileControlDown = false;\n if (this.isSuperShotCharging) {\n this.releaseSuperShot();\n }\n });\n this.input.on(\"pointerdown\", pointer => {\n const currentTime = this.time.now;\n if (this.lastTapTime && currentTime - this.lastTapTime < 300) {\n this.startSuperShotCharge();\n this.time.delayedCall(500, () => {\n if (this.isSuperShotCharging) {\n this.releaseSuperShot();\n }\n });\n }\n this.lastTapTime = currentTime;\n });\n }\n startSuperShotCharge() {\n if (this.isPaused) return;\n this.isSuperShotCharging = true;\n this.superShotCharge = 0;\n this.chargeBarContainer.setVisible(true);\n this.ballGlow.setVisible(true);\n this.energyField.start();\n }\n updateSuperShotCharge(delta) {\n if (!this.isSuperShotCharging) return;\n this.superShotCharge = Math.min(this.superShotCharge + this.superShotChargeRate * delta, this.maxSuperShotCharge);\n const width = this.superShotCharge / this.maxSuperShotCharge * 200;\n this.chargeBar.width = width;\n const chargeRatio = this.superShotCharge / this.maxSuperShotCharge;\n this.ballGlow.clear();\n this.ballGlow.fillStyle(0xffff00, 0.3 + chargeRatio * 0.4);\n this.ballGlow.fillCircle(this.ball.x, this.ball.y, 20 + chargeRatio * 20);\n if (chargeRatio > 0.5) {\n const intensity = (chargeRatio - 0.5) * 2 * 0.2;\n this.warpIntensity = intensity;\n this.warpTime = this.time.now;\n }\n this.energyField.setFrequency(10 - chargeRatio * 8);\n this.energyField.setScale({\n start: 0.5 + chargeRatio,\n end: 0\n });\n }\n releaseSuperShot() {\n if (!this.isSuperShotCharging) return;\n let closestBall = null;\n let closestDistance = Infinity;\n this.balls.forEach(ball => {\n if (ball && ball.active && ball.body) {\n const distance = Phaser.Math.Distance.Between(ball.x, ball.y, this.playerPaddle.x, this.playerPaddle.y);\n if (distance < closestDistance) {\n closestDistance = distance;\n closestBall = ball;\n }\n }\n });\n if (closestBall && closestDistance < 300) {\n const dx = this.aiPaddle.x - closestBall.x;\n const dy = this.aiPaddle.y - closestBall.y;\n const angle = Math.atan2(dy, dx);\n const chargeRatio = this.superShotCharge / this.maxSuperShotCharge;\n const superSpeed = 600 + chargeRatio * 600;\n closestBall.body.setVelocity(Math.cos(angle) * superSpeed, Math.sin(angle) * superSpeed);\n this.createSuperShotEffect(closestBall, chargeRatio);\n this.resetCombo();\n if (chargeRatio > 0.8) {\n this.warpReality(closestBall.x, closestBall.y, chargeRatio * 2);\n this.cameras.main.shake(200 * chargeRatio, 0.01 * chargeRatio);\n this.time.delayedCall(50, () => {\n if (this.cameras && this.cameras.main) {\n this.cameras.main.setZoom(1.1);\n this.time.delayedCall(150, () => {\n if (this.cameras && this.cameras.main) {\n this.cameras.main.setZoom(1);\n }\n });\n }\n });\n }\n }\n this.isSuperShotCharging = false;\n this.superShotCharge = 0;\n if (this.chargeBar) this.chargeBar.width = 0;\n if (this.chargeBarContainer) this.chargeBarContainer.setVisible(false);\n if (this.ballGlow) this.ballGlow.setVisible(false);\n if (this.energyField) this.energyField.stop();\n }\n createSuperShotEffect(ball, intensity = 1) {\n if (!ball || !ball.active) return;\n if (ball.superTrail && !ball.superTrail.destroyed) {\n ball.superTrail.destroy();\n ball.superTrail = null;\n }\n ball.superTrail = this.add.particles(ball.x, ball.y, \"superShotParticle\", {\n follow: ball,\n scale: {\n start: 1 * intensity,\n end: 0\n },\n alpha: {\n start: 0.7,\n end: 0\n },\n speed: 60 * intensity,\n lifespan: 500 * intensity,\n frequency: Math.max(2, 10 - intensity * 8),\n blendMode: Phaser.BlendModes.ADD,\n tint: 0xffff00\n });\n ball.on('destroy', () => {\n if (ball.superTrail && !ball.superTrail.destroyed) {\n ball.superTrail.destroy();\n ball.superTrail = null;\n }\n });\n this.time.delayedCall(2000 * intensity, () => {\n if (ball && ball.active && ball.superTrail && !ball.superTrail.destroyed) {\n ball.superTrail.destroy();\n ball.superTrail = null;\n }\n });\n this.tweens.add({\n targets: ball,\n alpha: 0.2,\n duration: 50,\n yoyo: true,\n repeat: 5\n });\n this.cameras.main.shake(100 * intensity, 0.005 * intensity);\n if (intensity > 0.5) {\n const coinsToAdd = Math.floor(intensity * 5);\n this.addCoins(coinsToAdd);\n }\n this.warpIntensity = intensity;\n this.warpTime = this.time.now;\n }\n incrementCombo() {\n this.comboCount++;\n this.comboMultiplier = Math.min(1 + this.comboCount * 0.05, this.maxComboMultiplier);\n this.comboText.setText(`COMBO x${this.comboCount}`);\n this.comboText.setAlpha(1);\n this.comboText.setScale(1, 1);\n this.comboText.setTint(this.getComboColor());\n this.tweens.killTweensOf(this.comboText);\n this.tweens.add({\n targets: this.comboText,\n scaleX: 1.3,\n scaleY: 1.3,\n duration: 100,\n yoyo: true,\n ease: 'Bounce.easeOut'\n });\n this.tweens.add({\n targets: this.comboText,\n alpha: 0.7,\n duration: 2000,\n delay: 1000\n });\n if (this.comboCount % 5 === 0) {\n this.addCoins(Math.floor(this.comboCount / 5));\n }\n this.updateSkyForCombo();\n }\n resetCombo() {\n this.comboCount = 0;\n this.comboMultiplier = 1;\n this.comboText.setAlpha(0);\n this.updateSkyForCombo();\n }\n getComboColor() {\n if (this.comboCount < 3) return 0xffffff;\n if (this.comboCount < 5) return 0x00ffff;\n if (this.comboCount < 8) return 0xffff00;\n if (this.comboCount < 12) return 0xff00ff;\n return 0xff0000;\n }\n updateSkyForCombo() {\n if (this.comboCount > 10) {\n this.warpIntensity = Math.min(0.3 + (this.comboCount - 10) * 0.05, 0.8);\n } else if (this.comboCount > 5) {\n this.warpIntensity = Math.min(0.1 + (this.comboCount - 5) * 0.04, 0.3);\n } else {\n this.warpIntensity = Math.max(this.warpIntensity - 0.02, 0);\n }\n }\n createStartButton() {\n this.isPaused = true;\n const overlay = this.add.graphics();\n overlay.fillStyle(0x000000, 0.8);\n overlay.fillRect(0, 0, this.cameras.main.width, this.cameras.main.height);\n const vignette = this.add.graphics();\n const centerX = this.cameras.main.width / 2;\n const centerY = this.cameras.main.height / 2;\n const maxRadius = Math.max(this.cameras.main.width, this.cameras.main.height);\n for (let i = 0; i < 5; i++) {\n const radius = maxRadius * (1 - i * 0.2);\n const alpha = 0.1 + i * 0.08;\n vignette.fillStyle(0x000000, alpha);\n vignette.fillCircle(centerX, centerY, radius);\n }\n const titleContainer = this.add.container(this.cameras.main.width / 2, this.cameras.main.height / 3);\n const titleGlow = this.add.text(0, 0, \"TENNIS SMASH\", {\n font: \"bold 60px Arial\",\n fill: \"#4488ff\",\n stroke: \"#000000\",\n strokeThickness: 12\n });\n titleGlow.setOrigin(0.5);\n titleGlow.setAlpha(0.5);\n titleGlow.setScale(1.05);\n const title = this.add.text(0, 0, \"TENNIS SMASH\", {\n font: \"bold 60px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000000\",\n strokeThickness: 8\n });\n title.setOrigin(0.5);\n const subtitle = this.add.text(0, 70, \"PROFESSIONAL EDITION\", {\n font: \"30px Arial\",\n fill: \"#aaaaff\",\n stroke: \"#000000\",\n strokeThickness: 4\n });\n subtitle.setOrigin(0.5);\n titleContainer.add([titleGlow, title, subtitle]);\n const buttonY = this.cameras.main.height / 2 + 50;\n const buttonShadow = this.add.rectangle(this.cameras.main.width / 2 + 5, buttonY + 5, 220, 70, 0x000000, 0.5);\n buttonShadow.setOrigin(0.5);\n const startButton = this.add.rectangle(this.cameras.main.width / 2, buttonY, 220, 70, 0x4499ff, 1);\n startButton.setOrigin(0.5);\n startButton.setStrokeStyle(4, 0x66aaff, 1);\n const buttonHighlight = this.add.rectangle(this.cameras.main.width / 2, buttonY - 20, 220, 15, 0x88ccff, 0.6);\n buttonHighlight.setOrigin(0.5);\n const startText = this.add.text(this.cameras.main.width / 2, buttonY, \"START GAME\", {\n font: \"bold 28px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000066\",\n strokeThickness: 4\n });\n startText.setOrigin(0.5);\n const shine = this.add.graphics();\n shine.fillStyle(0xffffff, 0.5);\n shine.fillRect(-100, -35, 60, 70);\n shine.setRotation(Math.PI / 4);\n shine.x = this.cameras.main.width / 2 - 150;\n shine.y = buttonY;\n this.tweens.add({\n targets: shine,\n x: this.cameras.main.width / 2 + 150,\n duration: 2000,\n loop: -1,\n delay: 1000\n });\n const ballContainer = this.add.container(this.cameras.main.width / 2, buttonY + 120);\n const ball = this.add.sprite(0, 0, \"ball\");\n ball.setScale(1.5);\n const ballShadow = this.add.ellipse(20, 30, 40, 15, 0x000000, 0.3);\n ballShadow.setDepth(-1);\n ballContainer.add([ballShadow, ball]);\n this.tweens.add({\n targets: ball,\n y: -15,\n duration: 1000,\n yoyo: true,\n repeat: -1,\n ease: 'Sine.easeInOut'\n });\n this.tweens.add({\n targets: ball,\n angle: 360,\n duration: 2000,\n repeat: -1\n });\n this.tweens.add({\n targets: ballShadow,\n scaleX: 0.7,\n scaleY: 0.7,\n alpha: 0.2,\n duration: 1000,\n yoyo: true,\n repeat: -1,\n ease: 'Sine.easeInOut'\n });\n startButton.setInteractive({\n useHandCursor: true\n }).on(\"pointerover\", () => {\n startButton.fillColor = 0x66aaff;\n startText.setScale(1.1);\n }).on(\"pointerout\", () => {\n startButton.fillColor = 0x4499ff;\n startText.setScale(1);\n }).on(\"pointerdown\", () => {\n this.cameras.main.flash(500, 255, 255, 255);\n this.time.delayedCall(300, () => {\n overlay.destroy();\n vignette.destroy();\n titleContainer.destroy();\n buttonShadow.destroy();\n startButton.destroy();\n buttonHighlight.destroy();\n startText.destroy();\n shine.destroy();\n ballContainer.destroy();\n this.startGame();\n });\n });\n this.startScreen = this.add.container(0, 0, [overlay, vignette, titleContainer, buttonShadow, startButton, buttonHighlight, startText, shine, ballContainer]);\n this.startScreen.setDepth(100);\n this.tweens.add({\n targets: titleContainer,\n y: '-=10',\n duration: 2000,\n yoyo: true,\n repeat: -1,\n ease: 'Sine.easeInOut'\n });\n }\n startGame() {\n this.isPaused = false;\n this.launchBall();\n this.powerUpTimer = this.time.now + this.powerUpInterval;\n }\n launchBall() {\n this.ball.setPosition(this.cameras.main.width / 2, this.cameras.main.height / 2);\n const direction = Math.random() > 0.5 ? 1 : -1;\n const angle = Phaser.Math.DegToRad(Phaser.Math.Between(-30, 30));\n this.ball.body.setVelocity(Math.cos(angle) * this.ballSpeed * direction, Math.sin(angle) * this.ballSpeed);\n }\n spawnPowerUp() {\n const powerUpTypes = [\"jetpack\", \"giantRacket\", \"multiBall\", \"coin\"];\n const type = Phaser.Utils.Array.GetRandom(powerUpTypes);\n const x = Phaser.Math.Between(this.cameras.main.width * 0.2, this.cameras.main.width * 0.8);\n const y = Phaser.Math.Between(this.cameras.main.height * 0.2, this.cameras.main.height * 0.8);\n const powerUp = this.physics.add.sprite(x, y, type + \"PowerUp\");\n const rotationTween = this.tweens.add({\n targets: powerUp,\n angle: 360,\n duration: 3000,\n repeat: -1\n });\n const floatTween = this.tweens.add({\n targets: powerUp,\n y: y + 20,\n duration: 1000,\n yoyo: true,\n repeat: -1\n });\n const glowColor = type === \"jetpack\" ? 0xff0000 : type === \"giantRacket\" ? 0x00ff00 : type === \"multiBall\" ? 0x0000ff : 0xffdd00;\n const glow = this.add.graphics();\n glow.fillStyle(glowColor, 0.3);\n glow.fillCircle(0, 0, 30);\n const powerUpContainer = this.add.container(x, y, [glow, powerUp]);\n powerUpContainer.setDepth(10);\n powerUp.powerUpType = type;\n powerUp.container = powerUpContainer;\n powerUp.tweens = [rotationTween, floatTween];\n this.balls.forEach(ball => {\n if (ball && ball.active) {\n this.physics.add.overlap(ball, powerUp, () => {\n this.collectPowerUp(powerUp);\n }, null, this);\n }\n });\n const expirationTimer = this.time.delayedCall(10000, () => {\n if (powerUp.active) {\n if (powerUp.body) {\n powerUp.body.enable = false;\n }\n this.createPowerUpExpireEffect(powerUp.x, powerUp.y, glowColor);\n powerUp.tweens.forEach(tween => {\n if (tween && tween.isPlaying) {\n tween.stop();\n }\n });\n powerUpContainer.destroy();\n }\n });\n powerUp.expirationTimer = expirationTimer;\n }\n collectPowerUp(powerUp) {\n if (!powerUp || !powerUp.active) return;\n const type = powerUp.powerUpType;\n const x = powerUp.x;\n const y = powerUp.y;\n if (powerUp.expirationTimer) {\n powerUp.expirationTimer.remove();\n powerUp.expirationTimer = null;\n }\n if (powerUp.tweens && Array.isArray(powerUp.tweens)) {\n powerUp.tweens.forEach(tween => {\n if (tween && tween.isPlaying) {\n tween.stop();\n }\n });\n }\n if (powerUp.body) {\n powerUp.body.enable = false;\n }\n if (powerUp.container && !powerUp.container.destroyed) {\n powerUp.container.destroy();\n }\n switch (type) {\n case \"jetpack\":\n this.applyJetpackPowerUp();\n break;\n case \"giantRacket\":\n this.applyGiantRacketPowerUp();\n break;\n case \"multiBall\":\n this.applyMultiBallPowerUp();\n break;\n case \"coin\":\n this.applyCoinPowerUp();\n break;\n }\n this.createPowerUpCollectEffect(x, y);\n if (type !== \"coin\") {\n this.incrementCombo();\n }\n }\n applyCoinPowerUp() {\n const coinsToAdd = Phaser.Math.Between(5, 20);\n this.addCoins(coinsToAdd);\n }\n addCoins(amount) {\n this.coins += amount;\n this.coinText.setText(this.coins.toString());\n this.tweens.add({\n targets: this.coinText,\n scale: 1.5,\n duration: 200,\n yoyo: true\n });\n const floatingText = this.add.text(this.coinDisplay.x, this.coinDisplay.y, `+${amount}`, {\n font: \"bold 18px Arial\",\n fill: \"#ffdd00\",\n stroke: \"#000000\",\n strokeThickness: 3\n });\n floatingText.setOrigin(0.5);\n this.tweens.add({\n targets: floatingText,\n y: this.coinDisplay.y - 50,\n alpha: 0,\n duration: 1500,\n onComplete: () => {\n floatingText.destroy();\n }\n });\n }\n createPowerUpCollectEffect(x, y) {\n const emitter = this.add.particles(x, y, \"ballHitParticle\", {\n speed: {\n min: 100,\n max: 300\n },\n scale: {\n start: 1.5,\n end: 0\n },\n alpha: {\n start: 1,\n end: 0\n },\n lifespan: 500,\n blendMode: Phaser.BlendModes.ADD,\n tint: [0xffff00, 0xff00ff, 0x00ffff],\n emitting: false\n });\n emitter.explode(30);\n this.time.delayedCall(500, () => {\n emitter.destroy();\n });\n }\n createPowerUpExpireEffect(x, y, color) {\n const emitter = this.add.particles(x, y, \"ballHitParticle\", {\n speed: {\n min: 50,\n max: 150\n },\n scale: {\n start: 1,\n end: 0\n },\n alpha: {\n start: 0.7,\n end: 0\n },\n lifespan: 400,\n tint: color,\n emitting: false\n });\n emitter.explode(15);\n this.time.delayedCall(400, () => {\n emitter.destroy();\n });\n }\n applyJetpackPowerUp() {\n const originalSpeed = this.playerSpeed;\n this.playerSpeed *= 2;\n this.updatePowerUpIndicator(\"JETPACK (2x Speed)\");\n const powerUp = {\n type: \"jetpack\",\n expireTime: this.time.now + 10000,\n cleanup: () => {\n this.playerSpeed = originalSpeed;\n this.updatePowerUpIndicator(\"No Power-Up\");\n if (this.jetpackEmitter && !this.jetpackEmitter.destroyed) {\n this.jetpackEmitter.destroy();\n }\n }\n };\n this.activePowerUps.push(powerUp);\n this.jetpackEmitter = this.add.particles(this.playerPaddle.x - 15, this.playerPaddle.y, \"ballHitParticle\", {\n follow: this.playerPaddle,\n followOffset: {\n x: -15,\n y: 0\n },\n scale: {\n start: 1,\n end: 0\n },\n alpha: {\n start: 1,\n end: 0\n },\n speed: {\n min: 50,\n max: 100\n },\n angle: {\n min: 160,\n max: 200\n },\n lifespan: 400,\n frequency: 20,\n tint: [0xff0000, 0xff8800]\n });\n }\n applyGiantRacketPowerUp() {\n this.playerPaddle.displayHeight = this.playerPaddle.originalHeight * 1.5;\n this.updatePowerUpIndicator(\"GIANT RACKET\");\n const powerUp = {\n type: \"giantRacket\",\n expireTime: this.time.now + 10000,\n cleanup: () => {\n this.playerPaddle.displayHeight = this.playerPaddle.originalHeight;\n this.updatePowerUpIndicator(\"No Power-Up\");\n }\n };\n this.activePowerUps.push(powerUp);\n }\n applyMultiBallPowerUp() {\n for (let i = 0; i < 2; i++) {\n this.createExtraBall();\n }\n this.updatePowerUpIndicator(\"MULTI-BALL\");\n const powerUp = {\n type: \"multiBall\",\n expireTime: this.time.now + 10000,\n cleanup: () => {\n this.updatePowerUpIndicator(\"No Power-Up\");\n }\n };\n this.activePowerUps.push(powerUp);\n }\n createExtraBall() {\n const extraBall = this.physics.add.sprite(this.cameras.main.width / 2, this.cameras.main.height / 2, \"ball\");\n const angle = Phaser.Math.DegToRad(Phaser.Math.Between(-60, 60));\n const direction = Math.random() > 0.5 ? 1 : -1;\n extraBall.body.setVelocity(Math.cos(angle) * this.ballSpeed * direction, Math.sin(angle) * this.ballSpeed);\n this.physics.add.collider(extraBall, this.playerPaddle, this.hitPlayerPaddle, null, this);\n this.physics.add.collider(extraBall, this.aiPaddle, this.hitAiPaddle, null, this);\n this.physics.add.collider(extraBall, this.topBoundary, this.hitBoundary, null, this);\n this.physics.add.collider(extraBall, this.bottomBoundary, this.hitBoundary, null, this);\n this.balls.push(extraBall);\n const extraBallTrail = this.add.particles(0, 0, \"ballHitParticle\", {\n follow: extraBall,\n scale: {\n start: 0.5,\n end: 0\n },\n alpha: {\n start: 0.3,\n end: 0\n },\n speed: 10,\n lifespan: 200,\n frequency: 40,\n tint: 0x44bbff\n });\n extraBall.trail = extraBallTrail;\n }\n updatePowerUpIndicator(text) {\n this.powerUpText.setText(text);\n this.tweens.add({\n targets: this.powerUpText,\n scale: 1.2,\n duration: 200,\n yoyo: true\n });\n }\n updatePowerUps() {\n const currentTime = this.time.now;\n if (currentTime > this.powerUpTimer) {\n this.spawnPowerUp();\n this.powerUpTimer = currentTime + this.powerUpInterval;\n }\n for (let i = this.activePowerUps.length - 1; i >= 0; i--) {\n const powerUp = this.activePowerUps[i];\n if (currentTime > powerUp.expireTime) {\n powerUp.cleanup();\n this.activePowerUps.splice(i, 1);\n }\n }\n }\n updateAI() {\n if (this.isPaused || this.balls.length === 0) return;\n let closestBall = null;\n let closestDistance = Infinity;\n this.balls.forEach(ball => {\n if (ball.active) {\n if (ball.body.velocity.x > 0) {\n const distance = Phaser.Math.Distance.Between(ball.x, ball.y, this.aiPaddle.x, this.aiPaddle.y);\n if (distance < closestDistance) {\n closestDistance = distance;\n closestBall = ball;\n }\n }\n }\n });\n if (closestBall) {\n const targetY = closestBall.y;\n const dy = targetY - this.aiPaddle.y;\n const aiImperfection = 0.9 + Math.random() * 0.2;\n let isMoving = false;\n if (Math.abs(dy) > 10) {\n isMoving = true;\n if (dy > 0) {\n this.aiPaddle.y += this.aiSpeed * aiImperfection * this.delta;\n } else {\n this.aiPaddle.y -= this.aiSpeed * aiImperfection * this.delta;\n }\n this.aiPaddle.y = Phaser.Math.Clamp(this.aiPaddle.y, this.aiPaddle.displayHeight / 2, this.cameras.main.height - this.aiPaddle.displayHeight / 2);\n }\n if (this.aiContainer) {\n this.aiContainer.y = Phaser.Math.Linear(this.aiContainer.y, this.aiPaddle.y, 0.3);\n if (isMoving) {\n const targetAngle = dy < 0 ? 5 : dy > 0 ? -5 : 0;\n this.aiBody.angle = Phaser.Math.Linear(this.aiBody.angle, targetAngle, 0.2);\n if (this.aiMoveParticles && Math.random() > 0.7) {\n this.aiMoveParticles.emitParticle(2);\n }\n } else {\n this.aiBody.angle = Phaser.Math.Linear(this.aiBody.angle, 0, 0.2);\n }\n }\n if (closestDistance < 200 && !this.aiSwingPrepared && closestBall.body.velocity.x > 0) {\n this.aiSwingPrepared = true;\n this.tweens.add({\n targets: this.aiRacket,\n angle: -15,\n duration: 200,\n onComplete: () => {\n this.aiSwingPrepared = false;\n }\n });\n }\n if (this.aiContainer) {\n const baseScale = 1;\n const perspectiveScale = baseScale + this.aiContainer.y / this.cameras.main.height * 0.2;\n this.aiContainer.setScale(perspectiveScale);\n }\n }\n }\n checkScore() {\n for (let i = this.balls.length - 1; i >= 0; i--) {\n const ball = this.balls[i];\n if (ball.active) {\n if (ball.x < 0) {\n this.incrementScore(\"ai\");\n this.removeActiveBall(ball);\n } else if (ball.x > this.cameras.main.width) {\n this.incrementScore(\"player\");\n this.removeActiveBall(ball);\n }\n }\n }\n if (this.balls.length === 0) {\n this.createBall();\n if (this.playerScore < this.winScore && this.aiScore < this.winScore) {\n this.launchBall();\n }\n }\n }\n removeActiveBall(ball) {\n if (!ball || !ball.active) return;\n this.createHitEffect(ball.x, ball.y);\n const index = this.balls.indexOf(ball);\n if (index !== -1) {\n this.balls.splice(index, 1);\n }\n if (ball.trail && !ball.trail.destroyed) {\n ball.trail.destroy();\n ball.trail = null;\n }\n if (ball.superTrail && !ball.superTrail.destroyed) {\n ball.superTrail.destroy();\n ball.superTrail = null;\n }\n if (ball.body) {\n ball.body.enable = false;\n }\n ball.destroy();\n }\n incrementScore(player) {\n if (player === \"player\") {\n this.playerScore++;\n this.playerScoreText.setText(this.playerScore.toString());\n this.tweens.add({\n targets: this.playerScoreText,\n scale: 1.5,\n duration: 200,\n yoyo: true\n });\n } else {\n this.aiScore++;\n this.aiScoreText.setText(this.aiScore.toString());\n this.tweens.add({\n targets: this.aiScoreText,\n scale: 1.5,\n duration: 200,\n yoyo: true\n });\n }\n if (this.playerScore >= this.winScore || this.aiScore >= this.winScore) {\n this.endGame();\n }\n }\n endGame() {\n const overlay = this.add.rectangle(this.cameras.main.width / 2, this.cameras.main.height / 2, this.cameras.main.width, this.cameras.main.height, 0x000000, 0.7);\n const gameOverText = this.add.text(this.cameras.main.width / 2, this.cameras.main.height / 3, \"GAME OVER\", {\n font: \"bold 48px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000000\",\n strokeThickness: 6\n });\n gameOverText.setOrigin(0.5);\n const resultText = this.add.text(this.cameras.main.width / 2, this.cameras.main.height / 2, this.playerScore > this.aiScore ? \"YOU WIN!\" : \"AI WINS!\", {\n font: \"bold 36px Arial\",\n fill: this.playerScore > this.aiScore ? \"#00ff00\" : \"#ff0000\",\n stroke: \"#000000\",\n strokeThickness: 6\n });\n resultText.setOrigin(0.5);\n const scoreText = this.add.text(this.cameras.main.width / 2, this.cameras.main.height / 2 + 60, `${this.playerScore} - ${this.aiScore}`, {\n font: \"24px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000000\",\n strokeThickness: 4\n });\n scoreText.setOrigin(0.5);\n const playAgainButton = this.add.rectangle(this.cameras.main.width / 2, this.cameras.main.height / 2 + 120, 200, 60, 0x4499ff, 1);\n playAgainButton.setStrokeStyle(4, 0xffffff, 1);\n const playAgainText = this.add.text(this.cameras.main.width / 2, this.cameras.main.height / 2 + 120, \"PLAY AGAIN\", {\n font: \"bold 24px Arial\",\n fill: \"#ffffff\"\n });\n playAgainText.setOrigin(0.5);\n playAgainButton.setInteractive({\n useHandCursor: true\n }).on(\"pointerover\", () => {\n playAgainButton.fillColor = 0x66aaff;\n }).on(\"pointerout\", () => {\n playAgainButton.fillColor = 0x4499ff;\n }).on(\"pointerdown\", () => {\n this.resetGame();\n endScreen.destroy();\n });\n const endScreen = this.add.container(0, 0, [overlay, gameOverText, resultText, scoreText, playAgainButton, playAgainText]);\n endScreen.setDepth(100);\n this.isPaused = true;\n }\n resetGame() {\n this.playerScore = 0;\n this.aiScore = 0;\n if (this.playerScoreText) this.playerScoreText.setText(\"0\");\n if (this.aiScoreText) this.aiScoreText.setText(\"0\");\n if (this.activePowerUps && Array.isArray(this.activePowerUps)) {\n this.activePowerUps.forEach(powerUp => {\n if (powerUp && typeof powerUp.cleanup === 'function') {\n powerUp.cleanup();\n }\n });\n }\n this.activePowerUps = [];\n if (this.playerPaddle && this.playerPaddle.active) {\n this.playerPaddle.displayHeight = this.playerPaddle.originalHeight;\n }\n this.playerSpeed = 400;\n if (this._activeEffects && Array.isArray(this._activeEffects)) {\n this._activeEffects.forEach(effect => {\n if (effect.emitter && !effect.emitter.destroyed) {\n effect.emitter.destroy();\n }\n if (effect.cleanupTimer) {\n effect.cleanupTimer.remove();\n }\n if (effect.velocityTimers && Array.isArray(effect.velocityTimers)) {\n effect.velocityTimers.forEach(timer => timer.remove());\n }\n });\n }\n this._activeEffects = [];\n if (this.balls && Array.isArray(this.balls)) {\n this.balls.forEach(ball => {\n if (ball) {\n if (ball.trail && !ball.trail.destroyed) {\n ball.trail.destroy();\n ball.trail = null;\n }\n if (ball.superTrail && !ball.superTrail.destroyed) {\n ball.superTrail.destroy();\n ball.superTrail = null;\n }\n if (ball.body) {\n ball.body.enable = false;\n }\n ball.destroy();\n }\n });\n }\n this.balls = [];\n this.resetCombo();\n this.isSuperShotCharging = false;\n this.superShotCharge = 0;\n if (this.chargeBarContainer) this.chargeBarContainer.setVisible(false);\n if (this.ballGlow) this.ballGlow.setVisible(false);\n if (this.energyField) this.energyField.stop();\n this.createBall();\n this.powerUpTimer = this.time.now + this.powerUpInterval;\n this.updatePowerUpIndicator(\"No Power-Up\");\n this.warpIntensity = 0;\n this.isPaused = false;\n this.launchBall();\n }\n openShop() {\n this.isPaused = true;\n const overlay = this.add.rectangle(this.cameras.main.width / 2, this.cameras.main.height / 2, this.cameras.main.width, this.cameras.main.height, 0x000000, 0.8);\n const shopTitle = this.add.text(this.cameras.main.width / 2, 80, \"RACKET SHOP\", {\n font: \"bold 36px Arial\",\n fill: \"#ffffff\",\n stroke: \"#000000\",\n strokeThickness: 6\n });\n shopTitle.setOrigin(0.5);\n const coinDisplay = this.add.text(this.cameras.main.width / 2, 130, `Your Coins: ${this.coins}`, {\n font: \"24px Arial\",\n fill: \"#ffdd00\",\n stroke: \"#000000\",\n strokeThickness: 4\n });\n coinDisplay.setOrigin(0.5);\n const skins = [{\n key: \"defaultSkin\",\n name: \"Default\",\n price: 0,\n effect: \"Standard racket\"\n }, {\n key: \"curveSkin\",\n name: \"Curve Master\",\n price: 50,\n effect: \"Adds slight curve to shots\"\n }, {\n key: \"powerSkin\",\n name: \"Power Smasher\",\n price: 100,\n effect: \"Slower but more powerful\"\n }, {\n key: \"speedSkin\",\n name: \"Speed Demon\",\n price: 150,\n effect: \"Faster but less control\"\n }, {\n key: \"gravitySkin\",\n name: \"Gravity Bender\",\n price: 200,\n effect: \"Unpredictable shots\"\n }];\n const skinButtons = [];\n const startY = 180;\n const spacing = 70;\n skins.forEach((skin, index) => {\n const y = startY + spacing * index;\n const skinContainer = this.add.container(this.cameras.main.width / 2, y);\n const bg = this.add.rectangle(0, 0, 500, 60, this.currentSkin === skin.key ? 0x4499ff : 0x333333, 0.8);\n bg.setStrokeStyle(2, 0xffffff, 0.8);\n const preview = this.add.sprite(-220, 0, skin.key);\n preview.setScale(0.5);\n const nameText = this.add.text(-180, -15, skin.name, {\n font: \"bold 18px Arial\",\n fill: \"#ffffff\"\n });\n const effectText = this.add.text(-180, 10, skin.effect, {\n font: \"14px Arial\",\n fill: \"#aaaaaa\"\n });\n let statusText;\n if (this.currentSkin === skin.key) {\n statusText = this.add.text(180, 0, \"SELECTED\", {\n font: \"bold 16px Arial\",\n fill: \"#00ff00\"\n });\n } else if (this.unlockedSkins.includes(skin.key)) {\n statusText = this.add.text(180, 0, \"OWNED\", {\n font: \"16px Arial\",\n fill: \"#ffff00\"\n });\n } else {\n statusText = this.add.text(180, 0, `${skin.price} coins`, {\n font: \"16px Arial\",\n fill: skin.price <= this.coins ? \"#ffffff\" : \"#ff6666\"\n });\n }\n statusText.setOrigin(0.5);\n skinContainer.add([bg, preview, nameText, effectText, statusText]);\n bg.setInteractive({\n useHandCursor: true\n }).on(\"pointerover\", () => {\n if (!(this.currentSkin === skin.key)) {\n bg.fillColor = 0x555555;\n }\n }).on(\"pointerout\", () => {\n if (!(this.currentSkin === skin.key)) {\n bg.fillColor = 0x333333;\n }\n }).on(\"pointerdown\", () => {\n if (this.unlockedSkins.includes(skin.key)) {\n this.selectSkin(skin.key);\n closeShop();\n } else if (skin.price <= this.coins) {\n this.coins -= skin.price;\n this.coinText.setText(this.coins.toString());\n this.unlockedSkins.push(skin.key);\n this.selectSkin(skin.key);\n closeShop();\n } else {\n this.cameras.main.shake(100, 0.01);\n statusText.setColor(\"#ff0000\");\n this.time.delayedCall(500, () => {\n statusText.setColor(\"#ff6666\");\n });\n }\n });\n skinButtons.push(skinContainer);\n });\n const closeButton = this.add.rectangle(this.cameras.main.width / 2, this.cameras.main.height - 80, 200, 60, 0x4499ff, 1);\n closeButton.setStrokeStyle(4, 0xffffff, 1);\n const closeText = this.add.text(this.cameras.main.width / 2, this.cameras.main.height - 80, \"CLOSE\", {\n font: \"bold 24px Arial\",\n fill: \"#ffffff\"\n });\n closeText.setOrigin(0.5);\n closeButton.setInteractive({\n useHandCursor: true\n }).on(\"pointerover\", () => {\n closeButton.fillColor = 0x66aaff;\n }).on(\"pointerout\", () => {\n closeButton.fillColor = 0x4499ff;\n }).on(\"pointerdown\", () => {\n closeShop();\n });\n const shopElements = [overlay, shopTitle, coinDisplay, closeButton, closeText, ...skinButtons];\n const shopContainer = this.add.container(0, 0, shopElements);\n shopContainer.setDepth(1000);\n const closeShop = () => {\n this.isPaused = false;\n shopContainer.destroy();\n };\n }\n selectSkin(skinKey) {\n this.currentSkin = skinKey;\n this.playerPaddle.setTexture(skinKey);\n let skinName = \"Default\";\n switch (skinKey) {\n case \"curveSkin\":\n skinName = \"Curve Master\";\n break;\n case \"powerSkin\":\n skinName = \"Power Smasher\";\n break;\n case \"speedSkin\":\n skinName = \"Speed Demon\";\n break;\n case \"gravitySkin\":\n skinName = \"Gravity Bender\";\n break;\n }\n this.skinText.setText(skinName);\n this.tweens.add({\n targets: this.playerPaddle,\n alpha: 0.5,\n duration: 100,\n yoyo: true,\n repeat: 3\n });\n }\n updateClouds() {\n if (!this.clouds || !this.clouds.getChildren) return;\n const clouds = this.clouds.getChildren();\n if (!Array.isArray(clouds)) return;\n clouds.forEach(cloud => {\n if (!cloud || !cloud.active) return;\n cloud.x -= cloud.speed * this.delta;\n if (cloud.x < -100) {\n cloud.x = this.cameras.main.width + 50;\n cloud.y = Phaser.Math.Between(0, this.cameras.main.height);\n }\n });\n if (clouds.length < 15 && Math.random() < 0.01) {\n this.addCloud();\n }\n }\n update(time, delta) {\n this.delta = delta / 1000;\n if (this.isPaused) return;\n try {\n this.updateClouds();\n this.updatePlayerPaddle();\n this.updateAI();\n this.updatePowerUps();\n this.updateBall3DEffects();\n this.updateVisualEffects(time);\n if (this.isSuperShotCharging) {\n this.updateSuperShotCharge(this.delta);\n }\n if (this.warpIntensity > 0) {\n this.updateRealityWarp(time);\n }\n this.checkScore();\n this.checkResize();\n this.update3DAtmosphere(time);\n } catch (error) {\n console.error(\"Error in update loop:\", error);\n if (!this.errorRecoveryAttempted) {\n this.errorRecoveryAttempted = true;\n this.resetGame();\n }\n }\n }\n updateBall3DEffects() {\n this.balls.forEach(ball => {\n if (!ball.active) return;\n if (ball === this.ball && this.ballContainer) {\n this.ballContainer.x = ball.x;\n this.ballContainer.y = ball.y - this.ballHeight;\n if (this.ballShadow) {\n this.ballShadow.x = ball.x;\n this.ballShadow.y = ball.y + 30;\n const shadowScale = Math.max(0.5, 1 - this.ballHeight / 200);\n this.ballShadow.setScale(shadowScale, shadowScale * 0.5);\n this.ballShadow.setAlpha(Math.max(0.1, 0.3 - this.ballHeight / 300));\n }\n if (this.ballHeightDirection > 0) {\n this.ballHeight += 200 * this.delta;\n if (this.ballHeight > this.ballMaxHeight) {\n this.ballHeightDirection = -1;\n }\n } else {\n this.ballHeight -= 200 * this.delta;\n if (this.ballHeight < 0) {\n this.ballHeight = 0;\n this.ballHeightDirection = 1;\n }\n }\n const ballScale = 0.8 - this.ballHeight / 500;\n this.ballSprite.setScale(ballScale);\n if (this.ballGlow && this.ballGlow.visible) {\n this.ballGlow.x = ball.x;\n this.ballGlow.y = ball.y - this.ballHeight;\n const glowScale = 1.5 + this.superShotCharge / this.maxSuperShotCharge * 1;\n this.ballGlow.setScale(glowScale);\n const glowAlpha = 0.3 + this.superShotCharge / this.maxSuperShotCharge * 0.4;\n this.ballGlow.setAlpha(glowAlpha);\n }\n }\n });\n }\n updateVisualEffects(time) {\n if (this.ball && this.ball.active && this.ballGlow && !this.ballGlow.destroyed) {\n if (this.isSuperShotCharging) {\n if (!this.ballGlow.visible) {\n this.ballGlow.setVisible(true);\n }\n } else if (this.ballGlow.visible && !this.isSuperShotCharging) {\n this.ballGlow.setVisible(false);\n }\n }\n if (this.playerPaddle && this.playerPaddle.body && Math.abs(this.playerPaddle.body.velocity.y) > 300) {\n if (this.playerRacket && Math.random() > 0.7) {\n const emitter = this.add.particles(this.playerContainer.x + this.playerRacket.x, this.playerContainer.y + this.playerRacket.y, \"ballHitParticle\", {\n speed: 10,\n scale: {\n start: 0.4,\n end: 0\n },\n alpha: {\n start: 0.3,\n end: 0\n },\n lifespan: 200,\n emitting: false,\n tint: 0x4499ff\n });\n emitter.explode(3);\n this.time.delayedCall(200, () => {\n if (emitter && !emitter.destroyed) {\n emitter.destroy();\n }\n });\n }\n }\n if (this.comboCount > 5) {\n const intensity = Math.min(1, this.comboCount / 15);\n const bgColor = Phaser.Display.Color.HSVToRGB(0.6 - intensity * 0.2, 0.8, 0.2 + intensity * 0.1).color;\n if (this.lastBgColor !== bgColor) {\n this.cameras.main.setBackgroundColor(bgColor);\n this.lastBgColor = bgColor;\n }\n }\n }\n updateRealityWarp(time) {\n const elapsedTime = time - this.warpTime;\n if (elapsedTime > 1000) {\n this.warpIntensity = Math.max(0, this.warpIntensity - this.delta * 0.2);\n }\n this.clouds.getChildren().forEach(cloud => {\n if (cloud && cloud.active) {\n const originalY = cloud.y;\n const noiseValue = this.noise2D(cloud.x * 0.01, time * 0.001) * this.warpIntensity * 30;\n cloud.y = originalY + noiseValue;\n const scale = 1 + Math.sin(time * 0.005 + cloud.x * 0.1) * this.warpIntensity * 0.3;\n cloud.setScale(scale);\n cloud.rotation = Math.sin(time * 0.001 + cloud.x * 0.05) * this.warpIntensity * 0.2;\n }\n });\n if (this.warpIntensity > 0.5) {\n const shakeIntensity = (this.warpIntensity - 0.5) * 0.01;\n this.cameras.main.shake(100, shakeIntensity, true);\n const zoomAmount = 1 + Math.sin(time * 0.005) * (this.warpIntensity - 0.5) * 0.05;\n this.cameras.main.setZoom(zoomAmount);\n } else {\n this.cameras.main.setZoom(1);\n }\n }\n update3DAtmosphere(time) {\n if (this.ballHeight > 50 && this.ball.active) {\n const shadowX = this.ball.x;\n const shadowY = this.ball.y;\n const shadowSize = 30 + this.ballHeight * 0.3;\n const shadowAlpha = 0.1;\n if (!this.ballCourtShadow) {\n this.ballCourtShadow = this.add.graphics();\n this.ballCourtShadow.setDepth(-90);\n } else {\n this.ballCourtShadow.clear();\n }\n this.ballCourtShadow.fillStyle(0x000000, shadowAlpha);\n this.ballCourtShadow.fillCircle(shadowX, shadowY, shadowSize);\n } else if (this.ballCourtShadow) {\n this.ballCourtShadow.clear();\n }\n if (time % 10000 < 20 && !this.lightingTween) {\n const startColor = this.cameras.main.backgroundColor;\n const targetColor = Phaser.Display.Color.HSVToRGB(Math.random() * 0.1 + 0.6, 0.3, 0.2).color;\n this.lightingTween = this.tweens.add({\n targets: {\n value: 0\n },\n value: 1,\n duration: 5000,\n yoyo: true,\n onUpdate: tween => {\n const progress = tween.getValue();\n const r1 = startColor >> 16 & 0xFF;\n const g1 = startColor >> 8 & 0xFF;\n const b1 = startColor & 0xFF;\n const r2 = targetColor >> 16 & 0xFF;\n const g2 = targetColor >> 8 & 0xFF;\n const b2 = targetColor & 0xFF;\n const r = Math.floor(r1 + (r2 - r1) * progress);\n const g = Math.floor(g1 + (g2 - g1) * progress);\n const b = Math.floor(b1 + (b2 - b1) * progress);\n const color = r << 16 | g << 8 | b;\n this.cameras.main.setBackgroundColor(color);\n },\n onComplete: () => {\n this.lightingTween = null;\n this.cameras.main.setBackgroundColor(startColor);\n }\n });\n }\n }\n updatePlayerPaddle() {\n this.playerPaddle.body.velocity.y = 0;\n let isMoving = false;\n if (this.cursors.up.isDown || this.mobileControlUp) {\n this.playerPaddle.body.velocity.y = -this.playerSpeed;\n isMoving = true;\n } else if (this.cursors.down.isDown || this.mobileControlDown) {\n this.playerPaddle.body.velocity.y = this.playerSpeed;\n isMoving = true;\n }\n this.playerPaddle.y = Phaser.Math.Clamp(this.playerPaddle.y, this.playerPaddle.displayHeight / 2, this.cameras.main.height - this.playerPaddle.displayHeight / 2);\n if (this.playerContainer) {\n this.playerContainer.y = Phaser.Math.Linear(this.playerContainer.y, this.playerPaddle.y, 0.3);\n if (isMoving) {\n const targetAngle = this.playerPaddle.body.velocity.y < 0 ? -5 : this.playerPaddle.body.velocity.y > 0 ? 5 : 0;\n this.playerBody.angle = Phaser.Math.Linear(this.playerBody.angle, targetAngle, 0.2);\n if (this.playerMoveParticles && Math.random() > 0.7) {\n this.playerMoveParticles.emitParticle(2);\n }\n } else {\n this.playerBody.angle = Phaser.Math.Linear(this.playerBody.angle, 0, 0.2);\n }\n }\n if (this.playerContainer) {\n const baseScale = 1;\n const perspectiveScale = baseScale + this.playerContainer.y / this.cameras.main.height * 0.2;\n this.playerContainer.setScale(perspectiveScale);\n }\n }\n checkResize() {\n if (this.scale.width < 768 && !this.mobileControlsHint.visible) {\n this.mobileControlsHint.visible = true;\n } else if (this.scale.width >= 768 && this.mobileControlsHint.visible) {\n this.mobileControlsHint.visible = false;\n }\n }\n}\nclass EndScene extends Phaser.Scene {\n constructor() {\n super({\n key: \"EndScene\"\n });\n }\n create() {}\n}\nconst config = {\n type: Phaser.AUTO,\n scale: {\n mode: Phaser.Scale.RESIZE,\n parent: \"app\",\n width: 800,\n height: 600,\n min: {\n width: 320,\n height: 240\n }\n },\n physics: {\n default: \"arcade\",\n arcade: {\n debug: false\n }\n },\n backgroundColor: \"#1A1A28\",\n scene: [BootScene, GameScene, EndScene]\n};\nexport const game = new Phaser.Game(config);","packageJson","{\"dependencies\":{\"phaser\":\"3.60.0\",\"simplex-noise\":\"4.0.1\",\"socket.io-client\":\"4.7.1\",\"@devfunlabs/state-client\":\"0.8.1\"}}","appFunctions",[],"token","upstreamApp","isLordOfDev","analytics",[81,85,87,89,91,93,95,97,99,101,103,105,107,109,111,112],{"_82":83,"_84":57},"day","2025-07-12","runCount",{"_82":86,"_84":57},"2025-07-13",{"_82":88,"_84":57},"2025-07-14",{"_82":90,"_84":57},"2025-07-15",{"_82":92,"_84":57},"2025-07-16",{"_82":94,"_84":57},"2025-07-17",{"_82":96,"_84":57},"2025-07-18",{"_82":98,"_84":57},"2025-07-19",{"_82":100,"_84":57},"2025-07-20",{"_82":102,"_84":57},"2025-07-21",{"_82":104,"_84":57},"2025-07-22",{"_82":106,"_84":57},"2025-07-23",{"_82":108,"_84":57},"2025-07-24",{"_82":110,"_84":57},"2025-07-25",{"_82":96,"_84":40},{"_82":104,"_84":40},"snapshot","ogImage","https://cdn.dev.fun/og/image/65a4868e36326a0fe2a8/cbb50c27.webp","isDevbase","commitDetail","livestream","actionData","errors"]