// GameScene — Full Tower Defense gameplay with upgrades + freeze tower class GameScene extends Phaser.Scene { constructor() { super({ key: 'GameScene' }); } // Safe sound play helper _playSound(key, config) { try { if (this.cache.audio.has(key)) { this.sound.play(key, config || {}); } } catch(e) {} } create() { this.credits = STARTING_CREDITS; this.lives = STARTING_LIVES; this.score = 0; this.currentWave = 0; this.waveActive = false; this.gameOver = false; this.selectedTowerType = 'laser'; this.towers = []; this.enemies = []; this.projectiles = []; this.spawnTimers = []; this.pendingSpawns = 0; this.totalSpawnedThisWave = 0; this.selectedTower = null; // for upgrade panel this.pathCells = buildPathCells(PATH_WAYPOINTS); this.pathPixels = PATH_WAYPOINTS.map(function(wp) { if (wp[0] >= GRID_COLS) { return { x: GAME_WIDTH + 60, y: wp[1] * CELL_SIZE + CELL_SIZE / 2 }; } return gridToPixel(wp[0], wp[1]); }); this._createBackground(); this._createPath(); this._createBase(); this._createUI(); this._createUpgradePanel(); this._createInputHandlers(); try { if (this.cache.audio.has('music-bg') && !this.sound.get('music-bg')) { this.bgMusic = this.sound.add('music-bg', { volume: 0.22, loop: true }); this.bgMusic.play(); } } catch(e) {} this._showWaveAnnouncement('GET READY!', 'Place towers, then send the first wave!', 0xffe600); } // ───────────────────────────────────────────────────────────────── // BACKGROUND + PATH // ───────────────────────────────────────────────────────────────── _createBackground() { if (this.textures.exists('bg-space')) { var bg = this.add.image(MAP_WIDTH / 2, GAME_HEIGHT / 2, 'bg-space'); bg.setDisplaySize(MAP_WIDTH, GAME_HEIGHT).setDepth(0); } else { var gfx = this.add.graphics().setDepth(0); gfx.fillGradientStyle(0x0a0a2e, 0x0a0a2e, 0x1a0a3e, 0x1a0a3e, 1); gfx.fillRect(0, 0, MAP_WIDTH, GAME_HEIGHT); gfx.fillStyle(0xffffff, 1); for (var i = 0; i < 80; i++) { gfx.fillCircle(Phaser.Math.Between(0, MAP_WIDTH), Phaser.Math.Between(0, GAME_HEIGHT), Math.random() < 0.2 ? 2 : 1); } } } _createPath() { this.mapGraphics = this.add.graphics().setDepth(1); for (var key in this.pathCells) { var parts = key.split('_'); var col = parseInt(parts[0]); var row = parseInt(parts[1]); if (col < GRID_COLS) { this.mapGraphics.fillStyle(0x0a0a2e, 0.75); this.mapGraphics.fillRect(col * CELL_SIZE + 1, row * CELL_SIZE + 1, CELL_SIZE - 2, CELL_SIZE - 2); this.mapGraphics.lineStyle(1, 0x224466, 0.5); this.mapGraphics.strokeRect(col * CELL_SIZE + 1, row * CELL_SIZE + 1, CELL_SIZE - 2, CELL_SIZE - 2); } } this.mapGraphics.lineStyle(2, 0x1144aa, 0.6); for (var i = 0; i < this.pathPixels.length - 1; i++) { var a = this.pathPixels[i], b = this.pathPixels[i + 1]; if (a.x < MAP_WIDTH && b.x < MAP_WIDTH) { this.mapGraphics.beginPath(); this.mapGraphics.moveTo(a.x, a.y); this.mapGraphics.lineTo(b.x, b.y); this.mapGraphics.strokePath(); } } this.gridGraphics = this.add.graphics().setDepth(2); this._drawGrid(); } _drawGrid() { this.gridGraphics.clear(); for (var row = 0; row < GRID_ROWS; row++) { for (var col = 0; col < GRID_COLS; col++) { if (!this.pathCells[col + '_' + row] && !this._hasTower(col, row)) { this.gridGraphics.lineStyle(1, 0x223322, 0.3); this.gridGraphics.strokeRect(col * CELL_SIZE, row * CELL_SIZE, CELL_SIZE, CELL_SIZE); } } } } _createBase() { var lastWp = this.pathPixels[this.pathPixels.length - 2]; this.baseX = MAP_WIDTH - CELL_SIZE / 2; this.baseY = lastWp.y; if (this.textures.exists('base-hq')) { this.add.image(this.baseX, this.baseY, 'base-hq').setDepth(5).setDisplaySize(60, 60); } else { var bg2 = this.add.graphics().setDepth(5); bg2.fillStyle(0x00f5ff, 0.3); bg2.lineStyle(3, 0x00f5ff, 1); bg2.fillCircle(this.baseX, this.baseY, 28); bg2.strokeCircle(this.baseX, this.baseY, 28); } this.add.text(this.baseX, this.baseY - 38, 'BASE HQ', { fontSize: '8px', color: '#00f5ff', fontFamily: 'monospace', fontStyle: 'bold' }).setOrigin(0.5).setDepth(10); } // ───────────────────────────────────────────────────────────────── // UI PANEL // ───────────────────────────────────────────────────────────────── _createUI() { var panelX = MAP_WIDTH; var panel = this.add.graphics().setDepth(50); panel.fillStyle(0x080818, 1); panel.fillRect(panelX, 0, UI_PANEL_WIDTH, GAME_HEIGHT); panel.lineStyle(2, 0x224466, 1); panel.lineBetween(panelX, 0, panelX, GAME_HEIGHT); var px = panelX + UI_PANEL_WIDTH / 2; var cfg = { fontFamily: 'monospace', fontSize: '11px', color: '#8888bb' }; this.add.text(px, 12, 'SPACE DEFENSE', { fontFamily: 'monospace', fontSize: '10px', color: '#00f5ff', fontStyle: 'bold' }).setOrigin(0.5).setDepth(51); this.add.text(px, 32, 'CREDITS', cfg).setOrigin(0.5).setDepth(51); this.creditsText = this.add.text(px, 48, this.credits, { fontFamily: 'monospace', fontSize: '18px', color: '#ffe600', fontStyle: 'bold' }).setOrigin(0.5).setDepth(51); this.add.text(px, 72, 'LIVES', cfg).setOrigin(0.5).setDepth(51); this.livesText = this.add.text(px, 88, this.lives, { fontFamily: 'monospace', fontSize: '18px', color: '#ff3333', fontStyle: 'bold' }).setOrigin(0.5).setDepth(51); this.add.text(px, 112, 'SCORE', cfg).setOrigin(0.5).setDepth(51); this.scoreText = this.add.text(px, 128, this.score, { fontFamily: 'monospace', fontSize: '14px', color: '#39ff14', fontStyle: 'bold' }).setOrigin(0.5).setDepth(51); this.add.text(px, 150, 'WAVE', cfg).setOrigin(0.5).setDepth(51); this.waveText = this.add.text(px, 166, '0 / ' + WAVES.length, { fontFamily: 'monospace', fontSize: '14px', color: '#cc44ff', fontStyle: 'bold' }).setOrigin(0.5).setDepth(51); var div = this.add.graphics().setDepth(51); div.lineStyle(1, 0x224466, 0.5); div.lineBetween(panelX + 10, 185, panelX + UI_PANEL_WIDTH - 10, 185); this.add.text(px, 194, 'SELECT TOWER', { fontFamily: 'monospace', fontSize: '9px', color: '#8888bb', fontStyle: 'bold' }).setOrigin(0.5).setDepth(51); this.add.text(px, 204, '[1][2][3][4]', { fontFamily: 'monospace', fontSize: '8px', color: '#445566' }).setOrigin(0.5).setDepth(51); this.towerBtnGraphics = {}; var towerOrder = ['laser', 'missile', 'tesla', 'freeze']; var self = this; towerOrder.forEach(function(type, i) { var def = TOWER_TYPES[type]; var btnY = 214 + i * 75; var bx = panelX + 8; var bw = UI_PANEL_WIDTH - 16; var bh = 66; var g = self.add.graphics().setDepth(51); self.towerBtnGraphics[type] = { g: g, bx: bx, by: btnY, bw: bw, bh: bh }; self._drawTowerBtnAt(g, bx, btnY, bw, bh, type, type === self.selectedTowerType, false); if (self.textures.exists(def.key)) { self.add.image(bx + 18, btnY + 10, def.key).setDisplaySize(26, 26).setDepth(53); } else { var icon = self.add.graphics().setDepth(53); icon.fillStyle(def.color, 1); icon.fillRect(bx + 4, btnY + 2, 26, 26); } self.add.text(bx + 36, btnY + 2, def.name, { fontFamily: 'monospace', fontSize: '11px', color: '#ffffff', fontStyle: 'bold' }).setDepth(53); self.add.text(bx + 36, btnY + 14, def.description, { fontFamily: 'monospace', fontSize: '7px', color: '#aaaacc' }).setDepth(53); self.add.text(bx + 36, btnY + 25, def.cost + ' cr', { fontFamily: 'monospace', fontSize: '9px', color: '#ffe600' }).setDepth(53); var lvlDef = def.levels[0]; self.add.text(bx + 36, btnY + 37, 'D:' + lvlDef.damage + ' R:' + lvlDef.range, { fontFamily: 'monospace', fontSize: '7px', color: '#667799' }).setDepth(53); self.add.text(bx + 4, btnY + 52, '[' + def.hotkey + ']', { fontFamily: 'monospace', fontSize: '8px', color: '#445566' }).setDepth(53); var zone = self.add.zone(bx + bw / 2, btnY + bh / 2, bw, bh).setInteractive().setDepth(54); zone.on('pointerdown', function() { self.selectedTowerType = type; self._deselectTower(); self._refreshTowerBtns(); }); zone.on('pointerover', function() { if (self.selectedTowerType !== type) self._drawTowerBtnAt(self.towerBtnGraphics[type].g, bx, btnY, bw, bh, type, false, true); }); zone.on('pointerout', function() { self._drawTowerBtnAt(self.towerBtnGraphics[type].g, bx, btnY, bw, bh, type, self.selectedTowerType === type, false); }); }); // Send wave button var wbx = panelX + 8; var wby = GAME_HEIGHT - 80; var wbw = UI_PANEL_WIDTH - 16; var wbh = 40; this.waveBtnGfx = this.add.graphics().setDepth(51); this._drawWaveBtn(); this.waveBtnText = this.add.text(px, GAME_HEIGHT - 60, 'SEND WAVE', { fontFamily: 'monospace', fontSize: '11px', color: '#39ff14', fontStyle: 'bold' }).setOrigin(0.5).setDepth(53); var waveZone = this.add.zone(wbx + wbw / 2, wby + wbh / 2, wbw, wbh).setInteractive().setDepth(54); waveZone.on('pointerdown', () => this._sendNextWave()); waveZone.on('pointerover', () => { if (!this.waveActive && this.currentWave < WAVES.length) { this.waveBtnGfx.clear(); this.waveBtnGfx.fillStyle(0x004400, 1); this.waveBtnGfx.lineStyle(2, 0x39ff14, 1); this.waveBtnGfx.fillRoundedRect(wbx, wby, wbw, wbh, 6); this.waveBtnGfx.strokeRoundedRect(wbx, wby, wbw, wbh, 6); } }); waveZone.on('pointerout', () => this._drawWaveBtn()); this.add.text(px, GAME_HEIGHT - 28, 'Enemies left:', { fontFamily: 'monospace', fontSize: '9px', color: '#8888bb' }).setOrigin(0.5).setDepth(51); this.enemyCountText = this.add.text(px, GAME_HEIGHT - 14, '0', { fontFamily: 'monospace', fontSize: '12px', color: '#ff8800', fontStyle: 'bold' }).setOrigin(0.5).setDepth(51); this.hoverGraphics = this.add.graphics().setDepth(60); } _drawTowerBtnAt(g, bx, by, bw, bh, type, selected, hover) { g.clear(); var col = TOWER_TYPES[type].color; if (selected) { g.fillStyle(0x001830, 1); g.lineStyle(2, col, 1); } else if (hover) { g.fillStyle(0x111122, 1); g.lineStyle(1, col, 0.7); } else { g.fillStyle(0x080818, 1); g.lineStyle(1, 0x334455, 0.6); } g.fillRoundedRect(bx, by, bw, bh, 6); g.strokeRoundedRect(bx, by, bw, bh, 6); } _refreshTowerBtns() { var self = this; ['laser', 'missile', 'tesla', 'freeze'].forEach(function(type) { var info = self.towerBtnGraphics[type]; self._drawTowerBtnAt(info.g, info.bx, info.by, info.bw, info.bh, type, type === self.selectedTowerType, false); }); } _drawWaveBtn() { var wbx = MAP_WIDTH + 8, wby = GAME_HEIGHT - 80, wbw = UI_PANEL_WIDTH - 16, wbh = 40; this.waveBtnGfx.clear(); var active = !this.waveActive && this.currentWave < WAVES.length; this.waveBtnGfx.fillStyle(active ? 0x002200 : 0x111111, 1); this.waveBtnGfx.lineStyle(2, active ? 0x39ff14 : 0x334455, 1); this.waveBtnGfx.fillRoundedRect(wbx, wby, wbw, wbh, 6); this.waveBtnGfx.strokeRoundedRect(wbx, wby, wbw, wbh, 6); if (this.waveBtnText) { if (this.waveActive) { this.waveBtnText.setText('WAVE ACTIVE').setColor('#667799'); } else if (this.currentWave >= WAVES.length) { this.waveBtnText.setText('COMPLETE!').setColor('#ffe600'); } else { this.waveBtnText.setText('SEND WAVE ' + (this.currentWave + 1)).setColor('#39ff14'); } } } // ───────────────────────────────────────────────────────────────── // UPGRADE PANEL (shown when a placed tower is clicked) // ───────────────────────────────────────────────────────────────── _createUpgradePanel() { // Sits over the map at bottom-left, hidden by default this.upgradePanel = this.add.container(0, 0).setDepth(200).setVisible(false); var bg = this.add.graphics(); bg.fillStyle(0x080818, 0.97); bg.lineStyle(2, 0x00f5ff, 1); bg.fillRoundedRect(0, 0, 240, 110, 10); bg.strokeRoundedRect(0, 0, 240, 110, 10); this.upgradePanel.add(bg); this.upgradePanelBg = bg; this.upgradeTitleText = this.add.text(12, 10, '', { fontFamily: 'monospace', fontSize: '13px', color: '#ffffff', fontStyle: 'bold' }).setDepth(201); this.upgradeStatsText = this.add.text(12, 28, '', { fontFamily: 'monospace', fontSize: '9px', color: '#aaaacc' }).setDepth(201); this.upgradeLevelText = this.add.text(12, 55, '', { fontFamily: 'monospace', fontSize: '10px', color: '#cc44ff' }).setDepth(201); this.upgradePanel.add(this.upgradeTitleText); this.upgradePanel.add(this.upgradeStatsText); this.upgradePanel.add(this.upgradeLevelText); // Upgrade button var upgBtnGfx = this.add.graphics(); this.upgradeBtnGfx = upgBtnGfx; this.upgradeBtnText = this.add.text(120, 80, '', { fontFamily: 'monospace', fontSize: '11px', color: '#ffe600', fontStyle: 'bold' }).setDepth(201).setOrigin(0.5); this.upgradePanel.add(upgBtnGfx); this.upgradePanel.add(this.upgradeBtnText); // Upgrade zone (interactive) this.upgradeBtnZone = this.add.zone(120, 80, 160, 26).setDepth(202).setVisible(false); this.upgradeBtnZone.setInteractive(); this.upgradeBtnZone.on('pointerdown', () => this._doUpgrade()); // Sell button var sellBtnGfx = this.add.graphics(); this.sellBtnGfx = sellBtnGfx; this.sellBtnText = this.add.text(0, 80, '', { fontFamily: 'monospace', fontSize: '10px', color: '#ff8888', fontStyle: 'bold' }).setDepth(201).setOrigin(0.5); this.upgradePanel.add(sellBtnGfx); this.upgradePanel.add(this.sellBtnText); this.sellBtnZone = this.add.zone(0, 80, 70, 26).setDepth(202).setVisible(false); this.sellBtnZone.setInteractive(); this.sellBtnZone.on('pointerdown', () => this._doSell()); // Close — click map elsewhere this.upgradeSelectionGfx = this.add.graphics().setDepth(5); } _showUpgradePanel(tower) { this.selectedTower = tower; var def = TOWER_TYPES[tower.type]; var level = tower.level; // 0-indexed current level var maxLevel = def.levels.length - 1; var levelDef = def.levels[level]; var nextDef = level < maxLevel ? def.levels[level + 1] : null; // Position panel near tower but keep in bounds var panelW = 240, panelH = 110; var px = Math.min(tower.x, MAP_WIDTH - panelW - 4); var py = tower.y + 32; if (py + panelH > GAME_HEIGHT) py = tower.y - panelH - 8; if (py < 0) py = 4; this.upgradePanel.setPosition(px, py).setVisible(true); this.upgradeBtnZone.setPosition(px + 155, py + 80).setVisible(true); this.sellBtnZone.setPosition(px + 32, py + 80).setVisible(true); // Recolour border by tower type this.upgradePanelBg.clear(); this.upgradePanelBg.fillStyle(0x080818, 0.97); this.upgradePanelBg.lineStyle(2, def.color, 1); this.upgradePanelBg.fillRoundedRect(0, 0, panelW, panelH, 10); this.upgradePanelBg.strokeRoundedRect(0, 0, panelW, panelH, 10); var lvlStars = ''; for (var s = 0; s <= maxLevel; s++) lvlStars += (s <= level ? '★' : '☆'); this.upgradeTitleText.setText(def.name + ' Tower ' + lvlStars); this.upgradeTitleText.setColor('#' + def.color.toString(16).padStart(6, '0')); var slow = (def.slowFactor !== undefined) ? ' Slow:' + Math.round((1 - levelDef.slowFactor) * 100) + '%' : ''; this.upgradeStatsText.setText( 'DMG: ' + levelDef.damage + ' RNG: ' + levelDef.range + ' RATE: ' + levelDef.fireRate + 'ms' + slow ); // Upgrade / max this.upgradeBtnGfx.clear(); if (nextDef && nextDef.upgradeCost > 0) { var canAfford = this.credits >= nextDef.upgradeCost; this.upgradeLevelText.setText('UPGRADE to Lv.' + (level + 2) + ': +DMG +RNG +SPD'); this.upgradeBtnGfx.fillStyle(canAfford ? 0x003300 : 0x220000, 1); this.upgradeBtnGfx.lineStyle(1, canAfford ? 0x39ff14 : 0xff3333, 1); this.upgradeBtnGfx.fillRoundedRect(75, 68, 160, 24, 6); this.upgradeBtnGfx.strokeRoundedRect(75, 68, 160, 24, 6); this.upgradeBtnText.setText(nextDef.upgradeCost + ' cr UPGRADE').setVisible(true); } else { this.upgradeLevelText.setText('MAX LEVEL'); this.upgradeBtnText.setVisible(false); } // Sell button — refund 50% var sellVal = Math.floor(def.cost * 0.5); for (var lv = 0; lv < level; lv++) { if (def.levels[lv].upgradeCost) sellVal += Math.floor(def.levels[lv].upgradeCost * 0.5); } this.sellBtnGfx.clear(); this.sellBtnGfx.fillStyle(0x220000, 1); this.sellBtnGfx.lineStyle(1, 0xff4444, 1); this.sellBtnGfx.fillRoundedRect(4, 68, 68, 24, 6); this.sellBtnGfx.strokeRoundedRect(4, 68, 68, 24, 6); this.sellBtnText.setPosition(38, 80).setText('SELL ' + sellVal).setVisible(true); // Highlight selected tower this._drawSelectionRing(tower); } _hideUpgradePanel() { this.selectedTower = null; this.upgradePanel.setVisible(false); this.upgradeBtnZone.setVisible(false); this.sellBtnZone.setVisible(false); this.upgradeSelectionGfx.clear(); // Always clear the hover highlight when the panel closes this.hoverGraphics.clear(); } _deselectTower() { this._hideUpgradePanel(); } _drawSelectionRing(tower) { this.upgradeSelectionGfx.clear(); var def = TOWER_TYPES[tower.type]; this.upgradeSelectionGfx.lineStyle(2, def.color, 0.9); this.upgradeSelectionGfx.strokeRect(tower.col * CELL_SIZE + 1, tower.row * CELL_SIZE + 1, CELL_SIZE - 2, CELL_SIZE - 2); // Draw current range this.upgradeSelectionGfx.lineStyle(1, def.color, 0.25); this.upgradeSelectionGfx.strokeCircle(tower.x, tower.y, def.levels[tower.level].range); } _doUpgrade() { var tower = this.selectedTower; if (!tower) return; var def = TOWER_TYPES[tower.type]; var nextLevel = tower.level + 1; if (nextLevel >= def.levels.length) return; var cost = def.levels[nextLevel].upgradeCost; if (this.credits < cost) { this._showFloatingText(tower.x, tower.y - 30, 'NOT ENOUGH!', '#ff3333'); return; } this.credits -= cost; tower.level = nextLevel; // Apply new stats var lvlDef = def.levels[nextLevel]; tower.def = Object.assign({}, TOWER_TYPES[tower.type], lvlDef); // Visual feedback this._showFloatingText(tower.x, tower.y - 20, 'UPGRADED! LV.' + (nextLevel + 1), '#ffe600'); this.tweens.add({ targets: tower.sprite, scaleX: { from: 1.4, to: 1 }, scaleY: { from: 1.4, to: 1 }, duration: 250, ease: 'Back.easeOut' }); // Upgrade star indicator on tower if (tower.levelText) tower.levelText.destroy(); var stars = ''; for (var s = 0; s < nextLevel; s++) stars += '*'; tower.levelText = this.add.text(tower.x, tower.row * CELL_SIZE + 2, stars, { fontFamily: 'monospace', fontSize: '8px', color: '#ffe600' }).setOrigin(0.5, 0).setDepth(10); this._updateHUD(); // Refresh panel this._showUpgradePanel(tower); // Clear any hover highlight that may be under the cursor this.hoverGraphics.clear(); } _doSell() { var tower = this.selectedTower; if (!tower) return; var def = TOWER_TYPES[tower.type]; var sellVal = Math.floor(def.cost * 0.5); for (var lv = 0; lv < tower.level; lv++) { if (def.levels[lv].upgradeCost) sellVal += Math.floor(def.levels[lv].upgradeCost * 0.5); } this.credits += sellVal; this._showFloatingText(tower.x, tower.y - 20, '+' + sellVal + ' SOLD', '#ff8888'); tower.sprite.destroy(); tower.base.destroy(); if (tower.levelText) tower.levelText.destroy(); var idx = this.towers.indexOf(tower); if (idx !== -1) this.towers.splice(idx, 1); this._hideUpgradePanel(); this._drawGrid(); this._updateHUD(); // Clear hover highlight immediately so the empty cell doesn't show ghost this.hoverGraphics.clear(); } // ───────────────────────────────────────────────────────────────── // INPUT HANDLERS // ───────────────────────────────────────────────────────────────── _createInputHandlers() { this.input.on('pointerdown', function(ptr) { // Click on UI panel — ignore if (ptr.x >= MAP_WIDTH) return; var g = pixelToGrid(ptr.x, ptr.y); // Click on an existing tower → show upgrade panel var clickedTower = this._getTowerAt(g.col, g.row); if (clickedTower) { if (this.selectedTower === clickedTower) { this._hideUpgradePanel(); } else { this._showUpgradePanel(clickedTower); } return; } // Click on empty buildable cell → close upgrade panel, place tower this._deselectTower(); this._tryPlaceTower(g.col, g.row); }, this); this.input.on('pointermove', function(ptr) { // Always clear first this.hoverGraphics.clear(); // Don't show hover highlight over the UI panel if (ptr.x >= MAP_WIDTH) return; // ── KEY FIX: suppress hover when upgrade panel is open ── // After upgrading/selling, the cursor stays in place but the panel // closes — without this guard the empty cell immediately gets a // ghost highlight before the user moves the mouse. if (this.selectedTower) return; var g = pixelToGrid(ptr.x, ptr.y); var key = g.col + '_' + g.row; if (!this.pathCells[key] && !this._hasTower(g.col, g.row) && g.col >= 0 && g.col < GRID_COLS && g.row >= 0 && g.row < GRID_ROWS) { var def = TOWER_TYPES[this.selectedTowerType]; var canAfford = this.credits >= def.cost; this.hoverGraphics.fillStyle(canAfford ? def.color : 0xff3333, 0.15); this.hoverGraphics.lineStyle(2, canAfford ? def.color : 0xff3333, 0.6); this.hoverGraphics.fillRect(g.col * CELL_SIZE, g.row * CELL_SIZE, CELL_SIZE, CELL_SIZE); this.hoverGraphics.strokeRect(g.col * CELL_SIZE, g.row * CELL_SIZE, CELL_SIZE, CELL_SIZE); var px2 = g.col * CELL_SIZE + CELL_SIZE / 2; var py2 = g.row * CELL_SIZE + CELL_SIZE / 2; this.hoverGraphics.lineStyle(1, def.color, 0.2); this.hoverGraphics.strokeCircle(px2, py2, def.levels[0].range); } }, this); this.input.keyboard.on('keydown-ONE', () => { this.selectedTowerType = 'laser'; this._deselectTower(); this._refreshTowerBtns(); }); this.input.keyboard.on('keydown-TWO', () => { this.selectedTowerType = 'missile'; this._deselectTower(); this._refreshTowerBtns(); }); this.input.keyboard.on('keydown-THREE', () => { this.selectedTowerType = 'tesla'; this._deselectTower(); this._refreshTowerBtns(); }); this.input.keyboard.on('keydown-FOUR', () => { this.selectedTowerType = 'freeze'; this._deselectTower(); this._refreshTowerBtns(); }); this.input.keyboard.on('keydown-SPACE', () => this._sendNextWave()); this.input.keyboard.on('keydown-ESC', () => this._deselectTower()); } // ───────────────────────────────────────────────────────────────── // TOWER PLACEMENT // ───────────────────────────────────────────────────────────────── _hasTower(col, row) { return this.towers.some(function(t) { return t.col === col && t.row === row; }); } _getTowerAt(col, row) { return this.towers.find(function(t) { return t.col === col && t.row === row; }) || null; } _tryPlaceTower(col, row) { if (col < 0 || col >= GRID_COLS || row < 0 || row >= GRID_ROWS) return; if (this.pathCells[col + '_' + row]) return; if (this._hasTower(col, row)) return; var def = TOWER_TYPES[this.selectedTowerType]; if (this.credits < def.cost) { this._showFloatingText(col * CELL_SIZE + CELL_SIZE / 2, row * CELL_SIZE, 'NO CREDITS!', '#ff3333'); return; } this.credits -= def.cost; this._updateHUD(); this._placeTower(col, row, this.selectedTowerType); this._drawGrid(); } _placeTower(col, row, type) { var def = TOWER_TYPES[type]; var lvlDef = def.levels[0]; var px = col * CELL_SIZE + CELL_SIZE / 2; var py = row * CELL_SIZE + CELL_SIZE / 2; // Colored platform base var base = this.add.graphics().setDepth(4); base.fillStyle(def.color, 0.18); base.lineStyle(2, def.color, 0.7); base.fillRect(col * CELL_SIZE + 2, row * CELL_SIZE + 2, CELL_SIZE - 4, CELL_SIZE - 4); base.strokeRect(col * CELL_SIZE + 2, row * CELL_SIZE + 2, CELL_SIZE - 4, CELL_SIZE - 4); // Tower sprite — always upright, NO rotation applied here var sprite; if (this.textures.exists(def.key)) { sprite = this.add.image(px, py, def.key).setDepth(6).setDisplaySize(38, 38); } else { // Procedural fallback — draw a distinct shape per type var fbGfx = this.add.graphics().setDepth(6); if (type === 'laser') { fbGfx.fillStyle(0x00f5ff, 1); fbGfx.fillRect(px - 6, py - 14, 12, 28); fbGfx.fillStyle(0x00aacc, 1); fbGfx.fillRect(px - 10, py + 6, 20, 8); } else if (type === 'missile') { fbGfx.fillStyle(0xff3333, 1); fbGfx.fillRect(px - 8, py - 12, 16, 24); fbGfx.fillStyle(0xff8800, 1); fbGfx.fillCircle(px, py - 14, 7); } else if (type === 'tesla') { fbGfx.fillStyle(0xcc44ff, 1); fbGfx.fillCircle(px, py, 14); fbGfx.fillStyle(0x8800cc, 1); fbGfx.fillCircle(px, py, 7); } else { fbGfx.fillStyle(0x88ddff, 1); fbGfx.fillRect(px - 8, py - 8, 16, 16); fbGfx.fillStyle(0xaaeeff, 1); fbGfx.fillCircle(px, py - 14, 7); } sprite = { x: px, y: py, scaleX: 1, scaleY: 1, _gfx: fbGfx, setDisplaySize: function() {}, setRotation: function() {}, destroy: function() { fbGfx.destroy(); } }; } // Build the effective tower def merging base def + level stats var effectiveDef = Object.assign({}, def, lvlDef); var tower = { col: col, row: row, type: type, def: effectiveDef, x: px, y: py, lastFired: 0, level: 0, sprite: sprite, base: base, levelText: null }; this.towers.push(tower); if (sprite.setScale) { this.tweens.add({ targets: sprite, scaleX: { from: 0, to: sprite.scaleX }, scaleY: { from: 0, to: sprite.scaleY }, duration: 200, ease: 'Back.easeOut' }); } this._showFloatingText(px, py - 24, '-' + def.cost, '#ffe600'); } // ───────────────────────────────────────────────────────────────── // WAVE SPAWNING // ───────────────────────────────────────────────────────────────── _sendNextWave() { if (this.waveActive || this.currentWave >= WAVES.length || this.gameOver) return; this.currentWave++; this.waveActive = true; this.pendingSpawns = 0; this.totalSpawnedThisWave = 0; var waveData = WAVES[this.currentWave - 1]; var self = this; waveData.forEach(function(g) { self.pendingSpawns += g.count; }); this._drawWaveBtn(); this._showWaveAnnouncement('WAVE ' + this.currentWave, 'ALIEN ATTACK!', 0xff3333); waveData.forEach(function(group) { self.time.delayedCall(group.delay || 0, function() { var t = self.time.addEvent({ delay: group.interval, repeat: group.count - 1, callback: function() { self._spawnEnemy(group.type); self.totalSpawnedThisWave++; } }); self.spawnTimers.push(t); }); }); } _spawnEnemy(type) { var def = ENEMY_TYPES[type]; var startPx = this.pathPixels[0]; var sprite; if (this.textures.exists(def.key)) { sprite = this.add.image(startPx.x, startPx.y, def.key) .setDepth(8).setDisplaySize(def.size, def.size); } else { var eg = this.add.graphics().setDepth(8); var eCol = type === 'boss' ? 0xcc44ff : (type === 'soldier' ? 0xff3333 : 0x39ff14); eg.fillStyle(eCol, 1); eg.fillCircle(startPx.x, startPx.y, def.size / 2); sprite = { x: startPx.x, y: startPx.y, _gfx: eg, setRotation: function() {}, setDisplaySize: function() {}, destroy: function() { eg.destroy(); }, alpha: 1 }; } var hbarBg = this.add.graphics().setDepth(9); var hbar = this.add.graphics().setDepth(10); var enemy = { type: type, def: def, sprite: sprite, hbarBg: hbarBg, hbar: hbar, hp: def.hp, maxHp: def.hp, baseSpeed: def.speed, speed: def.speed, slowUntil: 0, waypointIdx: 1, alive: true, x: startPx.x, y: startPx.y }; this.enemies.push(enemy); this._updateHpBar(enemy); if (sprite.setAlpha) { this.tweens.add({ targets: sprite, alpha: { from: 0, to: 1 }, duration: 300 }); } } _updateHpBar(enemy) { var def = enemy.def; var pct = Math.max(0, enemy.hp / enemy.maxHp); var bx = enemy.x - def.size / 2; var by = enemy.y - def.size / 2 - 8; enemy.hbarBg.clear(); enemy.hbarBg.fillStyle(0x330000, 0.9); enemy.hbarBg.fillRect(bx, by, def.size, 4); enemy.hbar.clear(); var col = pct > 0.5 ? 0x00ff44 : (pct > 0.25 ? 0xffaa00 : 0xff2222); enemy.hbar.fillStyle(col, 1); enemy.hbar.fillRect(bx, by, def.size * pct, 4); } // ───────────────────────────────────────────────────────────────── // TOWER FIRING // ───────────────────────────────────────────────────────────────── _towerShoot(tower, enemy) { tower.lastFired = this.time.now; var def = tower.def; var proj = { x: tower.x, y: tower.y, tx: enemy.x, ty: enemy.y, target: enemy, def: def, active: true, speed: def.projectileSpeed }; this.projectiles.push(proj); var g = this.add.graphics().setDepth(15); g.fillStyle(def.projectileColor, 1); g.fillCircle(0, 0, def.projectileSize); proj.gfx = g; g.x = tower.x; g.y = tower.y; if (tower.type === 'laser') { this._playSound('sfx-laser', { volume: 0.1 }); } } _hitEnemy(proj, enemy) { var def = proj.def; var self = this; if (def.aoe) { var radius = def.aoeRadius || 40; this.enemies.forEach(function(e) { if (e.alive && dist(e.x, e.y, enemy.x, enemy.y) <= radius) { self._damageEnemy(e, def.damage); // Freeze slow effect if (def.slowFactor !== undefined) { e.speed = e.baseSpeed * def.slowFactor; e.slowUntil = self.time.now + (def.slowDuration || 2000); if (e.sprite && e.sprite.setTint) e.sprite.setTint(0x88ddff); } } }); var aoeGfx = this.add.graphics().setDepth(12); aoeGfx.fillStyle(def.projectileColor, 0.3); aoeGfx.fillCircle(enemy.x, enemy.y, radius); this.time.delayedCall(250, function() { aoeGfx.destroy(); }); if (def.slowFactor === undefined) { this._playSound('sfx-explosion', { volume: 0.3 }); } } else { this._damageEnemy(enemy, def.damage); } } _damageEnemy(enemy, dmg) { if (!enemy.alive) return; enemy.hp -= dmg; this._updateHpBar(enemy); if (enemy.hp <= 0) this._killEnemy(enemy); } _killEnemy(enemy) { if (!enemy.alive) return; enemy.alive = false; this.credits += enemy.def.reward; this.score += enemy.def.reward * 10; this._updateHUD(); this._showFloatingText(enemy.x, enemy.y - 10, '+' + enemy.def.reward, '#ffe600'); var expGfx = this.add.graphics().setDepth(20); expGfx.fillStyle(enemy.type === 'boss' ? 0xff8800 : 0xff4400, 1); expGfx.fillCircle(0, 0, 12); expGfx.x = enemy.x; expGfx.y = enemy.y; this.tweens.add({ targets: expGfx, scaleX: 3, scaleY: 3, alpha: 0, duration: 350, onComplete: function() { expGfx.destroy(); } }); enemy.sprite.destroy(); enemy.hbarBg.destroy(); enemy.hbar.destroy(); } _enemyReachBase(enemy) { if (!enemy.alive) return; enemy.alive = false; this.lives -= enemy.def.damage; this._updateHUD(); this.cameras.main.flash(200, 255, 0, 0); this._showFloatingText(this.baseX, this.baseY - 30, '-' + enemy.def.damage + ' LIFE', '#ff3333'); enemy.sprite.destroy(); enemy.hbarBg.destroy(); enemy.hbar.destroy(); if (this.lives <= 0) this._triggerGameOver(); } _triggerGameOver() { if (this.gameOver) return; this.gameOver = true; this.waveActive = false; this.sound.stopAll(); this._playSound('sfx-gameover', { volume: 0.5 }); this.time.delayedCall(1500, () => { this.scene.start('GameOverScene', { score: this.score, wave: this.currentWave }); }); } // ───────────────────────────────────────────────────────────────── // WAVE COMPLETION CHECK // ───────────────────────────────────────────────────────────────── _checkWaveComplete() { var anyAlive = this.enemies.some(function(e) { return e.alive; }); if (anyAlive) return; var anyStillSpawning = this.spawnTimers.some(function(t) { return t && !t.hasDispatched && t.repeatCount > 0; }); if (anyStillSpawning) return; if (this.totalSpawnedThisWave < this.pendingSpawns) return; this.waveActive = false; this.spawnTimers = []; this.enemies = []; this._drawWaveBtn(); if (this.currentWave >= WAVES.length) { this._showWaveAnnouncement('VICTORY!', 'You repelled the invasion!', 0x39ff14); this.time.delayedCall(3000, () => { this.scene.start('GameOverScene', { score: this.score, wave: this.currentWave, victory: true }); }); } else { this._showWaveAnnouncement('WAVE ' + this.currentWave + ' CLEARED!', 'Place more towers!', 0x39ff14); var bonus = 30 + this.currentWave * 10; this.credits += bonus; this._updateHUD(); this._showFloatingText(MAP_WIDTH / 2, GAME_HEIGHT / 2, '+' + bonus + ' WAVE BONUS', '#ffe600'); } } // ───────────────────────────────────────────────────────────────── // HUD + FLOATING TEXT // ───────────────────────────────────────────────────────────────── _updateHUD() { this.creditsText.setText(this.credits); this.livesText.setText(Math.max(0, this.lives)); this.scoreText.setText(this.score); this.waveText.setText(this.currentWave + ' / ' + WAVES.length); var alive = this.enemies.filter(function(e) { return e.alive; }).length; this.enemyCountText.setText(alive); this._drawWaveBtn(); if (this.credits < 75) { this.tweens.killTweensOf(this.creditsText); this.tweens.add({ targets: this.creditsText, alpha: 0.4, duration: 150, yoyo: true }); } if (this.lives <= 5 && this.lives > 0) { this.cameras.main.shake(80, 0.003); } } _showFloatingText(x, y, msg, color) { var t = this.add.text(x, y, msg, { fontFamily: 'monospace', fontSize: '13px', color: color || '#ffffff', fontStyle: 'bold' }).setOrigin(0.5).setDepth(100); this.tweens.add({ targets: t, y: y - 40, alpha: 0, duration: 1000, ease: 'Quad.easeOut', onComplete: function() { t.destroy(); } }); } _showWaveAnnouncement(title, sub, color) { var w = MAP_WIDTH / 2, h = GAME_HEIGHT / 2; var hexColor = '#' + color.toString(16).padStart(6, '0'); var bg2 = this.add.graphics().setDepth(200); bg2.fillStyle(0x000000, 0.65); bg2.fillRoundedRect(w - 210, h - 45, 420, 90, 10); var t1 = this.add.text(w, h - 14, title, { fontFamily: 'monospace', fontSize: '28px', color: hexColor, fontStyle: 'bold' }).setOrigin(0.5).setDepth(201); var t2 = this.add.text(w, h + 18, sub, { fontFamily: 'monospace', fontSize: '14px', color: '#aaaacc' }).setOrigin(0.5).setDepth(201); this.time.delayedCall(2200, function() { bg2.destroy(); t1.destroy(); t2.destroy(); }); } // ───────────────────────────────────────────────────────────────── // MAIN UPDATE LOOP // ───────────────────────────────────────────────────────────────── update(time) { if (this.gameOver) return; // Move enemies for (var i = this.enemies.length - 1; i >= 0; i--) { var enemy = this.enemies[i]; if (!enemy.alive) { this.enemies.splice(i, 1); continue; } // Restore speed after slow expires if (enemy.slowUntil && time > enemy.slowUntil) { enemy.speed = enemy.baseSpeed; enemy.slowUntil = 0; if (enemy.sprite && enemy.sprite.clearTint) enemy.sprite.clearTint(); } this._moveEnemy(enemy); } // Tower targeting & shooting for (var ti = 0; ti < this.towers.length; ti++) { var tower = this.towers[ti]; if (time - tower.lastFired >= tower.def.fireRate) { var target = this._findTarget(tower); if (target) this._towerShoot(tower, target); } } // Move projectiles for (var pi = this.projectiles.length - 1; pi >= 0; pi--) { var proj = this.projectiles[pi]; if (!proj.active) { proj.gfx.destroy(); this.projectiles.splice(pi, 1); continue; } this._moveProjectile(proj); } // Enemy count HUD var aliveCount = this.enemies.filter(function(e) { return e.alive; }).length; this.enemyCountText.setText(aliveCount); // Refresh selection ring if tower selected if (this.selectedTower) this._drawSelectionRing(this.selectedTower); if (this.waveActive) this._checkWaveComplete(); } _moveEnemy(enemy) { if (enemy.waypointIdx >= this.pathPixels.length) { this._enemyReachBase(enemy); return; } var target = this.pathPixels[enemy.waypointIdx]; var dx = target.x - enemy.x; var dy = target.y - enemy.y; var d = Math.sqrt(dx * dx + dy * dy); var step = enemy.speed / 60; if (d <= step) { enemy.x = target.x; enemy.y = target.y; enemy.waypointIdx++; if (enemy.waypointIdx >= this.pathPixels.length) { this._enemyReachBase(enemy); return; } } else { enemy.x += (dx / d) * step; enemy.y += (dy / d) * step; } if (enemy.sprite.x !== undefined) { enemy.sprite.x = enemy.x; enemy.sprite.y = enemy.y; } if (enemy.sprite._gfx) { var eCol2 = enemy.type === 'boss' ? 0xcc44ff : (enemy.type === 'soldier' ? 0xff3333 : 0x39ff14); enemy.sprite._gfx.clear(); enemy.sprite._gfx.fillStyle(eCol2, 1); enemy.sprite._gfx.fillCircle(enemy.x, enemy.y, enemy.def.size / 2); } // Rotate sprite to face direction of travel if (enemy.sprite.setRotation && (dx !== 0 || dy !== 0)) { enemy.sprite.setRotation(Math.atan2(dy, dx) + Math.PI / 2); } this._updateHpBar(enemy); } _findTarget(tower) { var best = null, bestProgress = -1; var range = tower.def.range; for (var i = 0; i < this.enemies.length; i++) { var e = this.enemies[i]; if (!e.alive) continue; if (dist(tower.x, tower.y, e.x, e.y) <= range) { if (e.waypointIdx > bestProgress) { bestProgress = e.waypointIdx; best = e; } } } return best; } _moveProjectile(proj) { var target = proj.target; var tx = (target && target.alive) ? target.x : proj.tx; var ty = (target && target.alive) ? target.y : proj.ty; var dx = tx - proj.x, dy = ty - proj.y; var d = Math.sqrt(dx * dx + dy * dy); var step = proj.speed / 60; if (d <= step || d < 4) { if (target && target.alive) this._hitEnemy(proj, target); proj.active = false; } else { proj.x += (dx / d) * step; proj.y += (dy / d) * step; proj.gfx.x = proj.x; proj.gfx.y = proj.y; } } }

Space Defense

Comments1

Created by

Rate this game