class TitleScreen extends Phaser.Scene { constructor() { super({ key: 'TitleScreen' }); this.selectedDigit = 2; // Default digit count } preload() { this.load.image('water', 'https://play.rosebud.ai/assets/water.png?pClj'); this.load.image('spider', 'https://play.rosebud.ai/assets/water spider.png?vS5C'); this.load.image('frog', 'https://play.rosebud.ai/assets/frog.png?C1CG'); } create() { // Add background with blue tint const bg = this.add.image(400, 300, 'water'); bg.setDisplaySize(800, 600); bg.setTint(0x4040FF); // Lighter blue tint // Create tile graphics for left margin (1,2) const createTile = (x, y, text) => { const padding = 20; const tileSize = 40; // Smaller tile size // Create background rectangle const background = this.add.rectangle(x, y, tileSize, tileSize, 0xd4a76a); // Add text const tileText = this.add.text(x, y, text, { fontSize: '32px', color: '#000000' }); tileText.setOrigin(0.5); }; // Left margin tiles createTile(60, 240, '1'); createTile(80, 290, '2'); // Right margin tiles createTile(740, 240, '+'); createTile(720, 290, '-'); // Add spider graphic to the right of title const spider = this.add.image(600, 35, 'spider'); spider.setScale(0.08); // Slightly smaller scale // Add frogs to bottom corners const leftFrog = this.add.image(100, 565, 'frog'); leftFrog.setScale(0.08); const rightFrog = this.add.image(700, 565, 'frog'); rightFrog.setScale(0.08); // Add title text const title = this.add.text(400, 35, 'Prime Spider', { fontSize: '44px', fill: '#ffffff', align: 'center' }); title.setOrigin(0.5); // Add instructions text const instructions = this.add.text(400, 100, 'W,A,S,D to move.\nI,J,K,L to shoot.\nMake "Amount" equal "Target" to score.', { fontSize: '20px', fill: '#ffff00', align: 'center', lineSpacing: 10 }); instructions.setOrigin(0.5); // Add start button const labelStyle = { fontSize: '24px', fill: '#ffffff' }; // Create input container with centered position const inputContainer = document.createElement('div'); inputContainer.id = 'gameInputs'; inputContainer.style.position = 'absolute'; inputContainer.style.left = '50%'; inputContainer.style.top = '52%'; inputContainer.style.transform = 'translate(-50%, -50%)'; inputContainer.style.width = '300px'; inputContainer.style.pointerEvents = 'auto'; inputContainer.style.zIndex = '10'; inputContainer.style.display = 'flex'; inputContainer.style.flexDirection = 'column'; inputContainer.style.gap = '20px'; inputContainer.style.padding = '20px'; document.getElementById('renderDiv').appendChild(inputContainer); // Helper function to create and position input fields const createInputGroup = (labelText, defaultValue, min, max, rangeText) => { const group = document.createElement('div'); group.style.display = 'flex'; group.style.alignItems = 'center'; group.style.gap = '10px'; group.style.pointerEvents = 'auto'; group.style.zIndex = '11'; group.style.whiteSpace = 'nowrap'; group.style.justifyContent = 'space-between'; group.style.width = '100%'; const label = document.createElement('span'); label.textContent = labelText; label.style.color = 'white'; label.style.fontFamily = 'Arial'; label.style.fontSize = '20px'; const input = document.createElement('input'); input.type = 'number'; input.value = defaultValue; input.min = min; input.max = max; input.style.width = '60px'; input.style.height = '25px'; input.style.textAlign = 'center'; input.style.fontSize = '16px'; input.style.padding = '2px'; input.style.backgroundColor = '#333333'; input.style.color = '#ffffff'; input.style.border = '1px solid #ffffff'; input.style.borderRadius = '3px'; const range = document.createElement('span'); range.textContent = rangeText; range.style.color = 'white'; range.style.fontFamily = 'Arial'; range.style.fontSize = '14px'; group.appendChild(label); group.appendChild(input); group.appendChild(range); inputContainer.appendChild(group); return input; }; // Energy setting // Create hint mode checkbox const hintModeGroup = document.createElement('div'); hintModeGroup.style.display = 'flex'; hintModeGroup.style.alignItems = 'flex-start'; hintModeGroup.style.gap = '10px'; hintModeGroup.style.marginBottom = '15px'; const hintCheckbox = document.createElement('input'); hintCheckbox.type = 'checkbox'; hintCheckbox.checked = true; hintCheckbox.style.marginTop = '6px'; hintCheckbox.style.width = '40px'; hintCheckbox.style.height = '40px'; hintCheckbox.style.cursor = 'pointer'; const hintLabelContainer = document.createElement('div'); hintLabelContainer.style.display = 'flex'; hintLabelContainer.style.flexDirection = 'column'; const hintLabel = document.createElement('span'); hintLabel.textContent = 'Hint Mode'; hintLabel.style.color = 'white'; hintLabel.style.fontFamily = 'Arial'; hintLabel.style.fontSize = '20px'; const hintDescription = document.createElement('span'); hintDescription.textContent = 'In hint mode: If a number gets you to the target, it will flash.'; hintDescription.style.color = '#cccccc'; hintDescription.style.fontFamily = 'Arial'; hintDescription.style.fontSize = '14px'; hintLabelContainer.appendChild(hintLabel); hintLabelContainer.appendChild(hintDescription); hintModeGroup.appendChild(hintCheckbox); hintModeGroup.appendChild(hintLabelContainer); inputContainer.appendChild(hintModeGroup); // Create digit buttons group const digitButtonsGroup = document.createElement('div'); digitButtonsGroup.style.display = 'flex'; digitButtonsGroup.style.alignItems = 'center'; digitButtonsGroup.style.gap = '10px'; digitButtonsGroup.style.marginBottom = '15px'; const digitLabel = document.createElement('span'); digitLabel.textContent = 'Digits:'; digitLabel.style.color = 'white'; digitLabel.style.fontFamily = 'Arial'; digitLabel.style.fontSize = '20px'; const buttonContainer = document.createElement('div'); buttonContainer.style.display = 'flex'; buttonContainer.style.gap = '10px'; const updateButtonStyles = (selectedButton, unselectedButton) => { selectedButton.style.backgroundColor = '#4CAF50'; unselectedButton.style.backgroundColor = '#333333'; }; const createDigitButton = (digit, isSelected = false) => { const button = document.createElement('button'); button.textContent = digit; button.style.width = '40px'; button.style.height = '40px'; button.style.fontSize = '20px'; button.style.cursor = 'pointer'; button.style.border = '2px solid white'; button.style.borderRadius = '5px'; button.style.backgroundColor = isSelected ? '#4CAF50' : '#333333'; button.style.color = 'white'; return button; }; const digit2Button = createDigitButton('2', true); const digit3Button = createDigitButton('3', false); digit2Button.addEventListener('click', () => { this.selectedDigit = 2; updateButtonStyles(digit2Button, digit3Button); }); digit3Button.addEventListener('click', () => { this.selectedDigit = 3; updateButtonStyles(digit3Button, digit2Button); }); buttonContainer.appendChild(digit2Button); buttonContainer.appendChild(digit3Button); digitButtonsGroup.appendChild(digitLabel); digitButtonsGroup.appendChild(buttonContainer); inputContainer.appendChild(digitButtonsGroup); // Create input fields with labels const energyInput = createInputGroup('Energy:', '150', 6, 9999, '(6-9999)'); const timeInput = createInputGroup('Time Limit:', '300', 60, 9999, 'seconds (60-9999)'); const enemyRateInput = createInputGroup('Enemy Rate:', '2', 1, 30, 'per minute (1-30)'); const enemyHealthInput = createInputGroup('Enemy Health:', '3', 1, 99, '(1-99)'); // No need for manual positioning as the container is now always centered this.positionInputs = () => { // Keep empty function for compatibility }; // No need for resize listener as centering is handled by CSS window.addEventListener('resize', this.positionInputs); // Add ResizeObserver for more reliable dimension change detection this.resizeObserver = new ResizeObserver(() => { this.positionInputs(); }); this.resizeObserver.observe(document.querySelector('canvas')); // Store cleanup function // Store input container reference for cleanup this.inputContainer = inputContainer; // Input validation [energyInput, timeInput, enemyRateInput, enemyHealthInput].forEach(input => { // Prevent non-numeric input input.addEventListener('keypress', (e) => { if (!/[0-9]/.test(e.key)) { e.preventDefault(); } }); // Handle paste events input.addEventListener('paste', (e) => { const pastedText = e.clipboardData.getData('text'); if (!/^\d*$/.test(pastedText)) { e.preventDefault(); } }); // Validate on blur input.addEventListener('blur', (e) => { const min = parseInt(e.target.min); const max = parseInt(e.target.max); const defaultVal = parseInt(e.target.defaultValue); // If empty, use default value if (!e.target.value.trim()) { e.target.value = defaultVal; return; } let value = parseInt(e.target.value); // Enforce min/max limits if (value < min) { value = min; } else if (value > max) { value = max; } e.target.value = value; }); }); const startButton = this.add.text(400, this.cameras.main.height * 0.92, 'Start Game', { fontSize: '32px', fill: '#ffffff', backgroundColor: '#444444', padding: { x: 20, y: 10 } }); startButton.setOrigin(0.5); startButton.setInteractive({ useHandCursor: true }); // Start game when button is clicked startButton.on('pointerdown', () => { const hintModeEnabled = hintCheckbox.checked; // Create game settings object with all parameters, handling blank, minimum, and maximum values const gameSettings = { hintMode: hintModeEnabled, energy: !energyInput.value.trim() ? 150 : Math.min(9999, Math.max(6, parseInt(energyInput.value))), timeLimit: !timeInput.value.trim() ? 300 : Math.min(9999, Math.max(60, parseInt(timeInput.value))), enemyRate: !enemyRateInput.value.trim() ? 2 : Math.min(30, Math.max(1, parseInt(enemyRateInput.value))), enemyHealth: !enemyHealthInput.value.trim() ? 3 : Math.min(99, Math.max(1, parseInt(enemyHealthInput.value))), digitCount: this.selectedDigit }; // Remove all HTML elements before starting the game scene if (this.inputContainer) { const inputs = this.inputContainer.querySelectorAll('input'); inputs.forEach(input => { input.remove(); }); this.inputContainer.remove(); } // Remove window resize listener window.removeEventListener('resize', this.positionInputs); // Remove resize observer if it exists if (this.resizeObserver) { this.resizeObserver.disconnect(); } // Stop and remove the current scene this.scene.stop('TitleScreen'); // Start the game scene with the settings this.scene.start('GameScene', gameSettings); }); // Hover effect startButton.on('pointerover', () => { startButton.setStyle({ fill: '#ff0' }); }); startButton.on('pointerout', () => { startButton.setStyle({ fill: '#ffffff' }); }); } destroy() { if (this.inputContainer) { // Remove all event listeners const inputs = this.inputContainer.querySelectorAll('input'); inputs.forEach(input => { input.remove(); }); // Remove the container itself this.inputContainer.remove(); // Remove resize observer if it exists if (this.resizeObserver) { this.resizeObserver.disconnect(); } // Remove window resize listener window.removeEventListener('resize', this.positionInputs); } super.destroy(); } } class SpaceShooter extends Phaser.Scene { constructor() { super({ key: 'GameScene' }); this.gameOver = false; this.hintMode = true; // Default value this.tintTimer = null; this.gameTimer = 300; // 5 minutes in seconds this.maxEnergy = 150; // Default energy value this.enemyMaxHealth = 3; // Default enemy health this.timerText = null; this.lastTimerUpdate = 0; this.frog = null; this.frogDirectionTimer = null; this.energyText = null; this.energyLabelText = null; this.lastPrimeUsed = null; // Track the last prime number used this.scoreText = null; this.scoreValue = 0; // Track player's score this.scoreLabelText = null; this.targetLabelText = null; this.targetText = null; this.ship = null; this.bullets = null; this.boxWidth = null; this.boxHeight = null; this.lastHitWasNumber = false; // Track if last hit symbol was a number this.lastFired = 0; this.currentValue = '#'; this.lastNumber = null; this.lastOperator = null; this.isNegativeNext = false; this.resultText = null; this.mathSymbols = null; this.lastSymbolTime = 0; // Track previous state of shooting keys this.previousShootStates = { up: false, down: false, left: false, right: false }; this.symbolSpawnRate = 657; this.symbols = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '+', '-', '-', '×', '×', '÷', '÷']; this.symbolCounter = 0; // Counter to track spawns } preload() { // Load all game assets this.load.image('ship', 'https://play.rosebud.ai/assets/water spider.png?vS5C'); this.load.image('background', 'https://play.rosebud.ai/assets/water.png?pClj'); // Set depth constants this.DEPTH_BACKGROUND = 0; this.DEPTH_SYMBOLS = 10; this.DEPTH_SHIP = 20; this.DEPTH_FROG = 30; this.load.image('bullet', 'https://play.rosebud.ai/assets/bullet.png?0cRE'); this.load.image('frog', 'https://play.rosebud.ai/assets/frog.png?C1CG'); } async create(data) { // Set hint mode and other parameters from data if (data) { this.hintMode = data.hintMode; // Store other parameters for later use this.initialTimeLimit = data.timeLimit || 300; // Store initial time limit this.gameTimer = this.initialTimeLimit; this.maxEnergy = data.energy || 250; this.enemyMaxHealth = data.enemyHealth || 3; this.digitCount = data.digitCount || 2; this.enemyRate = data.enemyRate || 2; // Store enemy rate this.symbolSpawnRate = 500; // Fixed symbol spawn rate this.lastSymbolTime = 0; // Initialize lastSymbolTime } // Create timer text at the top of the screen this.timerText = this.add.text(400, 30, '5:00', { fontSize: '64px', fill: '#ffffff' }); this.timerText.setOrigin(0.5); this.timerText.setAlpha(0.5); // Immediately set up keyboard inputs before any awaits this.cursors = this.input.keyboard.createCursorKeys(); this.wasd = { up: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W), down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S), left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A), right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D) }; this.shootKeys = { up: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.I), down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.K), left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.J), right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.L) }; // Create array of two-digit prime numbers const digit2Primes = [19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]; const digit3Primes = [101, 103, 107, 109, 113, 127, 131, 137, 139, 149, 151, 157, 163, 167, 173, 179, 181, 191, 193, 197, 199, 211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 281, 283, 293, 307, 311, 313, 317, 331, 337, 347, 349, 353, 359, 367, 373, 379, 383, 389, 397, 401, 409, 419, 421, 431, 433, 439, 443, 449, 457, 461, 463, 467, 479, 487, 491, 499, 503, 509, 521, 523, 541, 547, 557, 563, 569, 571, 577, 587, 593, 599, 601, 607, 613, 617, 619, 631, 641, 643, 647, 653, 659, 661, 673, 677, 683, 691, 701, 709, 719, 727, 733, 739, 743, 751, 757, 761, 769, 773, 787, 797, 809, 811, 821, 823, 827, 829, 839, 853, 857, 859, 863, 877, 881, 883, 887, 907, 911, 919, 929, 937, 941, 947, 953, 967, 971, 977, 983, 991, 997 ]; const selectedPrimes = (this.digitCount === 3) ? digit3Primes : digit2Primes; const randomPrime = Phaser.Math.RND.pick(selectedPrimes); // Add background const bg = this.add.image(400, 300, 'background'); bg.setDepth(-1); bg.setDisplaySize(800, 600); // Calculate the size of the box based on ship dimensions const boxScale = 96 / 834; // Using original ship height of 834px this.boxWidth = 834 * boxScale; // Original ship width this.boxHeight = 96; // Original box height this.reducedBoxHeight = this.boxHeight * 0.62; // Reduced height for bottom boxes // Create black box in top-left corner const blackBox = this.add.rectangle( this.boxWidth / 2, // x position (centered on width) this.boxHeight / 2, // y position (centered on height) this.boxWidth, this.boxHeight, 0x000000 // black color ).setAlpha(0.5); // Add result text to black box // Add "Total" label at top of box this.add.text(this.boxWidth / 2, 10, 'Amount', { fontSize: '24px', fill: '#ffffff', align: 'center' }).setOrigin(0.5, 0); this.resultText = this.add.text(this.boxWidth / 2, this.boxHeight / 2 + 10, '#', { fontSize: '48px', fill: '#ffffff', align: 'center' }); this.resultText.setOrigin(0.5, 0.5); // Create black box in top-right corner for target const targetBox = this.add.rectangle( 800 - this.boxWidth / 2, // x position (from right) this.boxHeight / 2, // y position (from top) this.boxWidth, this.boxHeight, 0x000000 // black color ).setAlpha(0.5); // Add "Target" label at top of box this.targetLabelText = this.add.text( 800 - this.boxWidth / 2, 10, 'Target', { fontSize: '24px', fill: '#ffffff', align: 'center' } ); this.targetLabelText.setOrigin(0.5, 0); // Add target number this.targetText = this.add.text( 800 - this.boxWidth / 2, this.boxHeight / 2 + 10, randomPrime.toString(), { fontSize: '48px', fill: '#ffffff', align: 'center' } ); this.targetText.setOrigin(0.5, 0.5); // Create black box in bottom-right corner const scoreBox = this.add.rectangle( 800 - this.boxWidth / 2, // x position (from right) 600 - this.reducedBoxHeight / 2, // y position (from bottom) this.boxWidth, this.reducedBoxHeight, 0x000000 // black color ).setAlpha(0.5); // Add "Score" label at top of box this.scoreLabelText = this.add.text( 800 - this.boxWidth / 2, 600 - this.reducedBoxHeight + 10, 'Score', { fontSize: '15px', // Reduced by 38% fill: '#FFD700', align: 'center' } ); this.scoreLabelText.setOrigin(0.5, 0); // Add score text this.scoreText = this.add.text( 800 - this.boxWidth / 2, 600 - this.reducedBoxHeight / 2 + 10, '0', { fontSize: '20px', // Reduced by 38% fill: '#FFD700', align: 'center' } ); this.scoreText.setOrigin(0.5, 0.5); // Create black box in bottom-left corner for energy const energyBox = this.add.rectangle( this.boxWidth / 2, // x position (from left) 600 - this.reducedBoxHeight / 2, // y position (from bottom) this.boxWidth, this.reducedBoxHeight, 0x000000 // black color ).setAlpha(0.5); // Add "Energy" label at top of box this.energyLabelText = this.add.text( this.boxWidth / 2, 600 - this.reducedBoxHeight + 10, 'Energy', { fontSize: '15px', // Reduced by 38% fill: '#ffffff', align: 'center' } ); this.energyLabelText.setOrigin(0.5, 0); // Add energy value text this.energyText = this.add.text( this.boxWidth / 2, 600 - this.reducedBoxHeight / 2 + 10, this.maxEnergy.toString(), { fontSize: '20px', // Reduced by 38% fill: '#ffffff', align: 'center' } ); this.energyText.setOrigin(0.5, 0.5); // Function to resize text to fit box this.resizeText = (text, boxWidth, boxHeight) => { let fontSize = 48; text.setFontSize(fontSize); while ((text.width > boxWidth - 20 || text.height > boxHeight - 20) && fontSize > 12) { fontSize -= 2; text.setFontSize(fontSize); } }; // Create math symbols group this.mathSymbols = this.add.group(); // Create ship sprite this.ship = this.add.sprite(400, 300, 'ship'); this.ship.setDepth(this.DEPTH_SHIP); // Create frog group with physics this.frogs = this.physics.add.group(); // Setup bullet-frog collision group this.bullets = this.add.group({ classType: Phaser.GameObjects.Sprite, maxSize: 30, runChildUpdate: true }); this.frogs = this.physics.add.group(); // Setup bullet-frog collision handling with additional check this.physics.add.overlap( this.bullets, this.frogs, (bullet, frog) => { if (bullet && bullet.active && frog && frog.active) { this.bulletHitFrog(bullet, frog); } }, null, this ); // Scale ship to reasonable size (approximately 96px height) const shipScale = 96 / this.ship.height; this.ship.setScale(shipScale); // Enable physics on ship this.physics.add.existing(this.ship); this.ship.body.setCollideWorldBounds(true); this.ship.body.setDrag(300); // Create bullet group this.bullets = this.add.group({ classType: Phaser.GameObjects.Sprite, maxSize: 30, runChildUpdate: true }); // Set up frog spawn timer based on enemy rate (converted from per minute to milliseconds) const enemyRate = data.enemyRate || 2; // Default to 2 per minute if not specified const spawnDelay = (60 / enemyRate) * 1000; // Convert to milliseconds this.frogSpawnTimer = this.time.addEvent({ delay: spawnDelay, callback: this.spawnFrog, callbackScope: this, loop: true }); } spawnFrog() { // Get the corner farthest from the ship const edgePoints = [{ x: 400, y: 0 }, // Top middle { x: 800, y: 300 }, // Right middle { x: 400, y: 600 }, // Bottom middle { x: 0, y: 300 } // Left middle ]; // Calculate distances to each corner const distances = edgePoints.map(point => { return { point, distance: Phaser.Math.Distance.Between(this.ship.x, this.ship.y, point.x, point.y) }; }); // Find the maximum distance const maxDistance = Math.max(...distances.map(d => d.distance)); // Get all corners that are at the maximum distance const farthestPoints = distances.filter(d => d.distance === maxDistance).map(d => d.point); // Choose randomly from the farthest edge points const spawnPoint = Phaser.Math.RND.pick(farthestPoints); // Create new frog const frog = this.frogs.create(spawnPoint.x, spawnPoint.y, 'frog'); frog.setDepth(this.DEPTH_FROG); // Scale frog to match ship size const frogScale = 96 / frog.height; // Same height as ship frog.setScale(frogScale); // Enable physics this.physics.add.existing(frog); frog.body.setCollideWorldBounds(true); frog.body.setBounce(1, 1); // Start frog movement this.setNewFrogDirection(frog); } setNewFrogDirection(frog) { if (!frog || !frog.active) return; // Random angle in radians const angle = Phaser.Math.DegToRad(Phaser.Math.Between(0, 360)); const speed = 75; // Set velocity based on angle and speed frog.body.setVelocity( Math.cos(angle) * speed, Math.sin(angle) * speed ); // Set bounce to make frog ricochet off walls frog.body.setBounce(1, 1); // Set new timer for next direction change (2-5 seconds) this.time.addEvent({ delay: Phaser.Math.Between(2000, 5000), callback: () => this.setNewFrogDirection(frog), callbackScope: this }); } bulletHitFrog(bullet, frog) { // Enhanced safety checks if (!bullet?.active || !frog?.active || !this.frogs.contains(frog)) return; // Clear any existing tint timers before proceeding if (frog.tintTimer) { frog.tintTimer.remove(); frog.tintTimer = null; } // Initialize hit counter if it doesn't exist if (frog.getData('hitCount') === undefined) { frog.setData('hitCount', 0); frog.setData('maxHealth', this.enemyMaxHealth); } // Increment hit counter const hits = frog.getData('hitCount') + 1; frog.setData('hitCount', hits); // Apply red tint frog.setTint(0xff0000); // Clear any existing tint timer if (frog.tintTimer) { frog.tintTimer.remove(); } // Set new tint timer (180ms = 0.18 seconds) frog.tintTimer = this.time.delayedCall(180, () => { if (frog && frog.active) { frog.clearTint(); } }, [], this); // Destroy frog if hits reach max health if (hits >= frog.getData('maxHealth')) { if (frog.tintTimer) { frog.tintTimer.remove(); } frog.destroy(); } // Destroy the bullet bullet.destroy(); } bulletHitSymbol(bullet, symbol) { // Only process shootable symbols if (symbol.getData('shootable')) { const isNumber = symbol.getData('isNumber'); const symbolText = symbol.list[1].text; // Get the text from the symbol if (symbolText === 'RE\nSET') { this.currentValue = '#'; this.lastNumber = null; this.lastOperator = null; this.isNegativeNext = false; this.lastHitWasNumber = false; // Reset all symbols to their initial state this.mathSymbols.getChildren().forEach(sym => { const symText = sym.list[1].text; const symIsNumber = sym.getData('isNumber'); // Get bounds to check if symbol is fully visible const bounds = sym.getBounds(); const isFullyVisible = ( bounds.left >= 0 && bounds.right <= 800 && bounds.top >= 0 && bounds.bottom <= 600 ); if (symText === 'RE\nSET') { // RESET symbols start non-shootable and faded sym.alpha = 0.5; sym.setData('shootable', false); } else if (!isFullyVisible) { // Non-visible symbols are always non-shootable and faded sym.alpha = 0.5; sym.setData('shootable', false); } else if (symIsNumber) { // Visible numbers start shootable sym.alpha = 1; sym.setData('shootable', true); } else { // Visible operators start non-shootable sym.alpha = 0.5; sym.setData('shootable', false); } }); } else if (['+', '-', '×', '÷'].includes(symbolText)) { if (symbolText === '-' && (this.lastNumber === null || this.lastOperator !== null)) { this.isNegativeNext = true; } else { this.lastOperator = symbolText; this.isNegativeNext = false; } // If division operator is selected, make zeros non-shootable regardless of other conditions if (symbolText === '÷') { this.mathSymbols.getChildren().forEach(sym => { const symText = sym.list[1].text; if (symText === '0') { sym.alpha = 0.5; sym.setData('shootable', false); } }); } } else { const number = parseInt(symbolText); if (this.lastNumber === null) { this.lastNumber = this.isNegativeNext ? -number : number; this.isNegativeNext = false; } else { if (this.lastOperator === null) { this.lastNumber = parseInt('' + this.lastNumber + number); } else { switch (this.lastOperator) { case '+': this.currentValue = this.lastNumber + number; break; case '-': this.currentValue = this.lastNumber - number; break; case '×': this.currentValue = this.lastNumber * number; break; case '÷': this.currentValue = number === 0 ? 0 : Math.round(this.lastNumber / number); break; } this.lastNumber = this.currentValue; this.lastOperator = null; // After operation is complete, restore zeros to normal behavior this.mathSymbols.getChildren().forEach(sym => { const symText = sym.list[1].text; if (symText === '0') { const shouldBeShootable = this.lastHitWasNumber ? false : true; sym.alpha = shouldBeShootable ? 1 : 0.5; sym.setData('shootable', shouldBeShootable); } }); } } } // Update display const displayValue = this.lastNumber !== null ? this.lastNumber : this.currentValue; const displayText = typeof displayValue === 'number' ? displayValue.toString() : displayValue; this.resultText.setText(displayText); // Resize text to fit box this.resizeText(this.resultText, this.boxWidth, this.boxHeight); bullet.destroy(); symbol.destroy(); // Don't update shootable status if we just hit RESET if (symbolText !== 'RE\nSET') { // Update all symbols' shootable status based on what was just hit this.lastHitWasNumber = isNumber; this.mathSymbols.getChildren().forEach(sym => { const symText = sym.list[1].text; if (symText === 'RE\nSET') { // Don't change RESET symbol states here return; } // Special handling for '0' when division is active if (symText === '0' && this.lastOperator === '÷') { sym.setData('shootable', false); sym.alpha = 0.5; return; } const symIsNumber = sym.getData('isNumber'); const shouldBeShootable = this.lastHitWasNumber ? !symIsNumber : symIsNumber; sym.setData('shootable', shouldBeShootable && sym.alpha === 1); sym.alpha = sym.getData('shootable') ? 1 : 0.5; }); } } // If symbol is not shootable, let bullet continue } createMathSymbol() { const edge = Phaser.Math.Between(0, 3); // 0: top, 1: right, 2: bottom, 3: left let x, y; // Determine spawn position switch (edge) { case 0: // top x = Phaser.Math.Between(-50, 850); y = -50; break; case 1: // right x = 850; y = Phaser.Math.Between(-50, 650); break; case 2: // bottom x = Phaser.Math.Between(-50, 850); y = 650; break; case 3: // left x = -50; y = Phaser.Math.Between(-50, 650); break; } // Create the symbol text let randomSymbol; this.symbolCounter++; // Get bounds to check if symbol would spawn fully visible const wouldBeFullyVisible = ( x >= 0 && x <= 800 && y >= 0 && y <= 600 ); // 1/12 chance for RESET if (Phaser.Math.Between(1, 12) === 1) { randomSymbol = 'RE\nSET'; } else if (this.symbolCounter % 2 === 0) { // About half the spawns will be an operator (except when RESET is chosen) const operators = ['+', '-', '×', '÷']; randomSymbol = operators[Phaser.Math.Between(0, operators.length - 1)]; } else { // Other spawns will be numbers randomSymbol = String(Phaser.Math.Between(0, 9)); } // Create container for background and text const symbol = this.add.container(x, y); // Add flash effect if it's a valid number and hint mode is enabled if (!isNaN(randomSymbol)) { symbol.setData('flashOn', false); symbol.setData('isFlashing', false); const flashTimer = this.time.addEvent({ delay: 300, callback: () => { if (symbol && symbol.active) { const isValid = this.isNumberValidForTarget(parseInt(randomSymbol)); const isShootable = symbol.getData('shootable'); if (isValid && isShootable && this.hintMode) { if (!symbol.getData('isFlashing')) { symbol.setData('isFlashing', true); } const currentFlashState = symbol.getData('flashOn'); background.setFillStyle(currentFlashState ? 0xffff00 : 0xd4a76a); symbol.setData('flashOn', !currentFlashState); } else { if (symbol.getData('isFlashing')) { symbol.setData('isFlashing', false); background.setFillStyle(0xd4a76a); } } } }, loop: true }); symbol.setData('flashTimer', flashTimer); } // Create text const text = this.add.text(0, 0, randomSymbol, { fontSize: randomSymbol.includes('RE') ? '18px' : '37px', // Reduced by 23% fill: '#000000', align: 'center', lineSpacing: 0 }); // Calculate standard size based on a single character const singleCharText = this.add.text(0, 0, randomSymbol.includes('RE') ? 'RE\nSET' : '0', { fontSize: randomSymbol.includes('RE') ? '18px' : '37px', // Reduced by 23% fill: '#000000', align: 'center', lineSpacing: 0 }); const standardWidth = singleCharText.width; const standardHeight = singleCharText.height; singleCharText.destroy(); // Add background with standard size const padding = 4; const background = this.add.rectangle( standardWidth / 2, standardHeight / 2, standardWidth + padding * 2, standardHeight + padding * 2, 0xd4a76a ); // Center the text in the background text.setPosition( (standardWidth - text.width) / 2, (standardHeight - text.height) / 2 ); symbol.add(background); symbol.add(text); symbol.setDepth(this.DEPTH_SYMBOLS); // Add physics to the symbol this.physics.world.enable(symbol); symbol.body.setSize(text.width + 8, text.height + 8); // Set initial alpha to semi-transparent and unshootable symbol.alpha = 0.5; // Add custom property to track shootable state const isNumber = !isNaN(randomSymbol) || randomSymbol === 'RE\nSET'; symbol.setData('isNumber', isNumber); symbol.setData('shootable', false); // Calculate velocity based on spawn position to ensure symbol moves toward screen const speed = Phaser.Math.Between(31, 63); // Reduced by additional 18% let angle; switch (edge) { case 0: // top - angle between 45 and 135 degrees (downward) angle = Phaser.Math.Between(45, 135); break; case 1: // right - angle between 135 and 225 degrees (leftward) angle = Phaser.Math.Between(135, 225); break; case 2: // bottom - angle between 225 and 315 degrees (upward) angle = Phaser.Math.Between(225, 315); break; case 3: // left - angle between -45 and 45 degrees (rightward) angle = Phaser.Math.Between(-45, 45); break; } const velocity = this.physics.velocityFromAngle(angle, speed); symbol.body.setVelocity(velocity.x, velocity.y); // Add to group for easier management this.mathSymbols.add(symbol); } isNumberValidForTarget(number) { // Don't flash during symbol-shooting phase if (!this.lastHitWasNumber && !this.lastOperator) return false; let potentialResult; // If we have an operator selected, check if this number would complete the operation if (this.lastOperator) { switch (this.lastOperator) { case '+': potentialResult = this.lastNumber + number; break; case '-': potentialResult = this.lastNumber - number; break; case '×': potentialResult = this.lastNumber * number; break; case '÷': potentialResult = number === 0 ? 0 : Math.round(this.lastNumber / number); break; default: return false; } return potentialResult.toString() === this.targetText.text; } // If we're just starting a number if (this.lastNumber === null) { // Check single digit potentialResult = this.isNegativeNext ? -number : number; return potentialResult.toString() === this.targetText.text; } // We no longer check for multi-digit combinations return false; return false; } update(time) { if (!this.shootKeys) return; // Update timer every second if (!this.gameOver && time > this.lastTimerUpdate + 1000) { if (this.gameTimer > 0) { this.gameTimer--; this.lastTimerUpdate = time; // Format time as M:SS const minutes = Math.floor(this.gameTimer / 60); const seconds = this.gameTimer % 60; this.timerText.setText(`${minutes}:${seconds.toString().padStart(2, '0')}`); // Check if time has run out if (this.gameTimer === 0) { this.endRound('time'); } } } // Check for energy depletion if (!this.gameOver && parseInt(this.energyText.text) === 0) { this.endRound('energy'); } if (this.gameOver) return; // Skip rest of update if game is over // Check if current value matches target if (typeof this.currentValue === 'number' && this.currentValue.toString() === this.targetText.text) { // Increment score this.scoreValue += 10; this.scoreText.setText(this.scoreValue.toString()); // Reset current value and related variables this.currentValue = '#'; this.lastNumber = null; this.lastOperator = null; this.isNegativeNext = false; this.lastHitWasNumber = false; // Update display this.resultText.setText(this.currentValue); this.resizeText(this.resultText, this.boxWidth, this.boxHeight); // Pick new target prime (avoiding the last one used) const digit2Primes = [19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]; const digit3Primes = [101, 103, 107, 109, 113, 127, 131, 137, 139, 149, 151, 157, 163, 167, 173, 179, 181, 191, 193, 197, 199, 211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 281, 283, 293, 307, 311, 313, 317, 331, 337, 347, 349, 353, 359, 367, 373, 379, 383, 389, 397, 401, 409, 419, 421, 431, 433, 439, 443, 449, 457, 461, 463, 467, 479, 487, 491, 499, 503, 509, 521, 523, 541, 547, 557, 563, 569, 571, 577, 587, 593, 599, 601, 607, 613, 617, 619, 631, 641, 643, 647, 653, 659, 661, 673, 677, 683, 691, 701, 709, 719, 727, 733, 739, 743, 751, 757, 761, 769, 773, 787, 797, 809, 811, 821, 823, 827, 829, 839, 853, 857, 859, 863, 877, 881, 883, 887, 907, 911, 919, 929, 937, 941, 947, 953, 967, 971, 977, 983, 991, 997 ]; let randomPrime; // Use the stored digitCount to select appropriate primes const selectedPrimes = (this.digitCount === 3) ? digit3Primes : digit2Primes; do { randomPrime = Phaser.Math.RND.pick(selectedPrimes); } while (randomPrime === this.lastPrimeUsed); this.lastPrimeUsed = randomPrime; this.targetText.setText(randomPrime.toString()); // Reset all symbols to their initial state this.mathSymbols.getChildren().forEach(sym => { const symText = sym.list[1].text; const symIsNumber = sym.getData('isNumber'); const bounds = sym.getBounds(); const isFullyVisible = ( bounds.left >= 0 && bounds.right <= 800 && bounds.top >= 0 && bounds.bottom <= 600 ); if (!isFullyVisible) { sym.alpha = 0.5; sym.setData('shootable', false); } else if (symIsNumber) { sym.alpha = 1; sym.setData('shootable', true); } else { sym.alpha = 0.5; sym.setData('shootable', false); } }); } // Ship movement with WASD const moveSpeed = 200; let dx = 0; let dy = 0; if (this.wasd.left.isDown) dx -= 1; if (this.wasd.right.isDown) dx += 1; if (this.wasd.up.isDown) dy -= 1; if (this.wasd.down.isDown) dy += 1; // Normalize diagonal movement if (dx !== 0 && dy !== 0) { const factor = 1 / Math.sqrt(2); dx *= factor; dy *= factor; } this.ship.body.setVelocity(dx * moveSpeed, dy * moveSpeed); // Shooting with IJKL if (this.time.now > this.lastFired) { const bulletSpeed = 400; let velX = 0; let velY = 0; let shouldShoot = false; // Check for new key presses (not held down) if (this.shootKeys.up.isDown && !this.previousShootStates.up) { velY = -bulletSpeed; shouldShoot = true; } else if (this.shootKeys.left.isDown && !this.previousShootStates.left) { velX = -bulletSpeed; shouldShoot = true; } else if (this.shootKeys.down.isDown && !this.previousShootStates.down) { velY = bulletSpeed; shouldShoot = true; } else if (this.shootKeys.right.isDown && !this.previousShootStates.right) { velX = bulletSpeed; shouldShoot = true; } // Update previous states this.previousShootStates.up = this.shootKeys.up.isDown; this.previousShootStates.down = this.shootKeys.down.isDown; this.previousShootStates.left = this.shootKeys.left.isDown; this.previousShootStates.right = this.shootKeys.right.isDown; if (shouldShoot) { // Get current energy let currentEnergy = parseInt(this.energyText.text || this.maxEnergy); // Only allow shooting if energy is greater than 0 if (currentEnergy > 0) { // Decrease energy by 1 currentEnergy = Math.max(0, currentEnergy - 1); this.energyText.setText(currentEnergy.toString()); const bullet = this.add.sprite(this.ship.x, this.ship.y, 'bullet'); this.bullets.add(bullet); if (bullet) { bullet.setActive(true); bullet.setVisible(true); // Set size to 15x15 bullet and make it purple bullet.setScale(15 / bullet.width); bullet.setTint(0x800080); // Store velocity for manual movement bullet.velX = velX; bullet.velY = velY; // Set up update function for this bullet bullet.update = function(time, delta) { this.x += this.velX * (delta / 1000); this.y += this.velY * (delta / 1000); // Destroy bullet if it's completely off screen if (this.x < -50 || this.x > 850 || this.y < -50 || this.y > 650) { this.destroy(); } } // No fixed lifetime - will be destroyed when off screen this.lastFired = this.time.now + 250; // Fire rate limit } } } } // Check for frog collision with ship and decrease energy const frogs = this.frogs.getChildren(); let isCollidingWithFrog = false; for (const frog of frogs) { if (!frog || !frog.active) continue; if (Phaser.Geom.Rectangle.Overlaps(frog.getBounds(), this.ship.getBounds())) { isCollidingWithFrog = true; // Get current energy and decrease by 1 let currentEnergy = parseInt(this.energyText.text); currentEnergy = Math.max(0, currentEnergy - 1); this.energyText.setText(currentEnergy.toString()); // Apply red tint while touching frog this.ship.setTint(0xff0000); break; // Exit loop once collision is found } } // Clear tint if not colliding with any frogs if (!isCollidingWithFrog) { this.ship.clearTint(); } // Update math symbols if (!this.gameOver && time > this.lastSymbolTime + this.symbolSpawnRate) { this.createMathSymbol(); this.lastSymbolTime = time; } // Update symbols visibility and clean up off-screen symbols this.mathSymbols.getChildren().forEach(symbol => { // Check for frog collision first if (!symbol || !symbol.active || !symbol.body || !symbol.getBounds) return; const frogs = this.frogs.getChildren().filter(frog => frog && frog.active && frog.body && this.frogs.contains(frog) ); for (const frog of frogs) { if (this.physics.world.overlap(frog, symbol)) { // Stop flashing effect if it exists const flashTimer = symbol.getData('flashTimer'); if (flashTimer) { flashTimer.destroy(); } symbol.destroy(); return; // Exit the forEach loop for this symbol } } // Check for ship collision if (Phaser.Geom.Rectangle.Overlaps(this.ship.getBounds(), symbol.getBounds())) { symbol.alpha = 0.5; symbol.setData('shootable', false); if (symbol.getData('isFlashing')) { symbol.list[0].setFillStyle(0xd4a76a); // Reset background color temporarily } } else { // Only update visibility if not touching ship const bounds = symbol.getBounds(); const isFullyVisible = bounds ? ( bounds.left >= 0 && bounds.right <= 800 && bounds.top >= 0 && bounds.bottom <= 600 ) : false; const symText = symbol.list[1].text; const symIsNumber = symbol.getData('isNumber'); const shouldBeShootable = this.lastHitWasNumber ? !symIsNumber : symIsNumber; // All symbols including RESET follow the same visibility rules if (!isFullyVisible) { symbol.alpha = 0.5; symbol.setData('shootable', false); } else { // Special handling for '0' when division is the last operator if (symText === '0' && this.lastOperator === '÷') { symbol.alpha = 0.5; symbol.setData('shootable', false); } else if (symText === 'RE\nSET') { // RESET is always shootable when fully visible symbol.alpha = 1.0; symbol.setData('shootable', true); } else if (shouldBeShootable) { symbol.alpha = 1.0; symbol.setData('shootable', true); } else { symbol.alpha = 0.5; symbol.setData('shootable', false); } } } // Check for bullet collisions with frogs this.bullets.getChildren().forEach(bullet => { if (!bullet || !bullet.active) return; const frogs = this.frogs.getChildren(); for (const frog of frogs) { if (frog && frog.active && Phaser.Geom.Rectangle.Overlaps(bullet.getBounds(), frog.getBounds())) { this.bulletHitFrog(bullet, frog); break; } } // Collect all symbols that overlap with this bullet const overlappingSymbols = this.mathSymbols.getChildren().filter(s => Phaser.Geom.Rectangle.Overlaps(bullet.getBounds(), s.getBounds()) ); // If there are any overlapping symbols, randomly select one if (overlappingSymbols.length > 0) { const randomSymbol = Phaser.Math.RND.pick(overlappingSymbols); this.bulletHitSymbol(bullet, randomSymbol); } }); // Check if symbol is completely inside the screen // Destroy if completely off screen if (symbol.x < -50 || symbol.x > 850 || symbol.y < -50 || symbol.y > 650) { const flashTimer = symbol.getData('flashTimer'); if (flashTimer) { flashTimer.destroy(); } symbol.destroy(); } }); } endRound(reason) { this.gameOver = true; // Stop the frog spawn timer if (this.frogSpawnTimer) { this.frogSpawnTimer.destroy(); } // Clear all existing game objects const symbols = this.mathSymbols.getChildren(); while (symbols.length > 0) { const symbol = symbols[0]; const flashTimer = symbol.getData('flashTimer'); if (flashTimer) flashTimer.destroy(); symbol.destroy(); } this.mathSymbols.clear(true, true); // Clear all frogs const frogs = this.frogs.getChildren(); while (frogs.length > 0) { const frog = frogs[0]; if (frog.tintTimer) { frog.tintTimer.remove(); } frog.destroy(); } this.frogs.clear(true, true); // Clear all bullets this.bullets.getChildren().forEach(bullet => { bullet.destroy(); }); // Destroy the ship this.ship.destroy(); // Create semi-transparent black background const overlay = this.add.rectangle(400, 300, 750, 400, 0x000000, 0.8); // Display end game message const messageText = reason === 'time' ? 'Time\'s up!' : 'Out of energy!'; this.add.text(400, 200, messageText, { fontSize: '32px', fill: '#ffffff' }).setOrigin(0.5); // Display final score this.add.text(400, 250, `Final Score: ${this.scoreValue}`, { fontSize: '28px', fill: '#ffff00' }).setOrigin(0.5); // Display settings const settingsText = [ `\nOn these settings:`, `Hint Mode: ${this.hintMode ? 'On' : 'Off'}`, `Digits: ${this.digitCount}`, `Energy: ${this.maxEnergy}`, `Time Limit: ${this.initialTimeLimit} seconds`, `Enemy Rate: ${this.enemyRate} per minute`, `Enemy Health: ${this.enemyMaxHealth}` ].join('\n'); this.add.text(400, 350, settingsText, { fontSize: '20px', fill: '#ffffff', align: 'center' }).setOrigin(0.5); // Add refresh instruction this.add.text(400, 450, 'Thanks for playing! To play again, please refresh the page.', { fontSize: '20px', fill: '#ffff00', align: 'center' }).setOrigin(0.5); } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.AUTO, parent: container, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { debug: false } }, backgroundColor: '#000000', scene: [TitleScreen, SpaceShooter] }; window.phaserGame = new Phaser.Game(config);