class Example extends Phaser.Scene { constructor() { super(); this.isBallRolling = false; this.runeStones = []; this.frameGraphics = []; // Array to store frame graphics this.holeGraphics = null; // Reference to the hole graphics object this.starGraphics = null; // Reference to the star graphics object this.isHoleBlack = false; // Flag to track if the hole is black this.ballDestroyed = false; // Flag to track if the ball has been destroyed this.ball = null; // Initialize the ball as null this.levelText = null; // Reference to the level/round text this.parText = null; // Reference to the par text this.scoreText = null; // Reference to the score text this.roundCompleteText = null; // Reference to the "Round Complete" text this.refreshText = null; // Reference to the "To play again, please refresh the page" text this.level = 1; // Initialize the level/round number this.maxStonesPerRound = 30; // Maximum number of stones per round this.score = 0; // Initialize the score to 0 this.par = 4; // Set the par for the first hole to 4 this.strokes = 0; // Initialize the number of strokes taken for the current hole } preload() { this.load.image('puttingGreen', 'https://play.rosebud.ai/assets/putting green.png?WFDn'); this.load.image('runeStoneA', 'https://play.rosebud.ai/assets/RuneStoneA.png?Wd3s'); this.load.image('runeStoneB', 'https://play.rosebud.ai/assets/RuneStoneB.png?QONC'); this.load.image('runeStoneC', 'https://play.rosebud.ai/assets/RuneStoneC.png?eqa6'); this.load.image('pineTrees', 'https://play.rosebud.ai/assets/pine trees.png?4Wy4'); // Load the pine trees image this.load.image('backgroundImage', 'https://play.rosebud.ai/assets/Reykjavik.png?X3fC'); // Load the background image } create() { const graphics = this.add.graphics(); graphics.lineStyle(2, 0xffffff, 1); this.lineY = this.cameras.main.height * 0.2; graphics.beginPath(); graphics.moveTo(0, this.lineY); graphics.lineTo(this.cameras.main.width, this.lineY); graphics.strokePath(); this.rectX = this.cameras.main.width * 0.15; this.rectY = this.lineY; this.rectWidth = this.cameras.main.width * 0.7; this.rectHeight = this.cameras.main.height * 0.8; const puttingGreen = this.add.image(this.rectX, this.rectY, 'puttingGreen').setOrigin(0, 0); puttingGreen.scaleX = this.rectWidth / puttingGreen.width; puttingGreen.scaleY = this.rectHeight / puttingGreen.height; const ballX = this.cameras.main.width / 2; const ballY = this.cameras.main.height - 50; const ballRadius = 10; this.ball = this.matter.add.image(ballX, ballY, null, null, { shape: 'circle', isStatic: false, restitution: 0.8, frictionAir: 0.012 }).setCircle(ballRadius); const circleGraphics = this.add.graphics({ fillStyle: { color: 0xffffff } }); circleGraphics.fillCircle(ballRadius, ballRadius, ballRadius); circleGraphics.generateTexture('ballTexture', ballRadius * 2, ballRadius * 2); circleGraphics.destroy(); this.ball.setTexture('ballTexture'); this.input.on('pointerdown', this.launchBall, this); this.matter.world.on('beforeupdate', this.checkBallSpeed, this); // Add rune stones with random positions within the green, same aspect ratio, and brighter color. const stoneScale = 0.085; // Adjust scale to make stones 15% smaller const maxY = Math.min(this.rectY + this.rectHeight, 500); // reduce the space by 10% on all sides const paddingX = this.rectWidth * 0.1; const paddingY = this.rectHeight * 0.1; const minDistanceFromBall = ballRadius * 5; // Minimum distance from the ball let firstRuneStone = null; const numStonesToAdd = this.level + 2; // Add stones equal to the current hole number plus 2 const stoneNames = ['runeStoneA', 'runeStoneB', 'runeStoneC']; for (let i = 0; i < numStonesToAdd; i++) { const name = stoneNames[i % 3]; // Cycle through the stone names to maintain a fairly even distribution let stone = this.add.image(0, 0, name); // Add rune stones as non-physical objects stone.setScale(stoneScale); if (!firstRuneStone) { firstRuneStone = stone; } else { stone.displayWidth = firstRuneStone.displayWidth; stone.displayHeight = firstRuneStone.displayHeight; } let stoneX, stoneY; let isOverlap; do { isOverlap = false; stoneX = Phaser.Math.Between(this.rectX + paddingX, this.rectX + this.rectWidth - paddingX); stoneY = Phaser.Math.Between(this.rectY + paddingY, maxY - paddingY); // Check distance from ball const distanceFromBall = Phaser.Math.Distance.Between(stoneX, stoneY, ballX, ballY); if (distanceFromBall < minDistanceFromBall) { isOverlap = true; } // Check overlap with other stones for (let existingStone of this.runeStones) { if (Phaser.Geom.Intersects.RectangleToRectangle( new Phaser.Geom.Rectangle(stoneX - stone.displayWidth / 2, stoneY - stone.displayHeight / 2, stone.displayWidth, stone.displayHeight), new Phaser.Geom.Rectangle(existingStone.x - existingStone.displayWidth / 2, existingStone.y - existingStone.displayHeight / 2, existingStone.displayWidth, existingStone.displayHeight) )) { isOverlap = true; break; } } // Check overlap with the hole const holeX = this.rectX + this.rectWidth / 2; const holeY = this.rectY + this.rectHeight / 2; const holeRadius = this.ball.displayWidth * 1.5; const distanceFromHole = Phaser.Math.Distance.Between(stoneX, stoneY, holeX, holeY); if (distanceFromHole < holeRadius + stone.displayWidth / 2) { isOverlap = true; } } while (isOverlap); stone.setPosition(stoneX, stoneY); stone.setTint(0xffffff); // Make the stone brighter // Add glowing frame const frame = this.add.graphics(); this.frameGraphics.push(frame); // Store the frame graphics in the array this.runeStones.push(stone); } // Add darker green circle with a green star shape in the center of the putting green const holeRadius = ballRadius * 3; const holeX = this.rectX + this.rectWidth / 2; const holeY = this.rectY + this.rectHeight / 2; this.holeGraphics = this.add.graphics(); this.holeGraphics.fillStyle(0x006600, 1); // Darker green color (0x006600) this.holeGraphics.fillCircle(holeX, holeY, holeRadius); // Draw the green star shape const starRadius = holeRadius / 1.5; // Increase the star size const starPoints = 5; // Number of points in the star const starRotation = 0; // Rotate the star so a limb is sticking straight up this.starGraphics = this.add.graphics(); this.starGraphics.fillStyle(0x008000, 1); // Green color (0x008000) this.starGraphics.beginPath(); this.starGraphics.moveTo(holeX + starRadius * Math.cos(starRotation), holeY + starRadius * Math.sin(starRotation)); for (let i = 1; i <= starPoints * 2; i++) { const radius = (i % 2 === 0) ? starRadius : starRadius / 2; const angle = starRotation + (i * Math.PI / starPoints); this.starGraphics.lineTo(holeX + radius * Math.cos(angle), holeY + radius * Math.sin(angle)); } this.starGraphics.fillPath(); // Set a higher depth value for the ball to ensure it's rendered on top of the "hole" graphics this.ball.setDepth(1); // Add a thicker brown frame around the putting green const frameThickness = 12; // Increase the frame thickness const greenFrameGraphics = this.add.graphics(); greenFrameGraphics.lineStyle(frameThickness, 0x8B4513, 1); // Brown color (0x8B4513) greenFrameGraphics.strokeRect(this.rectX + frameThickness / 2, this.rectY + frameThickness / 2, this.rectWidth - frameThickness, this.rectHeight - frameThickness); // Add the background image above the white line, stretching it to fill the entire margin const backgroundImage = this.add.image(this.cameras.main.centerX, 0, 'backgroundImage'); backgroundImage.setScale(this.cameras.main.width / backgroundImage.width, this.lineY / backgroundImage.height); backgroundImage.setPosition(this.cameras.main.centerX, this.lineY / 2); // Add a semi-transparent black box behind the text const textBoxWidth = 300; const textBoxHeight = 100; const textBoxX = this.cameras.main.centerX - textBoxWidth / 2; const textBoxY = 10; const textBox = this.add.graphics(); textBox.fillStyle(0x000000, 0.5); // Semi-transparent black color textBox.fillRect(textBoxX, textBoxY, textBoxWidth, textBoxHeight); // Add "Hole: 1" text at the top center of the screen this.levelText = this.add.text(this.cameras.main.centerX, textBoxY + 20, `Hole: ${this.level}`, { font: '20px Arial', fill: '#ffffff' }); this.levelText.setOrigin(0.5, 0); // Center the text horizontally this.levelText.setDepth(1); // Set the depth of the text to be on top of the box // Add "Par: 4" text below the "Hole: 1" text, with the same font size this.parText = this.add.text(this.cameras.main.centerX, textBoxY + 40, `Par: ${this.par}`, { font: '20px Arial', fill: '#ffffff' }); this.parText.setOrigin(0.5, 0); // Center the text horizontally this.parText.setDepth(1); // Set the depth of the text to be on top of the box // Add "SCORE: even par" text below the "Par: 4" text this.scoreText = this.add.text(this.cameras.main.centerX, textBoxY + 60, `SCORE: even par`, { font: '28px Arial', fill: '#ffffff' }); this.scoreText.setOrigin(0.5, 0); // Center the text horizontally this.scoreText.setDepth(1); // Set the depth of the text to be on top of the box // Get the width and height of the instruction text const instructionText1 = this.add.text(0, 0, 'Click the course', { font: '20px Arial', fill: '#ffffff' }); const instructionText2 = this.add.text(0, 0, 'to launch the ball.', { font: '20px Arial', fill: '#ffffff' }); const instructionBoxWidth = Math.max(instructionText1.width, instructionText2.width) + 20; const instructionBoxHeight = instructionText1.height + instructionText2.height + 20; // Add a semi-transparent black box for the instruction text with tight dimensions const instructionBoxX = 10; const instructionBoxY = this.lineY - instructionBoxHeight - 10; const instructionBox = this.add.graphics(); instructionBox.fillStyle(0x000000, 0.5); // Semi-transparent black color instructionBox.fillRect(instructionBoxX, instructionBoxY, instructionBoxWidth, instructionBoxHeight); // Add "Click the course" and "to launch the ball." texts in the upper left corner above the white line instructionText1.setPosition(instructionBoxX + 10, instructionBoxY + 10); instructionText2.setPosition(instructionBoxX + 10, instructionBoxY + 30); instructionText1.setDepth(1); // Set the depth of the text to be on top of the box instructionText2.setDepth(1); // Set the depth of the text to be on top of the box // Add "Collect rune stones" and "to unseal the hole." texts in the upper right corner above the white line const runeStoneText1 = this.add.text(0, 0, 'Collect rune stones', { font: '20px Arial', fill: '#ffffff' }); const runeStoneText2 = this.add.text(0, 0, 'to unseal the hole.', { font: '20px Arial', fill: '#ffffff' }); const runeStoneBoxWidth = Math.max(runeStoneText1.width, runeStoneText2.width) + 20; const runeStoneBoxHeight = runeStoneText1.height + runeStoneText2.height + 20; const runeStoneBoxX = this.cameras.main.width - runeStoneBoxWidth - 10; const runeStoneBoxY = instructionBoxY; const runeStoneBox = this.add.graphics(); runeStoneBox.fillStyle(0x000000, 0.5); // Semi-transparent black color runeStoneBox.fillRect(runeStoneBoxX, runeStoneBoxY, runeStoneBoxWidth, runeStoneBoxHeight); runeStoneText1.setPosition(runeStoneBoxX + 10, runeStoneBoxY + 10); runeStoneText2.setPosition(runeStoneBoxX + 10, runeStoneBoxY + 30); runeStoneText1.setDepth(1); // Set the depth of the text to be on top of the box runeStoneText2.setDepth(1); // Set the depth of the text to be on top of the box // Add pine trees to the left margin below the white line const leftPineTrees = this.add.image(0, this.rectY, 'pineTrees').setOrigin(0, 0); const pineTreesWidth = this.rectX; // Width of the left margin leftPineTrees.setScale(pineTreesWidth / leftPineTrees.width, 1); // Scale the pine trees image to fit the left margin leftPineTrees.setPosition(0, this.rectY); // Position the pine trees image on the left margin // Add pine trees to the right margin below the white line const rightPineTrees = this.add.image(this.cameras.main.width, this.rectY, 'pineTrees').setOrigin(1, 0); const rightPineTreesWidth = this.cameras.main.width - (this.rectX + this.rectWidth); // Width of the right margin rightPineTrees.setScale(rightPineTreesWidth / rightPineTrees.width, 1); // Scale the pine trees image to fit the right margin rightPineTrees.setPosition(this.cameras.main.width, this.rectY); // Position the pine trees image on the right margin } launchBall(pointer) { // Only launch the ball if the left mouse button was clicked and the click occurred within the green area if (!this.isBallRolling && pointer.leftButtonDown() && this.isClickInsideGreen(pointer.x, pointer.y)) { const ballX = this.ball.x; const ballY = this.ball.y; const distance = Phaser.Math.Distance.Between(ballX, ballY, pointer.x, pointer.y); const angle = Phaser.Math.Angle.Between(ballX, ballY, pointer.x, pointer.y); const velocity = distance * 0.025; const velocityX = Math.cos(angle) * velocity; const velocityY = Math.sin(angle) * velocity; this.ball.setVelocity(velocityX, velocityY); this.strokes++; // Increment the number of strokes taken } } isClickInsideGreen(x, y) { // Check if the click coordinates are within the green area return ( x >= this.rectX && x <= this.rectX + this.rectWidth && y >= this.rectY && y <= this.rectY + this.rectHeight ); } checkBallSpeed() { // Check if the ball has been destroyed if (this.ballDestroyed || !this.ball) { return; } const speed = this.ball.body.speed; if (speed < 0.35) { this.ball.setVelocity(0); this.ball.setStatic(true); this.isBallRolling = false; } else { this.ball.setStatic(false); this.isBallRolling = true; } } update(time, delta) { if (!this.ball) { return; } const velocity = this.ball.body.velocity; const ballX = this.ball.x; const ballY = this.ball.y; const ballRadius = this.ball.displayWidth / 2; // Implement complex collision handling const wallLeft = this.rectX; const wallRight = this.rectX + this.rectWidth; const wallTop = this.rectY; const wallBottom = this.rectY + this.rectHeight; // Check for collisions with walls if (ballX - ballRadius < wallLeft) { const overlap = wallLeft - (ballX - ballRadius); this.ball.x += overlap; this.ball.setVelocityX(-velocity.x * 0.8); // Reduce velocity slightly to prevent sticking } else if (ballX + ballRadius > wallRight) { const overlap = (ballX + ballRadius) - wallRight; this.ball.x -= overlap; this.ball.setVelocityX(-velocity.x * 0.8); } if (ballY - ballRadius < wallTop) { const overlap = wallTop - (ballY - ballRadius); this.ball.y += overlap; this.ball.setVelocityY(-velocity.y * 0.8); } else if (ballY + ballRadius > wallBottom) { const overlap = (ballY + ballRadius) - wallBottom; this.ball.y -= overlap; this.ball.setVelocityY(-velocity.y * 0.8); } // Check for overlap between ball and rune stones for (let i = this.runeStones.length - 1; i >= 0; i--) { const stone = this.runeStones[i]; const stoneRect = new Phaser.Geom.Rectangle(stone.x - stone.displayWidth / 2, stone.y - stone.displayHeight / 2, stone.displayWidth, stone.displayHeight); const ballRect = new Phaser.Geom.Rectangle(ballX - ballRadius, ballY - ballRadius, ballRadius * 2, ballRadius * 2); if (Phaser.Geom.Intersects.RectangleToRectangle(stoneRect, ballRect)) { stone.destroy(); this.frameGraphics[i].destroy(); this.runeStones.splice(i, 1); this.frameGraphics.splice(i, 1); // Check if all rune stones have been collected if (this.runeStones.length === 0) { this.turnHoleBlack(); } } else { // Update glowing frame const frame = this.frameGraphics[i]; const brightness = (Math.sin(time / 300) + 1) / 2; // Sine wave between 0 and 1 const color = Phaser.Display.Color.GetColor(0, 128 * brightness, 255 * brightness); // Create a semi-transparent electric blue color based on brightness frame.clear(); frame.lineStyle(4, color, brightness); // Set alpha to the brightness value frame.strokeRect(stone.x - stone.displayWidth / 2, stone.y - stone.displayHeight / 2, stone.displayWidth, stone.displayHeight); } } // Check if at least 50% of the ball is inside the black hole if (this.isHoleBlack) { const holeX = this.rectX + this.rectWidth / 2; const holeY = this.rectY + this.rectHeight / 2; const holeRadius = this.ball.displayWidth * 1.5; const distance = Phaser.Math.Distance.Between(ballX, ballY, holeX, holeY); if (distance < holeRadius - ballRadius / 2) { this.ball.destroy(); // Destroy the ball this.ballDestroyed = true; // Set the flag to indicate the ball has been destroyed this.ball = null; // Set the ball to null after destroying it this.updateScoreBeforeIncrementingLevel(); // Call the function to update the score before incrementing the level this.incrementLevelAndResetScene(); // Call the function to increment the level and reset the scene } } } updateScoreBeforeIncrementingLevel() { // Update the score before incrementing the level this.score += this.calculateScore(); this.updateScoreText(); } incrementLevelAndResetScene() { this.level++; // Increment the level/round number // Force the "Hole" text to say 9 when the game is over if (this.level === 10) { this.levelText.setText('Hole: 9'); } else { this.levelText.setText(`Hole: ${this.level}`); } // Update the par value based on the current hole number if (this.level <= 3) { this.par = 4; // Set par to 4 for the first three holes } else if (this.level <= 6) { this.par = 5; // Set par to 5 for holes 4 through 6 } else { this.par = 6; // Set par to 6 for all subsequent holes } this.parText.setText(`Par: ${this.par}`); // Update the par text // If the 9th hole is cleared, display the "Round Complete" and "Refresh" texts if (this.level === 10) { // Changed from 9 to 10 this.displayRoundCompleteTexts(); } else { // Reset the scene this.resetScene(); } } displayRoundCompleteTexts() { this.roundCompleteText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY - 50, 'ROUND COMPLETE', { font: '48px Arial', fill: '#ADD8E6' }); this.roundCompleteText.setOrigin(0.5, 0.5); // Center the text horizontally and vertically this.roundCompleteText.setDepth(1); // Set the depth of the text to be on top of the box this.refreshText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY + 50, 'To play again, please refresh the page', { font: '24px Arial', fill: '#ADD8E6' }); this.refreshText.setOrigin(0.5, 0.5); // Center the text horizontally and vertically this.refreshText.setDepth(1); // Set the depth of the text to be on top of the box } calculateScore() { // Calculate the score for the current hole based on the number of strokes taken and the par value const holeScore = this.strokes - this.par; this.strokes = 0; // Reset the number of strokes taken for the next hole return holeScore; } updateScoreText() { let scoreText; let color; if (this.score < 0) { color = '#00ff00'; // Green for under par scoreText = `SCORE: ${Math.abs(this.score)} under par`; } else if (this.score > 0) { color = '#ff0000'; // Red for over par scoreText = `SCORE: ${this.score} over par`; } else { color = '#ffffff'; // White for even par scoreText = `SCORE: even par`; } this.scoreText.setText(scoreText); this.scoreText.setColor(color); } resetScene() { // Destroy all existing rune stones and their frames this.runeStones.forEach(stone => stone.destroy()); this.runeStones = []; this.frameGraphics.forEach(frame => frame.destroy()); this.frameGraphics = []; // Reset the hole graphics this.holeGraphics.clear(); this.starGraphics.clear(); this.isHoleBlack = false; // Add the green circle with the star shape this.addGreenCircleWithStar(); // Reset the ball position and create a new ball const ballX = this.cameras.main.width / 2; const ballY = this.cameras.main.height - 50; const ballRadius = 10; this.ball = this.matter.add.image(ballX, ballY, null, null, { shape: 'circle', isStatic: false, restitution: 0.8, frictionAir: 0.012 }).setCircle(ballRadius); this.ball.setTexture('ballTexture'); this.ball.setDepth(1); // Reset the flags this.isBallRolling = false; this.ballDestroyed = false; // Add new rune stones with random positions this.addRuneStones(); } addRuneStones() { const ballX = this.ball.x; const ballY = this.ball.y; const ballRadius = this.ball.displayWidth / 2; const stoneScale = 0.085; // Adjust scale to make stones 15% smaller const maxY = Math.min(this.rectY + this.rectHeight, 500); // reduce the space by 10% on all sides const paddingX = this.rectWidth * 0.1; const paddingY = this.rectHeight * 0.1; const minDistanceFromBall = ballRadius * 5; // Minimum distance from the ball let firstRuneStone = null; const numStonesToAdd = this.level + 2; // Add stones equal to the current hole number plus 2 const stoneNames = ['runeStoneA', 'runeStoneB', 'runeStoneC']; for (let i = 0; i < numStonesToAdd; i++) { const name = stoneNames[i % 3]; // Cycle through the stone names to maintain a fairly even distribution let stone = this.add.image(0, 0, name); // Add rune stones as non-physical objects stone.setScale(stoneScale); if (!firstRuneStone) { firstRuneStone = stone; } else { stone.displayWidth = firstRuneStone.displayWidth; stone.displayHeight = firstRuneStone.displayHeight; } let stoneX, stoneY; let isOverlap; do { isOverlap = false; stoneX = Phaser.Math.Between(this.rectX + paddingX, this.rectX + this.rectWidth - paddingX); stoneY = Phaser.Math.Between(this.rectY + paddingY, maxY - paddingY); // Check distance from ball const distanceFromBall = Phaser.Math.Distance.Between(stoneX, stoneY, ballX, ballY); if (distanceFromBall < minDistanceFromBall) { isOverlap = true; } // Check overlap with other stones for (let existingStone of this.runeStones) { if (Phaser.Geom.Intersects.RectangleToRectangle( new Phaser.Geom.Rectangle(stoneX - stone.displayWidth / 2, stoneY - stone.displayHeight / 2, stone.displayWidth, stone.displayHeight), new Phaser.Geom.Rectangle(existingStone.x - existingStone.displayWidth / 2, existingStone.y - existingStone.displayHeight / 2, existingStone.displayWidth, existingStone.displayHeight) )) { isOverlap = true; break; } } // Check overlap with the hole const holeX = this.rectX + this.rectWidth / 2; const holeY = this.rectY + this.rectHeight / 2; const holeRadius = this.ball.displayWidth * 1.5; const distanceFromHole = Phaser.Math.Distance.Between(stoneX, stoneY, holeX, holeY); if (distanceFromHole < holeRadius + stone.displayWidth / 2) { isOverlap = true; } } while (isOverlap); stone.setPosition(stoneX, stoneY); stone.setTint(0xffffff); // Make the stone brighter // Add glowing frame const frame = this.add.graphics(); this.frameGraphics.push(frame); // Store the frame graphics in the array this.runeStones.push(stone); } } addGreenCircleWithStar() { const ballRadius = 10; const holeRadius = ballRadius * 3; const holeX = this.rectX + this.rectWidth / 2; const holeY = this.rectY + this.rectHeight / 2; this.holeGraphics.fillStyle(0x006600, 1); // Darker green color (0x006600) this.holeGraphics.fillCircle(holeX, holeY, holeRadius); // Draw the green star shape const starRadius = holeRadius / 1.5; // Increase the star size const starPoints = 5; // Number of points in the star const starRotation = 0; // Rotate the star so a limb is sticking straight up this.starGraphics.fillStyle(0x008000, 1); // Green color (0x008000) this.starGraphics.beginPath(); this.starGraphics.moveTo(holeX + starRadius * Math.cos(starRotation), holeY + starRadius * Math.sin(starRotation)); for (let i = 1; i <= starPoints * 2; i++) { const radius = (i % 2 === 0) ? starRadius : starRadius / 2; const angle = starRotation + (i * Math.PI / starPoints); this.starGraphics.lineTo(holeX + radius * Math.cos(angle), holeY + radius * Math.sin(angle)); } this.starGraphics.fillPath(); } turnHoleBlack() { // Clear the existing hole graphics this.holeGraphics.clear(); this.starGraphics.clear(); // Draw a black circle for the hole const holeRadius = this.ball.displayWidth * 1.5; const holeX = this.rectX + this.rectWidth / 2; const holeY = this.rectY + this.rectHeight / 2; this.holeGraphics.fillStyle(0x000000, 1); // Black color (0x000000) this.holeGraphics.fillCircle(holeX, holeY, holeRadius); this.isHoleBlack = true; // Set the flag to indicate the hole is black } } 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: 'matter', matter: { gravity: { y: 0 }, removeOutOfBounds: false } }, scene: Example }; window.phaserGame = new Phaser.Game(config);