class MenuScene extends Phaser.Scene { constructor() { super({ key: 'MenuScene' }); } create() { // Title text this.add.text(400, 80, 'Select Difficulty', { fontSize: '48px', fontFamily: 'Arial', color: '#ffffff' }).setOrigin(0.5); // Create HTML select element for level const input = document.createElement('select'); input.style.position = 'absolute'; input.style.width = '80px'; input.style.height = '40px'; input.style.fontSize = '32px'; input.style.fontFamily = 'Arial'; input.style.color = '#000000'; input.style.backgroundColor = '#ffffff'; input.style.border = '2px solid #000000'; input.style.textAlign = 'center'; input.style.outline = 'none'; input.style.zIndex = '10000'; // Add options from 1 to 99 for (let i = 1; i <= 99; i++) { const option = document.createElement('option'); option.value = i.toString(); option.text = i.toString(); if (i === 50) option.selected = true; input.appendChild(option); } // Add the input to the game's parent container const gameContainer = this.game.canvas.parentElement; gameContainer.appendChild(input); // Position the input element const updateInputPosition = () => { const bounds = this.game.canvas.getBoundingClientRect(); const scale = bounds.width / 800; const centerX = bounds.left + (bounds.width / 2); input.style.left = `${centerX - 30}px`; input.style.top = `${bounds.top + 180 * scale}px`; input.style.transform = `scale(${scale})`; input.style.transformOrigin = 'center top'; input.style.display = 'block'; }; updateInputPosition(); window.addEventListener('resize', updateInputPosition); // Create label this.add.text(400, 150, 'Enter Level (1-99):', { fontSize: '24px', fontFamily: 'Arial', color: '#ffffff' }).setOrigin(0.5); // Create start button const startButton = this.add.rectangle(400, 500, 200, 40, 0x4444aa); const startText = this.add.text(400, 500, 'Start Game', { fontSize: '24px', fontFamily: 'Arial', color: '#ffffff' }).setOrigin(0.5); startButton.setInteractive(); // Store select reference this.levelInput = input; // Store input reference this.levelInput = input; // Create second HTML select element for points const pointsInput = document.createElement('select'); pointsInput.style = input.style.cssText; // Copy styles from first input // Add options from 1 to 99 for (let i = 1; i <= 99; i++) { const option = document.createElement('option'); option.value = i.toString(); option.text = i.toString(); if (i === 7) option.selected = true; pointsInput.appendChild(option); } // Add the points input to the game's parent container gameContainer.appendChild(pointsInput); // Add label for points input this.add.text(400, 300, 'First to ## Points (1-99):', { fontSize: '24px', fontFamily: 'Arial', color: '#ffffff' }).setOrigin(0.5); // Position the points input element const updatePointsInputPosition = () => { const bounds = this.game.canvas.getBoundingClientRect(); const scale = bounds.width / 800; const centerX = bounds.left + (bounds.width / 2); pointsInput.style.left = `${centerX - 30}px`; pointsInput.style.top = `${bounds.top + 330 * scale}px`; pointsInput.style.transform = `scale(${scale})`; pointsInput.style.transformOrigin = 'center top'; pointsInput.style.display = 'block'; }; updatePointsInputPosition(); window.addEventListener('resize', updatePointsInputPosition); // Store points input reference this.pointsInput = pointsInput; // Store points input reference this.pointsInput = pointsInput; // Hover effects for start button startButton.on('pointerover', () => { startButton.setFillStyle(0x6666cc); }); startButton.on('pointerout', () => { startButton.setFillStyle(0x4444aa); }); // Click handler for start button startButton.on('pointerdown', () => { let difficulty; if (this.levelInput.value.trim() === '') { difficulty = 50; } else if (isNaN(parseInt(this.levelInput.value)) || parseInt(this.levelInput.value) < 1) { difficulty = 1; } else { difficulty = Math.min(parseInt(this.levelInput.value), 99); } // Remove the input element before starting the game this.levelInput.remove(); this.pointsInput.remove(); window.removeEventListener('resize', updateInputPosition); window.removeEventListener('resize', updatePointsInputPosition); let pointsToWin; if (this.pointsInput.value.trim() === '') { pointsToWin = 7; } else if (isNaN(parseInt(this.pointsInput.value)) || parseInt(this.pointsInput.value) < 1) { pointsToWin = 7; } else { pointsToWin = Math.min(parseInt(this.pointsInput.value), 99); } this.scene.start('GameScene', { difficulty, pointsToWin }); }); // Add instruction text below the buttons this.add.text(400, 550, 'Use your mouse or touchpad to control your blue mallet.', { fontSize: '20px', fontFamily: 'Arial', color: '#ffffff', align: 'center' }).setOrigin(0.5); } } class GameScene extends Phaser.Scene { constructor(config) { super({ key: 'GameScene' }); this.puckInRedFieldTimer = null; this.puckLastTouched = 0; this.puckInAISideTimer = null; // Store the difficulty level (1-10) this.difficulty = 1; // Calculate error chance based on difficulty (90% at level 1, 0% at level 99) this.errorChance = Math.max(0, Math.min(90, (100 - this.difficulty) * (90 / 99))); this.playerMallet = null; this.aiMallet = null; this.cursorGraphic = null; // Add cursor graphic reference this.isFirstTurn = true; // Track if it's the first turn this.lastScorer = null; // Track who scored last this.playerScore = 0; this.aiScore = 0; } create(data) { // Store the selected difficulty and points to win this.difficulty = data.difficulty || 1; this.pointsToWin = data.pointsToWin || 7; // If pointsToWin is 0, set it to 1 if (this.pointsToWin === 0) this.pointsToWin = 1; // Calculate error chance based on difficulty (90% at level 1, 0% at level 99) this.errorChance = Math.max(0, Math.min(90, (100 - this.difficulty) * (90 / 99))); // Add level display in top-left corner this.add.text(20, 20, `Level: ${this.difficulty}`, { fontSize: '24px', fontFamily: 'Arial', color: '#ffffff', fontStyle: 'bold' }); // Add points to win display below level with more spacing this.add.text(20, 70, `Reach`, { fontSize: '20px', fontFamily: 'Arial', color: '#ffffff', fontStyle: 'bold' }); this.add.text(20, 95, `${this.pointsToWin} points`, { fontSize: '20px', fontFamily: 'Arial', color: '#ffffff', fontStyle: 'bold' }); // Create a custom cursor graphic with glow effect this.cursorGraphic = this.add.graphics(); // Outer glow (very faint) this.cursorGraphic.fillStyle(0x4488ff, 0.2); this.cursorGraphic.fillCircle(0, 0, 24); // Middle glow this.cursorGraphic.fillStyle(0x4488ff, 0.4); this.cursorGraphic.fillCircle(0, 0, 16); // Inner bright core this.cursorGraphic.fillStyle(0x4488ff, 0.8); this.cursorGraphic.fillCircle(0, 0, 8); // Hide the default cursor this.input.setDefaultCursor('none'); // Set the background color to a dark blue for the table this.cameras.main.setBackgroundColor('#1a4c83'); // Create table boundaries const tableWidth = 500; const tableHeight = 600; const startX = (800 - tableWidth) / 2; const startY = 0; const goalWidth = 200; // Width of the goal // Create table boundaries const graphics = this.add.graphics(); graphics.lineStyle(4, 0xffffff); graphics.strokeRect(startX, startY, tableWidth, tableHeight); // Draw goals graphics.lineStyle(12, 0xff9999, 0.8); // Light red, slightly transparent, thicker graphics.beginPath(); graphics.moveTo(startX + (tableWidth - goalWidth) / 2, startY); graphics.lineTo(startX + (tableWidth + goalWidth) / 2, startY); graphics.strokePath(); graphics.lineStyle(12, 0x99bbff, 0.8); // Light blue, slightly transparent, thicker graphics.beginPath(); graphics.moveTo(startX + (tableWidth - goalWidth) / 2, startY + tableHeight); graphics.lineTo(startX + (tableWidth + goalWidth) / 2, startY + tableHeight); graphics.strokePath(); // Draw center lines graphics.lineStyle(2, 0xcccccc, 0.3); // thin, grey, very transparent // Horizontal center line graphics.beginPath(); graphics.moveTo(startX, startY + tableHeight / 2); graphics.lineTo(startX + tableWidth, startY + tableHeight / 2); graphics.strokePath(); // Create physics boundaries for the table // Top boundary this.topWall = this.add.rectangle(startX + tableWidth / 2, startY, tableWidth, 4); this.physics.add.existing(this.topWall, true); // Bottom boundary this.bottomWall = this.add.rectangle(startX + tableWidth / 2, startY + tableHeight, tableWidth, 4); this.physics.add.existing(this.bottomWall, true); // Left boundary this.leftWall = this.add.rectangle(startX, startY + tableHeight / 2, 4, tableHeight); this.physics.add.existing(this.leftWall, true); // Right boundary this.rightWall = this.add.rectangle(startX + tableWidth, startY + tableHeight / 2, 4, tableHeight); this.physics.add.existing(this.rightWall, true); // Create the player's mallet (bottom) this.playerMallet = this.add.circle(400, 550, 26, 0x4488ff); this.physics.add.existing(this.playerMallet, false); this.playerMallet.body.setCircle(26); this.playerMallet.body.setImmovable(true); this.playerMallet.body.setCollideWorldBounds(true); // Create the AI mallet (top, stationary) this.aiMallet = this.add.circle(400, 50, 26, 0xff0000); this.physics.add.existing(this.aiMallet, false); this.aiMallet.body.setCircle(26); this.aiMallet.body.setImmovable(true); this.aiMallet.body.setCollideWorldBounds(true); // Create the puck this.puck = this.add.circle(400, 400, 20, 0xffffff); // Start in blue's field this.physics.add.existing(this.puck, false); this.puck.body.setCircle(20); this.puck.body.setBounce(0.9); this.puck.body.setDrag(0.0001); this.puck.body.maxVelocity.set(1200); // Create goal zones this.topGoal = this.add.rectangle( startX + tableWidth / 2, startY, goalWidth, 4 ); this.bottomGoal = this.add.rectangle( startX + tableWidth / 2, startY + tableHeight, goalWidth, 4 ); this.physics.add.existing(this.topGoal, true); this.physics.add.existing(this.bottomGoal, true); // Add goal detection this.physics.add.overlap(this.puck, this.topGoal, () => this.handleGoal('top'), null, this); this.physics.add.overlap(this.puck, this.bottomGoal, () => this.handleGoal('bottom'), null, this); // Game state this.gameActive = true; // Add colliders with custom collision handlers this.physics.add.collider(this.puck, this.playerMallet, this.handleMalletHit, null, this); this.physics.add.collider(this.puck, this.aiMallet, this.handleMalletHit, null, this); // Add colliders for each wall this.physics.add.collider(this.puck, this.topWall); this.physics.add.collider(this.puck, this.bottomWall); this.physics.add.collider(this.puck, this.leftWall); this.physics.add.collider(this.puck, this.rightWall); // Store the current mallet position this.currentX = this.playerMallet.x; this.currentY = this.playerMallet.y; // Enable mouse movement this.input.on('pointermove', (pointer) => { // Update cursor graphic position always this.cursorGraphic.setPosition(pointer.x, pointer.y); if (!this.gameActive) return; // Prevent mallet movement when game is not active // Calculate the bounds for mallet movement const minX = startX + 26; // Left boundary + mallet radius const maxX = startX + tableWidth - 26; // Right boundary - mallet radius const minY = startY + tableHeight / 2 + 26; // Middle of table + mallet radius const maxY = startY + tableHeight - 26; // Bottom boundary - mallet radius // Get target position (constrained within bounds) let targetX = Phaser.Math.Clamp(pointer.x, minX, maxX); let targetY = Phaser.Math.Clamp(pointer.y, minY, maxY); // Interpolate towards target position (this creates smooth, slower movement) this.currentX = Phaser.Math.Linear(this.currentX, targetX, 0.2); this.currentY = Phaser.Math.Linear(this.currentY, targetY, 0.2); this.playerMallet.setPosition(this.currentX, this.currentY); }); // Add score displays const textConfig = { fontSize: '64px', fontFamily: 'Arial', fontStyle: 'bold' }; // Player score (blue, left side) this.playerScoreText = this.add.text(50, 300, '0', { ...textConfig, color: '#4488ff' }).setOrigin(0.5); // AI score (red, right side) this.aiScoreText = this.add.text(750, 300, '0', { ...textConfig, color: '#ff0000' }).setOrigin(0.5); } predictPuckPosition(timeAhead) { // Calculate where the puck will be in the future const futureX = this.puck.x + (this.puck.body.velocity.x * timeAhead); const futureY = this.puck.y + (this.puck.body.velocity.y * timeAhead); return { x: futureX, y: futureY }; } calculateDefensePosition() { const tableWidth = 500; const startX = (800 - tableWidth) / 2; const margin = 24; // AI mallet radius const centerY = 300; // Center line Y position const goalWidth = 200; const goalLeft = startX + (tableWidth - goalWidth) / 2; const goalRight = startX + (tableWidth + goalWidth) / 2; let targetX = 400; let targetY = 50; const defenseZone = 200; // Get current and predicted puck positions with multiple time intervals const shortPrediction = this.predictPuckPosition(0.1); const prediction = this.predictPuckPosition(0.2); const farPrediction = this.predictPuckPosition(0.3); // Calculate puck trajectory to goal const puckVelocity = new Phaser.Math.Vector2(this.puck.body.velocity.x, this.puck.body.velocity.y); const timeToGoal = this.puck.y / -Math.max(1, puckVelocity.y); // Avoid division by zero const projectedX = this.puck.x + (puckVelocity.x * timeToGoal); // High-priority defense when puck is heading towards goal const isHeadingTowardsGoal = projectedX > goalLeft && projectedX < goalRight; // If puck is moving upward or in our half if ((this.puck.body.velocity.y < 0 || this.puck.y < 300)) { // Priority 1: Immediate goal threat defense if (isHeadingTowardsGoal) { // Position directly in projected goal path targetX = Phaser.Math.Clamp(projectedX, goalLeft + margin, goalRight - margin); targetY = Math.min(this.puck.y < 200 ? this.puck.y : shortPrediction.y, defenseZone); } // Priority 2: Fast approaching puck else if (Math.abs(this.puck.body.velocity.y) > 300) { targetX = Phaser.Math.Clamp(prediction.x, startX + margin, startX + tableWidth - margin); targetY = Math.min(prediction.y + 30, defenseZone); } // Priority 3: General defensive positioning else { // Position to protect goal while staying ready to intercept targetX = Phaser.Math.Clamp( Phaser.Math.Linear(400, this.puck.x, 0.7), goalLeft + margin, goalRight - margin ); targetY = 50; } // Apply erratic behavior based on difficulty // Calculate base erraticness (0.1 at level 99, 4.0 at level 1) let erraticness = (100 - this.difficulty) / 99; // Increase erraticness for lower levels but with less amplification if (this.difficulty < 99) { erraticness = erraticness * 2.0; // Reduced from 3.5 to 2.0 } if (Phaser.Math.Between(1, 100) <= erraticness * 80) { // Reduced frequency // Add smoother oscillation to movement with reduced amplitude const time = this.time.now * 0.003; // Slower oscillation const oscillationX = Math.sin(time) * (80 * erraticness); const oscillationY = Math.cos(time) * (40 * erraticness); targetX += oscillationX; targetY += oscillationY; // Reduce frequency and amplitude of random hesitation if (Phaser.Math.Between(1, 100) <= erraticness * 25) { // Reduced from 50 to 25 const randomOffset = Phaser.Math.Between(-50, 50) * erraticness; targetX += randomOffset; } } // Ensure we stay within bounds after adding erratic behavior targetX = Phaser.Math.Clamp(targetX, startX + margin, startX + tableWidth - margin); targetY = Phaser.Math.Clamp(targetY, margin, Math.min(defenseZone, centerY - margin)); } else { // Return to defensive position based on puck's x position targetX = Phaser.Math.Linear(400, this.puck.x, 0.3); targetY = 50; } // Add slight randomization to make AI less predictable targetX += Phaser.Math.Between(-10, 10); return { x: targetX, y: targetY }; } update() { // Check if puck is in red's field if (this.puck.y < 300 && this.gameActive) { const currentTime = this.time.now; const timeSinceLastTouch = currentTime - this.puckLastTouched; // Handle AI side timer if (!this.puckInAISideTimer) { this.puckInAISideTimer = this.time.addEvent({ delay: 5000, callback: () => { // Force AI to move directly to puck and hit downward this.aiForceMove = true; this.aiForceTarget = { x: this.puck.x, y: this.puck.y }; } }); } // Start or restart timer if more than 500ms since last touch if (timeSinceLastTouch > 500) { // Clear existing timer if there is one if (this.puckInRedFieldTimer) { this.puckInRedFieldTimer.destroy(); } // Start new timer this.puckInRedFieldTimer = this.time.delayedCall(3000, () => { // Force AI to hit the puck if (this.puck.y < 300 && this.gameActive) { // Set a flag to indicate forced movement this.aiForceMove = true; this.aiForceTarget = { x: this.puck.x, y: this.puck.y }; } }); } } else { // If puck leaves red's field, destroy the timers if (this.puckInRedFieldTimer) { this.puckInRedFieldTimer.destroy(); this.puckInRedFieldTimer = null; } if (this.puckInAISideTimer) { this.puckInAISideTimer.destroy(); this.puckInAISideTimer = null; } } // AI Movement if (this.gameActive) { let targetPosition; let moveSpeed; if (this.aiForceMove) { // Calculate distance to puck const distance = Phaser.Math.Distance.Between( this.aiMallet.x, this.aiMallet.y, this.puck.x, this.puck.y ); // If we're close enough to the puck, execute the hit if (distance < 47) { this.aiForceMove = false; // Calculate angle for a downward hit const hitAngle = Math.PI / 2; // 90 degrees (straight down) // Apply the hit with increased velocity this.puck.body.velocity.setToPolar(hitAngle, 600); } else { // Move directly to the puck's position targetPosition = { x: this.puck.x, y: this.puck.y }; moveSpeed = 0.15; // Slower, more visible movement } } else { targetPosition = this.calculateDefensePosition(); moveSpeed = 0.125; // Normal defensive speed } if (targetPosition) { // Calculate new position let newX = Phaser.Math.Linear(this.aiMallet.x, targetPosition.x, moveSpeed); let newY = Phaser.Math.Linear(this.aiMallet.y, targetPosition.y, moveSpeed); // Ensure AI mallet never goes below center line newY = Math.min(newY, 300 - 26); // 300 is center line, 26 is mallet radius // Failsafe: If AI somehow gets below center line, force it back up if (this.aiMallet.y >= 300 - 26) { newY = 250; // Force position to 50 pixels above center line this.aiForceMove = false; // Cancel any forced movement } // Apply the constrained position this.aiMallet.x = newX; this.aiMallet.y = newY; } } // Check if puck is outside table boundaries const margin = 20; // puck radius if (this.puck.x < 150 + margin) { // Left boundary this.puck.x = 150 + margin; this.puck.body.velocity.x = Math.abs(this.puck.body.velocity.x); // Bounce right } else if (this.puck.x > 650 - margin) { // Right boundary this.puck.x = 650 - margin; this.puck.body.velocity.x = -Math.abs(this.puck.body.velocity.x); // Bounce left } if (this.puck.y < 0 + margin) { // Top boundary this.puck.y = 0 + margin; this.puck.body.velocity.y = Math.abs(this.puck.body.velocity.y); // Bounce down } else if (this.puck.y > 600 - margin) { // Bottom boundary this.puck.y = 600 - margin; this.puck.body.velocity.y = -Math.abs(this.puck.body.velocity.y); // Bounce up } } handleMalletHit(puck, mallet) { // Update last touched time and reset timer this.puckLastTouched = this.time.now; // Always destroy the timer on any hit if (this.puckInRedFieldTimer) { this.puckInRedFieldTimer.destroy(); this.puckInRedFieldTimer = null; } // If the puck is still in red's field after the hit, // start a new 3-second timer immediately if (this.puck.y < 300 && this.gameActive) { this.time.delayedCall(3000, () => { if (this.puck.y < 300 && this.gameActive && (this.time.now - this.puckLastTouched) >= 3000) { // Set AI to force move mode directly to puck this.aiForceMove = true; } }); } // Calculate the distance between the mallet and puck centers const distance = Phaser.Math.Distance.Between(mallet.x, mallet.y, puck.x, puck.y); // If the puck is too close to the mallet (clipping), adjust its position const minDistance = 46; // Sum of mallet radius (26) and puck radius (20) if (distance < minDistance) { // Calculate the angle between the mallet and puck const angle = Phaser.Math.Angle.Between(mallet.x, mallet.y, puck.x, puck.y); // Move the puck to the minimum valid distance puck.x = mallet.x + Math.cos(angle) * minDistance; puck.y = mallet.y + Math.sin(angle) * minDistance; } // Calculate the angle for the bounce const angle = Phaser.Math.Angle.Between(mallet.x, mallet.y, puck.x, puck.y); // Calculate the velocity based on the mallet's recent movement const malletVelocity = new Phaser.Math.Vector2( mallet.body.x - mallet.body.prev.x, mallet.body.y - mallet.body.prev.y ); // Base velocity (minimum speed when hit) let hitStrength = 700; // Add additional velocity based on mallet movement hitStrength += malletVelocity.length() * 6; // Apply the velocity to the puck puck.body.velocity.setToPolar(angle, hitStrength); } handleGoal(side) { if (!this.gameActive) return; // Prevent multiple triggers this.gameActive = false; // Ensure cursor remains visible this.cursorGraphic.setVisible(true); // Record who scored - if puck went in top goal, blue scored; if puck went in bottom goal, red scored this.lastScorer = side === 'top' ? 'bottom' : 'top'; // Update scores (only once) if (side === 'top') { this.playerScore++; this.playerScoreText.setText(this.playerScore.toString()); } else { this.aiScore++; this.aiScoreText.setText(this.aiScore.toString()); } // Check for winner if (this.playerScore >= this.pointsToWin || this.aiScore >= this.pointsToWin) { const winner = this.playerScore >= this.pointsToWin ? 'Blue' : 'Red'; // Display winner message this.add.text(400, 300, `${winner} Wins!\nRefresh page to replay.`, { fontSize: '48px', fontFamily: 'Arial', color: '#ffffff', align: 'center' }).setOrigin(0.5); // Remove puck and disable mallets this.puck.setVisible(false); this.puck.body.enable = false; this.playerMallet.setVisible(false); this.playerMallet.body.enable = false; this.aiMallet.setVisible(false); this.aiMallet.body.enable = false; return; // Exit the function to prevent reset } // For readability in console, translate 'top'/'bottom' to 'red'/'blue' const scoringTeam = this.lastScorer === 'top' ? 'red' : 'blue'; console.log(`Goal scored on ${side} side! ${scoringTeam} team scored!`); // Reset currentX and currentY to match the reset position this.currentX = 400; this.currentY = 550; // Make puck invisible and disable its physics this.puck.setVisible(false); this.puck.body.enable = false; // Store initial positions for mallets const initialPlayerY = 550; const initialAiY = 50; const centerX = 400; // Reset and disable mallets this.playerMallet.setPosition(centerX, initialPlayerY); this.aiMallet.setPosition(centerX, initialAiY); this.playerMallet.body.enable = false; this.aiMallet.body.enable = false; // Reset after 2 seconds this.time.delayedCall(2000, () => { // Reset and enable puck let puckY; if (this.isFirstTurn) { puckY = 400; // Just inside blue's field this.isFirstTurn = false; } else { // Place puck in the field of whoever scored last // If blue (bottom) scored (including red own goal), put in red's field (200) // If red (top) scored (including blue own goal), put in blue's field (400) puckY = this.lastScorer === 'top' ? 400 : 200; } this.puck.setPosition(400, puckY); this.puck.setVisible(true); this.puck.body.enable = true; this.puck.body.setVelocity(0, 0); // Re-enable mallets this.playerMallet.body.enable = true; this.aiMallet.body.enable = true; // Re-enable game this.gameActive = true; }); } } const config = { type: Phaser.AUTO, parent: 'renderDiv', physics: { default: 'arcade', arcade: { debug: false, gravity: false } }, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, backgroundColor: '#1a4c83', scene: [MenuScene, GameScene] }; window.phaserGame = new Phaser.Game(config);