class Puzzle1 extends Phaser.Scene { constructor() { super('Puzzle1'); } preload() { this.load.image('piece1', `https://play.rosebud.ai/assets/cty1.png.png?ztPB`); this.load.image('piece2', `https://play.rosebud.ai/assets/cty2.png.png?O5sb`); this.load.image('piece3', `https://play.rosebud.ai/assets/cty 3.png.png?iMwz`); this.load.image('piece4', `https://play.rosebud.ai/assets/cty 4.png.png?oE2f`); this.load.image('piece5', `https://play.rosebud.ai/assets/cty5.png.png?BFU5`); this.load.image('piece6', `https://play.rosebud.ai/assets/cty 6.png.png?S2v0`); this.load.image('piece7', `https://play.rosebud.ai/assets/cty7.png.png?gnvZ`); this.load.image('piece8', `https://play.rosebud.ai/assets/cty 8.png.png?ZMMB`); this.load.image('piece9', `https://play.rosebud.ai/assets/cty 9.png.png?BKhB`); this.load.image('piece10', `https://play.rosebud.ai/assets/cty 10.png.png?tzxm`); this.load.image('piece11', `https://play.rosebud.ai/assets/cty11.png.png?zh89`); this.load.image('piece12', `https://play.rosebud.ai/assets/cty 12.png.png?IBHO`); this.load.image('piece13', `https://play.rosebud.ai/assets/cty 13.png.png?lbyl`); this.load.image('piece14', `https://play.rosebud.ai/assets/cty14.png.png?QwlR`); this.load.image('piece15', `https://play.rosebud.ai/assets/cty15.png.png?x7EB`); this.load.image('piece16', `https://play.rosebud.ai/assets/cty 16.png.png?JRSk`); this.load.image('backButton', `https://play.rosebud.ai/assets/jigsaw piece back button.png?Z3Bj`); this.load.audio('backgroundMusic', `https://play.rosebud.ai/assets/New Composition #5.mp3.mp3?vud9`); // Load the background music for Puzzle1 } create() { this.sound.stopAll(); // Stop all currently playing audio this.add.text(20, 20, 'Puzzle 1 scene', { font: '24px Arial', fill: '#ffffff' }); const pieceSize = 100; const snapOffset = 20; // Offset for snapping const rows = 4; const columns = 4; const centerX = this.cameras.main.centerX; const centerY = this.cameras.main.centerY; // Calculate the offset to center the puzzle const offsetX = centerX - (columns * pieceSize) / 2 + pieceSize / 2; const offsetY = centerY - (rows * pieceSize) / 2 + pieceSize / 2; // Prepare a shuffled array of positions let positions = []; for (let i = 1; i <= rows; i++) { for (let j = 1; j <= columns; j++) { positions.push({ x: offsetX + (j - 1) * pieceSize, y: offsetY + (i - 1) * pieceSize }); } } Phaser.Utils.Array.Shuffle(positions); // Add pieces with the offset for (let i = 1; i <= rows; i++) { for (let j = 1; j <= columns; j++) { const index = (i - 1) * columns + j; const correctPos = { x: offsetX + (j - 1) * pieceSize, y: offsetY + (i - 1) * pieceSize }; const pos = positions.pop(); const piece = this.add.image(pos.x, pos.y, `piece${index}`) .setInteractive({ draggable: true }) // Make the piece draggable .setData('index', index) .setData('correctPos', correctPos); // Add the drag event to the piece this.input.setDraggable(piece); this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); this.input.on('dragend', function (pointer, gameObject) { const dist = Phaser.Math.Distance.Between(gameObject.x, gameObject.y, gameObject.getData('correctPos').x, gameObject.getData('correctPos').y); if (dist < snapOffset) { gameObject.x = gameObject.getData('correctPos').x; gameObject.y = gameObject.getData('correctPos').y; } }); } } // Add a back button in the bottom-left corner that switches to the menu scene when clicked const backButton = this.add.image(50, this.cameras.main.height - 50, 'backButton').setInteractive().setScale(0.5); backButton.on('pointerdown', () => this.scene.start('MenuScene')); // Play the background music in a loop this.sound.add('backgroundMusic').play({ loop: true }); } } class Puzzle2 extends Phaser.Scene { constructor() { super('Puzzle2'); } preload() { this.load.image('piece1a', `https://play.rosebud.ai/assets/waterfall1.png.png?T299`); this.load.image('piece2a', `https://play.rosebud.ai/assets/waterfall2.png.png?TwOz`); this.load.image('piece3a', `https://play.rosebud.ai/assets/waterfall3.png.png?xCs4`); this.load.image('piece4a', `https://play.rosebud.ai/assets/waterfall4.png.png?y1Jq`); this.load.image('piece5a', `https://play.rosebud.ai/assets/waterfall5.png.png?ZmKL`); this.load.image('piece6a', `https://play.rosebud.ai/assets/waterfall6.png.png?iVwx`); this.load.image('piece7a', `https://play.rosebud.ai/assets/waterfall7.png.png?uS7w`); this.load.image('piece8a', `https://play.rosebud.ai/assets/waterfall8.png.png?6VzB`); this.load.image('piece9a', `https://play.rosebud.ai/assets/waterfall9.png.png?SB78`); this.load.image('piece10a', `https://play.rosebud.ai/assets/waterfall10.png.png?j115`); this.load.image('piece11a', `https://play.rosebud.ai/assets/waterfall11.png.png?4yYd`); this.load.image('piece12a', `https://play.rosebud.ai/assets/waterfall12.png.png?gMeQ`); this.load.image('piece13a', `https://play.rosebud.ai/assets/waterfall13.png.png?6dnn`); this.load.image('piece14a', `https://play.rosebud.ai/assets/waterfall14.png.png?5xwY`); this.load.image('piece15a', `https://play.rosebud.ai/assets/waterfall15.png.png?uDAQ`); this.load.image('piece16a', `https://play.rosebud.ai/assets/waterfall16.png.png?qAZs`); this.load.image('backButton', `https://play.rosebud.ai/assets/jigsaw piece back button.png?Z3Bj`); this.load.audio('backgroundMusic', `https://play.rosebud.ai/assets/New Composition #9.mp3.mp3?AbZk`); // Load the new background music for Puzzle2 } create() { this.sound.stopAll(); // Stop all currently playing audio this.add.text(20, 20, 'Puzzle 2 scene', { font: '24px Arial', fill: '#ffffff' }); const pieceSize = 100; const snapOffset = 20; // Offset for snapping const rows = 4; const columns = 4; const centerX = this.cameras.main.centerX; const centerY = this.cameras.main.centerY; // Calculate the offset to center the puzzle const offsetX = centerX - (columns * pieceSize) / 2 + pieceSize / 2; const offsetY = centerY - (rows * pieceSize) / 2 + pieceSize / 2; // Prepare a shuffled array of positions let positions = []; for (let i = 1; i <= rows; i++) { for (let j = 1; j <= columns; j++) { positions.push({ x: offsetX + (j - 1) * pieceSize, y: offsetY + (i - 1) * pieceSize }); } } Phaser.Utils.Array.Shuffle(positions); // Add pieces with the offset for (let i = 1; i <= rows; i++) { for (let j = 1; j <= columns; j++) { const index = (i - 1) * columns + j; const correctPos = { x: offsetX + (j - 1) * pieceSize, y: offsetY + (i - 1) * pieceSize }; const pos = positions.pop(); const piece = this.add.image(pos.x, pos.y, `piece${index}a`) .setInteractive({ draggable: true }) // Make the piece draggable .setData('index', index) .setData('correctPos', correctPos); // Add the drag event to the piece this.input.setDraggable(piece); this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); this.input.on('dragend', function (pointer, gameObject) { const dist = Phaser.Math.Distance.Between(gameObject.x, gameObject.y, gameObject.getData('correctPos').x, gameObject.getData('correctPos').y); if (dist < snapOffset) { gameObject.x = gameObject.getData('correctPos').x; gameObject.y = gameObject.getData('correctPos').y; } }); } } // Add a back button in the bottom-left corner that switches to the menu scene when clicked const backButton = this.add.image(50, this.cameras.main.height - 50, 'backButton').setInteractive().setScale(0.5); backButton.on('pointerdown', () => this.scene.start('MenuScene')); // Play the background music in a loop this.sound.add('backgroundMusic').play({ loop: true }); } } class MenuScene extends Phaser.Scene { constructor() { super('MenuScene'); } preload() { this.load.image('menuHeader', `https://play.rosebud.ai/assets/cartoony_items_0f8d2e19.png.png?1OXi`); this.load.image('puzzle1Button', `https://play.rosebud.ai/assets/city 1.jpg.jpg?cLoB`); this.load.image('puzzle2Button', `https://play.rosebud.ai/assets/waterfall.webp.webp?yBUB`); this.load.audio('menuMusic', `https://play.rosebud.ai/assets/New Composition #2.mp3.mp3?8n5E`); // Load the menu music } create() { this.sound.stopAll(); // Stop all currently playing audio const centerX = this.cameras.main.centerX; const centerY = this.cameras.main.centerY; const header = this.add.image(centerX, 100, 'menuHeader').setScale(0.5, 0.5).setOrigin(0.5, 0.5); const button1 = this.add.image(centerX, centerY, 'puzzle1Button') .setScale(0.2, 0.2) .setInteractive() .on('pointerdown', () => this.scene.start('Puzzle1')); const button2 = this.add.image(centerX, centerY + 200, 'puzzle2Button') .setScale(0.2, 0.2) .setInteractive() .on('pointerdown', () => this.scene.start('Puzzle2')); // Play the menu music in a loop this.sound.add('menuMusic').play({ loop: true }); } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, scene: [MenuScene, Puzzle1, Puzzle2] }; window.phaserGame = new Phaser.Game(config);