class Example extends Phaser.Scene { constructor() { super(); this.grid = []; this.gridWidth = 8; this.gridHeight = 0; // We'll calculate this dynamically this.aimOrigin = null; this.nextBubble = null; this.bubbleGroup = null; this.cellWidth = 0; this.cellHeight = 0; this.shootingBubble = null; this.score = 0; this.scoreText = null; this.gameOverText = null; this.isGameOver = false; this.floatingCheckTimer = null; // New property for the timer this.bubbleColors = [0xFF9AA2, 0xFFB347, 0xFFFF99, 0x9EE09E, 0x9EC1CF]; // Slightly more vibrant pastel colors this.aimAngle = 0; this.gridGraphics = null; // New property for grid graphics this.pointerPosition = null; // New property to store pointer position this.isAiming = false; // New property to track if the player is aiming this.errorMessage = null; // New property for error message this.allBubbles = []; // New property to store all bubbles this.shooting_start_time = 0; // Initialize shooting start time this.aimLine = null; // New property for aim line } preload() { this.load.image('bubble', 'https://play.rosebud.ai/assets/bubble_4_grayscale.png?XY9R'); } create() { const { width, height } = this.scale; this.cellWidth = width / this.gridWidth; this.cellHeight = this.cellWidth; // Make cells square // Calculate the number of rows that fit in the screen const cannonHeight = 50; // Approximate height of the cannon area this.gridHeight = Math.floor((height - cannonHeight) / this.cellHeight); this.bubbleGroup = this.add.group(); // Create grid graphics this.gridGraphics = this.add.graphics(); this.drawGrid(); for (let y = 0; y < this.gridHeight; y++) { this.grid[y] = []; const rowWidth = y % 2 === 0 ? this.gridWidth : this.gridWidth - 1; for (let x = 0; x < rowWidth; x++) { if (y < Math.floor(this.gridHeight * 1 / 3)) { this.createBubble(x, y); } else { this.grid[y][x] = null; } } } this.aimOrigin = { x: width / 2, y: height - cannonHeight / 2 }; this.input.on('pointermove', this.updateAim, this); this.input.on('pointerdown', this.startAiming, this); this.input.on('pointerup', this.shootBubble, this); this.createNextBubble(); this.scoreText = this.add.text(10, height - 30, 'Score: 0', { fontSize: '24px', fill: '#fff' }); this.gameOverText = this.add.text(width / 2, height / 2, 'Game Over', { fontSize: '48px', fill: '#fff', backgroundColor: '#000' }); this.gameOverText.setOrigin(0.5); this.gameOverText.setVisible(false); // Initialize pointer position this.pointerPosition = { x: width / 2, y: height / 2 }; // Create error message text this.errorMessage = this.add.text(width / 2, height / 2, '', { fontSize: '24px', fill: '#ff0000', backgroundColor: '#000', padding: { x: 10, y: 5 } }); this.errorMessage.setOrigin(0.5); this.errorMessage.setVisible(false); // Create aim line this.aimLine = this.add.graphics(); this.aimLine.setDepth(-1); // Set to a negative value to ensure it's behind bubbles } drawGrid() { this.gridGraphics.clear(); // Grid lines are no longer drawn } getXOffset(y) { return y % 2 === 0 ? 0 : this.cellWidth / 2; } createBubble(x, y) { const colorIndex = Phaser.Math.Between(0, this.bubbleColors.length - 1); const color = this.bubbleColors[colorIndex]; const xOffset = this.getXOffset(y); const bubble = this.add.image( x * this.cellWidth + this.cellWidth / 2 + xOffset, y * this.cellHeight + this.cellHeight / 2, 'bubble' ); const scaleFactor = Math.min(this.cellWidth, this.cellHeight) / bubble.width; bubble.setScale(scaleFactor); bubble.setTint(color); bubble.setData('type', colorIndex); bubble.setData('gridX', x); bubble.setData('gridY', y); bubble.setDepth(1); // Ensure grid bubbles are above the aim line this.grid[y][x] = bubble; this.bubbleGroup.add(bubble); this.allBubbles.push(bubble); return bubble; } createNextBubble() { const colorIndex = Phaser.Math.Between(0, this.bubbleColors.length - 1); const color = this.bubbleColors[colorIndex]; this.nextBubble = this.add.image(this.aimOrigin.x, this.aimOrigin.y, 'bubble'); const scaleFactor = Math.min(this.cellWidth, this.cellHeight) / this.nextBubble.width; this.nextBubble.setScale(scaleFactor); this.nextBubble.setTint(color); this.nextBubble.setData('type', colorIndex); this.nextBubble.setDepth(2); // Ensure the next bubble is above grid bubbles } startAiming(pointer) { if (!this.isGameOver && !this.shootingBubble) { this.isAiming = true; this.updateAim(pointer); this.aimLine.setVisible(true); } } updateAim(pointer) { if (!pointer) return; // Add this check this.pointerPosition = { x: pointer.x, y: pointer.y }; const angle = Phaser.Math.Angle.Between( this.aimOrigin.x, this.aimOrigin.y, pointer.x, pointer.y ); const degrees = Phaser.Math.RadToDeg(angle); this.aimAngle = Phaser.Math.DegToRad(Phaser.Math.Clamp(degrees, -170, -10)); // Update aim line this.drawAimLine(); } drawAimLine() { if (!this.isAiming) { this.aimLine.clear(); return; } const path = this.calculateAimPath(this.aimOrigin.x, this.aimOrigin.y, this.aimAngle); this.aimLine.clear(); this.aimLine.lineStyle(2, 0xffffff, 0.5); this.aimLine.beginPath(); this.aimLine.moveTo(this.aimOrigin.x, this.aimOrigin.y); for (let i = 0; i < path.length; i++) { const point = path[i]; this.aimLine.lineTo(point.x, point.y); if (point.bounced && i < path.length - 1) { // Draw a small circle at bounce points this.aimLine.strokePath(); this.aimLine.beginPath(); this.aimLine.arc(point.x, point.y, 3, 0, Math.PI * 2); this.aimLine.fillPath(); this.aimLine.beginPath(); this.aimLine.moveTo(point.x, point.y); } } this.aimLine.strokePath(); } calculateAimPath(startX, startY, angle, maxBounces = 3) { const path = []; let currentX = startX; let currentY = startY; let currentAngle = angle; const speed = 600; // Use the same speed as in shootBubble const dt = 1 / 60; // Simulate at 60 fps const maxSteps = 1200; // Increased from 1000 to make the aim line longer for (let step = 0; step < maxSteps; step++) { const newX = currentX + Math.cos(currentAngle) * speed * dt; const newY = currentY + Math.sin(currentAngle) * speed * dt; // Check for wall collisions if (newX < this.cellWidth / 2 || newX > this.scale.width - this.cellWidth / 2) { currentAngle = Math.PI - currentAngle; path.push({ x: newX, y: newY, bounced: true }); currentX = newX; currentY = newY; continue; } // Check for ceiling collision if (newY <= this.cellHeight / 2) { path.push({ x: newX, y: newY, bounced: false }); break; } // Check for bubble collisions const collisionResult = this.checkCollision({ x: newX, y: newY, displayWidth: this.cellWidth }); if (collisionResult.collided) { path.push({ x: newX, y: newY, bounced: false }); break; } currentX = newX; currentY = newY; path.push({ x: currentX, y: currentY, bounced: false }); // Break if we've gone off the bottom of the screen if (currentY > this.scale.height) { break; } } return path; } raycast(startX, startY, endX, endY) { const leftIntersection = this.lineIntersection(startX, startY, endX, endY, 0, 0, 0, this.scale.height); const rightIntersection = this.lineIntersection(startX, startY, endX, endY, this.scale.width, 0, this.scale.width, this.scale.height); const topIntersection = this.lineIntersection(startX, startY, endX, endY, 0, 0, this.scale.width, 0); let closest = null; let minDistance = Infinity; [{ point: leftIntersection, side: 'left' }, { point: rightIntersection, side: 'right' }, { point: topIntersection, side: 'top' }].forEach(intersection => { if (intersection.point) { const distance = Phaser.Math.Distance.Between(startX, startY, intersection.point.x, intersection.point.y); if (distance < minDistance && distance > 0.1) { minDistance = distance; closest = { x: intersection.point.x, y: intersection.point.y, side: intersection.side }; } } }); // Check for bubble intersections for (let y = 0; y < this.gridHeight; y++) { for (let x = 0; x < (y % 2 === 0 ? this.gridWidth : this.gridWidth - 1); x++) { const bubble = this.grid[y][x]; if (bubble) { const intersection = this.lineCircleIntersection( startX, startY, endX, endY, bubble.x, bubble.y, this.cellWidth / 2 ); if (intersection) { const distance = Phaser.Math.Distance.Between(startX, startY, intersection.x, intersection.y); if (distance < minDistance) { minDistance = distance; closest = { x: intersection.x, y: intersection.y, bubble: bubble }; } } } } } return closest; } lineIntersection(x1, y1, x2, y2, x3, y3, x4, y4) { const den = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4); if (den == 0) return null; const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den; const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den; if (t >= 0 && t <= 1 && u >= 0) { return { x: x1 + t * (x2 - x1), y: y1 + t * (y2 - y1) }; } return null; } lineCircleIntersection(x1, y1, x2, y2, cx, cy, r) { const dx = x2 - x1; const dy = y2 - y1; const a = dx * dx + dy * dy; const b = 2 * (dx * (x1 - cx) + dy * (y1 - cy)); const c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r; const discriminant = b * b - 4 * a * c; if (discriminant < 0) { return null; } // Find the closest intersection point const t1 = (-b + Math.sqrt(discriminant)) / (2 * a); const t2 = (-b - Math.sqrt(discriminant)) / (2 * a); const t = Math.min(t1, t2); if (t >= 0 && t <= 1) { return { x: x1 + t * dx, y: y1 + t * dy }; } return null; } shootBubble() { if (this.nextBubble && !this.shootingBubble && !this.isGameOver && this.isAiming) { const speed = 600; const direction = new Phaser.Math.Vector2( Math.cos(this.aimAngle), Math.sin(this.aimAngle) ).normalize(); this.shootingBubble = this.nextBubble; this.shootingBubble.setData('direction', direction); this.shootingBubble.setData('speed', speed); this.shootingBubble.setData('initialPosition', { x: this.aimOrigin.x, y: this.aimOrigin.y }); this.shooting_start_time = this.time.now; this.shootingBubble.setData('currentAngle', this.aimAngle); this.shootingBubble.setData('bounceCount', 0); this.bubbleGroup.add(this.shootingBubble); this.allBubbles.push(this.shootingBubble); this.createNextBubble(); this.isAiming = false; this.aimLine.setVisible(false); this.startFloatingCheckTimer(); // Start the floating check timer } } update(time, delta) { if (this.shootingBubble && !this.isGameOver) { const direction = this.shootingBubble.getData('direction'); const speed = this.shootingBubble.getData('speed'); const initialPosition = this.shootingBubble.getData('initialPosition'); let currentAngle = this.shootingBubble.getData('currentAngle'); let bounceCount = this.shootingBubble.getData('bounceCount'); const elapsedTime = (time - this.shooting_start_time) / 1000; // Convert to seconds // Calculate the new position based on the initial position, direction, speed, and elapsed time const distanceTraveled = speed * elapsedTime; const newX = initialPosition.x + Math.cos(currentAngle) * distanceTraveled; const newY = initialPosition.y + Math.sin(currentAngle) * distanceTraveled; // Check for wall collisions let collision = false; if (newX < this.shootingBubble.displayWidth / 2 || newX > this.scale.width - this.shootingBubble.displayWidth / 2) { currentAngle = Math.PI - currentAngle; this.shootingBubble.setData('currentAngle', currentAngle); this.shootingBubble.setData('initialPosition', { x: this.shootingBubble.x, y: this.shootingBubble.y }); this.shooting_start_time = time; bounceCount++; this.shootingBubble.setData('bounceCount', bounceCount); collision = true; } if (!collision) { this.shootingBubble.setPosition(newX, newY); } const collisionResult = this.checkCollision(this.shootingBubble); if (collisionResult.collided) { this.stickBubble(this.shootingBubble, collisionResult.collidedBubble, collisionResult.collisionPoint); this.shootingBubble = null; } else if (this.shootingBubble.y > this.scale.height) { this.shootingBubble.destroy(); this.shootingBubble = null; } } // Hide error message after 2 seconds if (this.errorMessage.visible) { if (time - this.errorMessageTime > 2000) { this.errorMessage.setVisible(false); } } } checkCollision(bubble) { if (bubble.y <= this.cellHeight / 2) { return { collided: true, collidedBubble: null, collisionPoint: { x: bubble.x, y: bubble.y } }; } for (let y = 0; y < this.gridHeight; y++) { for (let x = 0; x < (y % 2 === 0 ? this.gridWidth : this.gridWidth - 1); x++) { const gridBubble = this.grid[y][x]; if (gridBubble) { const distance = Phaser.Math.Distance.Between( bubble.x, bubble.y, gridBubble.x, gridBubble.y ); if (distance < this.cellWidth * 1.1) { // Increased collision threshold // Calculate the collision point const angle = Phaser.Math.Angle.Between( gridBubble.x, gridBubble.y, bubble.x, bubble.y ); const collisionX = gridBubble.x + Math.cos(angle) * this.cellWidth / 2; const collisionY = gridBubble.y + Math.sin(angle) * this.cellWidth / 2; return { collided: true, collidedBubble: gridBubble, collisionPoint: { x: collisionX, y: collisionY } }; } } } } return { collided: false }; } stickBubble(bubble, collidedBubble, collisionPoint) { bubble.setData('velocity', null); const bubbleRadius = bubble.displayWidth / 2; const nearestPosition = this.findNearestEmptyPosition(bubble.x, bubble.y, bubbleRadius); if (nearestPosition) { this.placeBubble(bubble, nearestPosition[0], nearestPosition[1]); } else { if (!this.isGameOver) { this.gameOver(); } bubble.destroy(); } } isValidGridPosition(x, y) { return y >= 0 && y < this.gridHeight && x >= 0 && x < (y % 2 === 0 ? this.gridWidth : this.gridWidth - 1) && this.grid[y] && this.grid[y][x] === null; // Check if the row and cell exist and the cell is empty } placeBubble(bubble, gridX, gridY) { if (!this.isValidGridPosition(gridX, gridY)) { this.showErrorMessage("Cannot place bubble in occupied cell"); bubble.destroy(); return; } const xOffset = this.getXOffset(gridY); bubble.setPosition( gridX * this.cellWidth + this.cellWidth / 2 + xOffset, gridY * this.cellHeight + this.cellHeight / 2 ); bubble.setData('gridX', gridX); bubble.setData('gridY', gridY); this.grid[gridY][gridX] = bubble; // Add bouncy effect to the placed bubble this.tweens.add({ targets: bubble, scale: { from: bubble.scale * 1.2, to: bubble.scale }, duration: 200, ease: 'Bounce.easeOut' }); // Propagate bouncy effect to neighboring bubbles this.propagateBounce(gridX, gridY, 2); this.checkForMatches(gridX, gridY); this.checkFloatingBubbles(); this.checkGameOver(); } propagateBounce(x, y, depth) { if (depth <= 0) return; const directions = [ [0, -1], [1, -1], [1, 0], [0, 1], [-1, 0], [-1, -1] ]; for (let [dx, dy] of directions) { const newX = x + dx; const newY = y + dy; if (newY >= 0 && newY < this.gridHeight && newX >= 0 && newX < (newY % 2 === 0 ? this.gridWidth : this.gridWidth - 1) && this.grid[newY] && this.grid[newY][newX]) { const neighborBubble = this.grid[newY][newX]; this.tweens.add({ targets: neighborBubble, scale: { from: neighborBubble.scale * 1.1, to: neighborBubble.scale }, duration: 150, ease: 'Bounce.easeOut', delay: 50 * (3 - depth) }); this.propagateBounce(newX, newY, depth - 1); } } } findNearestEmptyPosition(x, y, bubbleRadius) { let nearestDistance = Infinity; let nearestPosition = null; const bubbleCircle = new Phaser.Geom.Circle(x, y, bubbleRadius); for (let gridY = 0; gridY < this.gridHeight; gridY++) { for (let gridX = 0; gridX < (gridY % 2 === 0 ? this.gridWidth : this.gridWidth - 1); gridX++) { if (this.isValidGridPosition(gridX, gridY)) { const xPos = gridX * this.cellWidth + this.cellWidth / 2 + this.getXOffset(gridY); const yPos = gridY * this.cellHeight + this.cellHeight / 2; const cellCircle = new Phaser.Geom.Circle(xPos, yPos, this.cellWidth / 2); if (Phaser.Geom.Intersects.CircleToCircle(bubbleCircle, cellCircle)) { const distance = Phaser.Math.Distance.Between(x, y, xPos, yPos); if (distance < nearestDistance) { nearestDistance = distance; nearestPosition = [gridX, gridY]; } } } } } return nearestPosition; } checkForMatches(x, y) { if (!this.grid[y] || !this.grid[y][x]) return; const type = this.grid[y][x].getData('type'); const matches = this.findMatches(x, y, type, []); if (matches.length >= 3) { this.popBubbles(matches); this.updateScore(matches.length); this.checkFloatingBubbles(); } } findMatches(x, y, type, matches) { if (y < 0 || y >= this.gridHeight || x < 0 || x >= (y % 2 === 0 ? this.gridWidth : this.gridWidth - 1) || !this.grid[y] || !this.grid[y][x]) { return matches; } if (this.grid[y][x].getData('type') !== type || matches.some(m => m[0] === x && m[1] === y)) { return matches; } matches.push([x, y]); // Check neighbors, including diagonal connections for odd rows const directions = [ [1, 0], [-1, 0], [0, 1], [0, -1], [y % 2 === 0 ? -1 : 1, -1], [y % 2 === 0 ? -1 : 1, 1] ]; for (let [dx, dy] of directions) { this.findMatches(x + dx, y + dy, type, matches); } return matches; } popBubbles(matches) { matches.forEach(match => { const [x, y] = match; if (this.grid[y] && this.grid[y][x]) { const bubble = this.grid[y][x]; this.tweens.add({ targets: bubble, scale: 0, duration: 200, onComplete: () => { bubble.destroy(); this.grid[y][x] = null; this.allBubbles = this.allBubbles.filter(b => b !== bubble); } }); } }); } updateScore(matchCount) { this.score += matchCount * 10; this.scoreText.setText(`Score: ${this.score}`); } checkFloatingBubbles() { const connectedBubbles = this.findConnectedBubbles(); const floatingBubbles = this.allBubbles.filter(bubble => !connectedBubbles.includes(bubble)); this.animateFloatingBubbles(floatingBubbles); } findConnectedBubbles() { const connected = []; const visited = new Set(); for (let x = 0; x < this.gridWidth; x++) { if (this.grid[0] && this.grid[0][x]) { this.dfs(x, 0, connected, visited); } } return connected; } dfs(x, y, connected, visited) { if (y < 0 || y >= this.gridHeight || x < 0 || x >= (y % 2 === 0 ? this.gridWidth : this.gridWidth - 1) || !this.grid[y] || !this.grid[y][x] || visited.has(`${x},${y}`)) { return; } visited.add(`${x},${y}`); connected.push(this.grid[y][x]); // Check neighbors, including diagonal connections for odd rows const directions = [ [1, 0], [-1, 0], [0, 1], [0, -1], [y % 2 === 0 ? -1 : 1, -1], [y % 2 === 0 ? -1 : 1, 1] ]; for (let [dx, dy] of directions) { this.dfs(x + dx, y + dy, connected, visited); } } animateFloatingBubbles(floatingBubbles) { floatingBubbles.forEach(bubble => { const x = bubble.getData('gridX'); const y = bubble.getData('gridY'); if (this.grid[y] && this.grid[y][x] === bubble) { this.grid[y][x] = null; } this.tweens.add({ targets: bubble, y: this.scale.height + this.cellHeight, alpha: 0, duration: 500, onComplete: () => { bubble.destroy(); this.updateScore(1); this.allBubbles = this.allBubbles.filter(b => b !== bubble); } }); }); } checkGameOver() { // Check if there's any empty space in the bottom row const bottomRow = this.gridHeight - 1; let hasEmptySpace = false; for (let x = 0; x < this.gridWidth; x++) { if (this.grid[bottomRow] && !this.grid[bottomRow][x]) { hasEmptySpace = true; break; } } if (!hasEmptySpace) { this.gameOver(); } } gameOver() { if (!this.isGameOver) { this.isGameOver = true; this.gameOverText.setVisible(true); this.input.off('pointermove', this.updateAim); this.input.off('pointerdown', this.startAiming); this.input.off('pointerup', this.shootBubble); this.stopFloatingCheckTimer(); // Stop the floating check timer console.log('Game Over: No valid position to attach bubble'); } } showErrorMessage(message) { this.errorMessage.setText(message); this.errorMessage.setVisible(true); this.errorMessageTime = this.time.now; } startFloatingCheckTimer() { this.stopFloatingCheckTimer(); // Stop any existing timer this.floatingCheckTimer = this.time.addEvent({ delay: 1000, // 1 second callback: this.checkFloatingBubbles, callbackScope: this, loop: true }); } stopFloatingCheckTimer() { if (this.floatingCheckTimer) { this.floatingCheckTimer.remove(); this.floatingCheckTimer = null; } } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: 'renderDiv', pixelArt: false, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 360, height: 640 }, scene: Example, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } } }; window.phaserGame = new Phaser.Game(config);