class TitleScene extends Phaser.Scene { constructor() { super({ key: 'TitleScene' }); } create() { this.cameras.main.setBackgroundColor('#000000'); // Display game title this.add.text( this.cameras.main.width / 2, this.cameras.main.height / 4, 'Dicey', { fontSize: '96px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); // Create Start Game button const startGameButton = this.add.graphics(); startGameButton.fillStyle(0x3498db); startGameButton.fillRoundedRect( this.cameras.main.width / 2 - 150, this.cameras.main.height / 2, 300, 100, 20 // Corner radius ); startGameButton.setInteractive(new Phaser.Geom.Rectangle( this.cameras.main.width / 2 - 150, this.cameras.main.height / 2, 300, 100, ), Phaser.Geom.Rectangle.Contains); this.add.text( this.cameras.main.width / 2, this.cameras.main.height / 2 + 50, 'Start Game', { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); startGameButton.on('pointerdown', () => { this.scene.start('Example'); // Start the main game scene }); } } class Example extends Phaser.Scene { constructor() { super({ key: 'Example' }); this.grid = []; this.diceData = [ { "name": "DIE0", "sides": ["R", "I", "F", "O", "B", "X"] }, { "name": "DIE1", "sides": ["I", "F", "E", "H", "E", "Y"] }, { "name": "DIE2", "sides": ["D", "E", "N", "O", "W", "S"] }, { "name": "DIE3", "sides": ["U", "T", "O", "K", "N", "D"] }, { "name": "DIE4", "sides": ["H", "M", "S", "R", "A", "O"] }, { "name": "DIE5", "sides": ["L", "U", "P", "E", "T", "S"] }, { "name": "DIE6", "sides": ["A", "C", "I", "T", "O", "A"] }, { "name": "DIE7", "sides": ["Y", "L", "G", "K", "U", "E"] }, { "name": "DIE8", "sides": ["Qu", "B", "M", "J", "O", "A"] }, { "name": "DIE9", "sides": ["E", "H", "I", "S", "P", "N"] }, { "name": "DIE10", "sides": ["V", "E", "T", "I", "G", "N"] }, { "name": "DIE11", "sides": ["B", "A", "L", "I", "Y", "T"] }, { "name": "DIE12", "sides": ["E", "Z", "A", "V", "N", "D"] }, { "name": "DIE13", "sides": ["R", "A", "L", "E", "S", "C"] }, { "name": "DIE14", "sides": ["U", "W", "I", "L", "R", "G"] }, { "name": "DIE15", "sides": ["P", "A", "C", "E", "M", "D"] } ]; this.chosenWord = ''; this.lastClickedDice = null; this.score = 0; // Initialize score to 0 } preload() { this.load.json('dictionary', `https://play.rosebud.ai/assets/dictionary.json.json?kuVM`); this.load.audio('rollSound', `https://play.rosebud.ai/assets/rollsound.mp3?xtGt`); } create() { this.words = this.cache.json.get('dictionary'); this.cameras.main.setBackgroundColor('#283747'); this.populateGrid(); this.add.text( this.cameras.main.width / 2, this.cameras.main.height / 4 - 50, 'Current Word: ', { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); this.chosenWordText = this.add.text( this.cameras.main.width / 2, this.cameras.main.height / 4, '', { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); this.scoreText = this.add.text( 150, 50, 'Score: 0', { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); // Create Timer Text in Upper Right Corner this.timerText = this.add.text( this.cameras.main.width - 250, 50, 'Time: 0:30.00', { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); // Create Submit Button const submitButton = this.add.graphics(); submitButton.fillStyle(0x3498db, 1); submitButton.fillRoundedRect(this.cameras.main.width / 2 - 250, this.cameras.main.height - 550, 500, 125, 10); submitButton.setInteractive(new Phaser.Geom.Rectangle(this.cameras.main.width / 2 - 250, this.cameras.main.height - 550, 500, 125), Phaser.Geom.Rectangle.Contains); this.add.text( this.cameras.main.width / 2, this.cameras.main.height - 550 + (125 / 2), 'Submit', { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); submitButton.on('pointerdown', () => { this.submitWord(); this.rollDice(); this.sound.play('rollSound'); }); const rollButton = this.add.graphics(); rollButton.fillStyle(0x3498db); rollButton.fillRoundedRect( this.cameras.main.width / 2 - 150, this.cameras.main.height - 150 - 50, 300, 100, 20 // Corner radius ); rollButton.setInteractive(new Phaser.Geom.Rectangle( this.cameras.main.width / 2 - 150, this.cameras.main.height - 150 - 50, 300, 100, ), Phaser.Geom.Rectangle.Contains); this.add.text( this.cameras.main.width / 2, this.cameras.main.height - 150, 'New Game', { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); rollButton.on('pointerdown', () => { this.sound.play('rollSound'); this.rollDice(); this.score = 0; // Reset the score this.scoreText.setText('Score: 0'); // Update the score text this.chosenWord = ''; this.chosenWordText.setText(''); // Reset the chosen word }); // Start Timer this.startTime = 30; // Set the initial timer value this.updateTimerDisplay(); // Update the timer display initially this.time.addEvent({ delay: 1000, callback: () => { this.startTime -= 1; this.updateTimerDisplay(); if (this.startTime <= 0) { // Transition to Game Over Scene with the current score this.scene.start('GameOverScene', { score: this.score }); } }, callbackScope: this, loop: true }); } updateTimer() { this.startTime -= 1; this.timerText.setText(`Time: 0:${this.startTime < 10 ? '0' : ''}${this.startTime}.00`); if (this.startTime <= 0) { // Stop the timer this.time.removeAllEvents(); // Transition to Game Over Scene with the current score this.scene.start('GameOverScene', { score: this.score }); } } populateGrid() { if (this.grid.length > 0) { for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { this.grid[i][j].destroy(); } } } this.lastClickedDice = null; // Reset the last clicked dice when populating the grid const gridWidth = 4; // Number of columns in the grid const squareSize = 120; const margin = 20; // Adjust the margin as needed for (let i = 0; i < 4; i++) { this.grid[i] = []; for (let j = 0; j < 4; j++) { const dice = this.diceData[i * 4 + j]; const side = dice.sides[Phaser.Math.Between(0, dice.sides.length - 1)]; // Create a container for each dice const diceContainer = this.add.container(); const x = (this.cameras.main.width - gridWidth * (squareSize + margin) + margin) / 2 + j * (squareSize + margin); const y = 670 + i * 150 - squareSize / 2; // Create graphics for the dice const square = this.add.graphics(); square.fillStyle(0xf5f5f5); square.fillRoundedRect(x, y, squareSize, squareSize, 10); // Create text for the letter const letter = this.add.text(x + squareSize / 2, y + squareSize / 2, side, { fontSize: '64px', fill: '#000000', fontWeight: 'bold' }); letter.setOrigin(0.5, 0.5); // Add both graphics and text to the container diceContainer.add([square, letter]); // Add the container to the grid array this.grid[i][j] = diceContainer; diceContainer.setInteractive(new Phaser.Geom.Rectangle(x, y, squareSize, squareSize), Phaser.Geom.Rectangle.Contains); diceContainer.on('pointerdown', () => { if (!diceContainer.clicked && this.isDiceAdjacentToLastClicked(i, j)) { this.chosenWord += side; this.chosenWordText.setText(this.chosenWord); // Change the color of the clicked die to light blue square.clear(); square.fillStyle(0xadd8e6); square.fillRoundedRect(x, y, squareSize, squareSize, 10); // Set the clicked flag to true diceContainer.clicked = true; this.lastClickedDice = { i, j }; // Update the last clicked dice } }); } } } isDiceAdjacentToLastClicked(i, j) { if (this.lastClickedDice === null) { return true; // All dice are adjacent to the last clicked dice if no dice has been clicked yet } const dx = Math.abs(this.lastClickedDice.i - i); const dy = Math.abs(this.lastClickedDice.j - j); return (dx <= 1 && dy <= 1); // Adjacent dice are within a distance of 1 in both x and y } rollDice() { this.chosenWord = ''; this.chosenWordText.setText(''); Phaser.Utils.Array.Shuffle(this.diceData); this.populateGrid(); } submitWord() { const chosenWordInUpperCase = this.chosenWord.toUpperCase(); if (this.words.includes(chosenWordInUpperCase) && this.chosenWord.length >= 3) { console.log("The word " + this.chosenWord + " is valid."); let points = 0; if (this.chosenWord.length <= 4) points = 1; else if (this.chosenWord.length === 5) points = 2; else if (this.chosenWord.length === 6) points = 3; else if (this.chosenWord.length === 7) points = 5; else points = 11; // Add points to the score this.score += points; this.scoreText.setText(`Score: ${this.score}`); // Add seconds to the timer: double the points scored this.startTime += points * 2; // Ensure the timer text is updated this.updateTimerDisplay(); } else { console.log("The word " + this.chosenWord + " is not valid."); } this.chosenWord = ''; this.chosenWordText.setText(''); } updateTimerDisplay() { this.timerText.setText(`Time: 0:${this.startTime < 10 ? '0' : ''}${this.startTime}.00`); } } class GameOverScene extends Phaser.Scene { constructor() { super({ key: 'GameOverScene' }); } init(data) { this.score = data.score; // Retrieve score from previous scene } create() { this.cameras.main.setBackgroundColor('#000000'); // Display Game Over text this.add.text( this.cameras.main.width / 2, this.cameras.main.height / 4, 'Game Over', { fontSize: '64px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); // Display Score text this.add.text( this.cameras.main.width / 2, this.cameras.main.height / 2, `Score: ${this.score}`, { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); // Create Try Again button const newGameButton = this.add.graphics(); newGameButton.fillStyle(0x3498db); newGameButton.fillRoundedRect( this.cameras.main.width / 2 - 150, this.cameras.main.height - 150 - 50, 300, 100, 20 // Corner radius ); newGameButton.setInteractive(new Phaser.Geom.Rectangle( this.cameras.main.width / 2 - 150, this.cameras.main.height - 150 - 50, 300, 100, ), Phaser.Geom.Rectangle.Contains); this.add.text( this.cameras.main.width / 2, this.cameras.main.height - 150, 'Try Again', { fontSize: '48px', fill: '#ffffff', fontWeight: 'bold' } ).setOrigin(0.5, 0.5); newGameButton.on('pointerdown', () => { this.scene.start('TitleScene'); // Go back to the title scene }); } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 1080, height: 1920, scene: [TitleScene, Example, GameOverScene] }; window.phaserGame = new Phaser.Game(config);