// GameScene — full pirate cannon gameplay // ───────────────────────────────────────────────────────────────────────────── // CANNONBALL PHYSICS: // World gravity = 0 (set in config.js). // We apply gravity manually each frame: vy += GRAVITY * dt // This keeps the aim-guide preview perfectly in sync with actual ball flight. // ───────────────────────────────────────────────────────────────────────────── var GRAVITY = 280; // px/s² — tweak here, guide & balls stay in sync class GameScene extends Phaser.Scene { constructor() { super({ key: 'GameScene' }); } // ─── INIT ────────────────────────────────────────────────────────────────── init() { this.score = 0; this.wave = 1; this.lives = 3; this.canShoot = true; this.aimAngle = -35; // degrees; negative = upward this.power = 0; this.chargingPower = false; this.windSpeed = Phaser.Math.Between(-40, 40); this.windFrozen = false; this.activePowerup = null; this.puTimer = 0; this.enemiesAlive = 0; this.waveComplete = false; this.gameOver = false; this.shotsFired = 0; this.shotsHit = 0; // Manual ball tracking (since we apply physics ourselves) this.ballData = []; // [{img, vx, vy, explosive, piercing}] this.eBallData = []; // [{img, vx, vy}] } // ─── SHUTDOWN ────────────────────────────────────────────────────────────── shutdown() { if (this.enemyFireTimer) this.enemyFireTimer.remove(false); if (this.powerupDropTimer) this.powerupDropTimer.remove(false); this.input.off('pointermove', this.onPointerMove, this); this.input.off('pointerdown', this.onPointerDown, this); this.input.off('pointerup', this.onPointerUp, this); } // ─── CREATE ──────────────────────────────────────────────────────────────── create() { var W = GAME_WIDTH, H = GAME_HEIGHT; // ── Background ── this.add.image(W / 2, 140, 'sky').setDisplaySize(W, 280).setDepth(0); this.add.image(W / 2, 450, 'ocean').setDisplaySize(W, 340).setDepth(0); // Moon this.add.image(680, 70, 'moon').setDepth(1); // Twinkling stars this.starsGfx = this.add.graphics().setDepth(1); this.starData = []; for (var i = 0; i < 50; i++) { this.starData.push({ x: Phaser.Math.Between(0, W), y: Phaser.Math.Between(5, 220), r: Math.random() * 0.7 + 0.2, blink: Math.random() * Math.PI * 2, }); } // Animated wave lines this.waveTime = 0; this.waveGfx = this.add.graphics().setDepth(2); // Horizon cloud wisps this.cloudGfx = this.add.graphics().setDepth(1); this.cloudTime = 0; // ── Player Island & Cannon ── this.add.image(90, 500, 'island').setDepth(3).setScale(0.9); this.playerShip = this.add.image(78, 458, 'player-ship').setScale(0.60).setDepth(4); this.cannonPivot = { x: 104, y: 446 }; this.cannonBarrel = this.add.image( this.cannonPivot.x + 19, this.cannonPivot.y, 'cannon-barrel' ).setOrigin(0, 0.5).setDepth(5); // Cannon base var baseGfx = this.add.graphics().setDepth(5); baseGfx.fillStyle(0x444444, 1); baseGfx.fillCircle(this.cannonPivot.x, this.cannonPivot.y, 11); baseGfx.fillStyle(COLORS.woodDark, 1); baseGfx.fillRect(this.cannonPivot.x - 13, this.cannonPivot.y + 7, 26, 11); // Trajectory aim dots this.aimDots = []; for (var d = 0; d < 18; d++) { var dot = this.add.image(0, 0, 'dot').setAlpha(0).setDepth(6); this.aimDots.push(dot); } // ── HUD ── this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '18px', color: '#ffe600', fontFamily: 'monospace', }).setDepth(20); this.livesText = this.add.text(16, 40, '❤ ❤ ❤', { fontSize: '14px', color: '#ff3333', fontFamily: 'monospace', }).setDepth(20); this.waveText = this.add.text(W / 2, 16, 'WAVE 1', { fontSize: '16px', color: '#00f5ff', fontFamily: 'monospace', }).setOrigin(0.5, 0).setDepth(20); this.powerBar = this.add.graphics().setDepth(20); this.add.text(16, H - 44, 'POWER', { fontSize: '11px', color: '#aaccff', fontFamily: 'monospace', }).setDepth(20); this.angleText = this.add.text(16, H - 64, 'Angle: 35°', { fontSize: '12px', color: '#aaccff', fontFamily: 'monospace', }).setDepth(20); this.windText = this.add.text(W - 16, 16, '', { fontSize: '12px', color: '#88ccff', fontFamily: 'monospace', }).setOrigin(1, 0).setDepth(20); this.puText = this.add.text(W / 2, H - 30, '', { fontSize: '13px', color: '#00ffcc', fontFamily: 'monospace', }).setOrigin(0.5).setDepth(20); this.statusText = this.add.text(W / 2, H / 2 - 40, '', { fontSize: '22px', color: '#ffe600', fontFamily: 'monospace', }).setOrigin(0.5).setDepth(25).setAlpha(0); // Aim hint this.aimHint = this.add.text(W / 2, H - 12, 'DRAG to aim • SPACE to charge & fire • W/S to adjust angle', { fontSize: '10px', color: '#556677', fontFamily: 'monospace', }).setOrigin(0.5).setDepth(20); // ── Physics Groups (enemies & powerups still use Phaser physics for overlap) ── this.enemies = this.physics.add.group(); this.powerups = this.physics.add.group(); // ── Input ── this.cursors = this.input.keyboard.createCursorKeys(); this.wasd = this.input.keyboard.addKeys({ up: Phaser.Input.Keyboard.KeyCodes.W, down: Phaser.Input.Keyboard.KeyCodes.S, }); this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); this.input.on('pointermove', this.onPointerMove, this); this.input.on('pointerdown', this.onPointerDown, this); this.input.on('pointerup', this.onPointerUp, this); this.dragging = false; // ── Timers ── this.enemyFireTimer = this.time.addEvent({ delay: 2800, callback: this.enemyFire, callbackScope: this, loop: true, }); this.powerupDropTimer = this.time.addEvent({ delay: 8000, callback: this.dropPowerup, callbackScope: this, loop: true, }); // ── Start first wave ── this.spawnWave(); } // ─── WAVE SPAWNING ───────────────────────────────────────────────────────── spawnWave() { this.waveComplete = false; this.enemiesAlive = 0; var count = Math.min(1 + Math.floor(this.wave / 2), 4); var tier = Math.min(Math.floor((this.wave - 1) / 3) + 1, 3); var tierKey = 'enemy-ship-' + tier; var spacing = (GAME_WIDTH - 400) / Math.max(count, 1); for (var i = 0; i < count; i++) { var ex = 500 + i * (spacing + 20); var ey = Phaser.Math.Between(350, 430); var hp = tier === 1 ? 1 : (tier === 2 ? 2 : 3); var eShip = this.physics.add.image(ex, ey, tierKey).setDepth(7); eShip.setData('hp', hp); eShip.setData('maxHp', hp); eShip.setData('tier', tier); eShip.setData('frozen', false); eShip.setImmovable(true); eShip.body.allowGravity = false; this.tweens.add({ targets: eShip, y: ey + Phaser.Math.Between(6, 14), duration: Phaser.Math.Between(1200, 2000), yoyo: true, repeat: -1, ease: 'Sine.easeInOut', }); this.enemies.add(eShip); this.enemiesAlive++; this.buildHealthBar(eShip); } this.waveText.setText('WAVE ' + this.wave); this.showStatus('WAVE ' + this.wave + ' — FIRE!', '#00f5ff', 1800); this.updateWindUI(); } buildHealthBar(ship) { var bg = this.add.graphics().setDepth(11); var fg = this.add.graphics().setDepth(12); ship.setData('hbBg', bg); ship.setData('hbFg', fg); this.redrawHealthBar(ship); } redrawHealthBar(ship) { var bg = ship.getData('hbBg'); var fg = ship.getData('hbFg'); if (!bg || !fg) return; var hp = ship.getData('hp'); var maxHp = ship.getData('maxHp'); var bw = 64, bh = 7; var bx = ship.x - bw / 2; var by = ship.y - 62; bg.clear(); bg.fillStyle(0x220000, 0.85); bg.fillRoundedRect(bx, by, bw, bh, 3); fg.clear(); var frac = hp / maxHp; var col = frac > 0.5 ? 0x00ff44 : (frac > 0.25 ? 0xffaa00 : 0xff2222); fg.fillStyle(col, 1); fg.fillRoundedRect(bx, by, bw * frac, bh, 3); } // ─── SHOOTING ────────────────────────────────────────────────────────────── // All cannonball flight is manual: position updated in update() using // x += vx * dt // vy += GRAVITY * dt ← this is what creates the arc // y += vy * dt // Wind applies a small continuous acceleration on vx only. fireCannon(angleDeg, pwr) { if (this.gameOver) return; var angleRad = Phaser.Math.DegToRad(angleDeg); var speed = 230 + pwr * 5.5; var ox = this.cannonPivot.x + Math.cos(angleRad) * 38; var oy = this.cannonPivot.y + Math.sin(angleRad) * 38; var angles = [angleDeg]; if (this.activePowerup === POWERUP_TYPES.TRIPLE) { angles = [angleDeg - 8, angleDeg, angleDeg + 8]; } angles.forEach(function(a) { var ar = Phaser.Math.DegToRad(a); var img = this.add.image(ox, oy, 'cannonball').setDepth(9).setScale(0.85); var vx = Math.cos(ar) * speed + (this.windFrozen ? 0 : this.windSpeed * 0.4); var vy = Math.sin(ar) * speed; // negative when angle is negative (upward) this.ballData.push({ img: img, vx: vx, vy: vy, explosive: this.activePowerup === POWERUP_TYPES.EXPLODE, piercing: this.activePowerup === POWERUP_TYPES.PIERCING, }); }, this); this.shotsFired++; this.spawnSmoke(ox, oy); this.cameras.main.shake(80, 0.006); var cd = this.activePowerup === POWERUP_TYPES.RAPID ? 350 : 900; this.canShoot = false; this.time.delayedCall(cd, function() { this.canShoot = true; }, [], this); } // ─── SMOKE / EFFECTS ─────────────────────────────────────────────────────── spawnSmoke(x, y) { for (var i = 0; i < 6; i++) { var s = this.add.image(x, y, 'smoke').setDepth(10).setAlpha(0.75).setScale(0.8); this.tweens.add({ targets: s, x: x + Phaser.Math.Between(-22, 22), y: y - Phaser.Math.Between(12, 36), alpha: 0, scale: 2.2, duration: 550, delay: i * 50, onComplete: function(tw, objs) { objs[0].destroy(); }, }); } } spawnExplosion(x, y, big) { var ex = this.add.image(x, y, 'explosion').setDepth(13).setScale(big ? 0.4 : 0.25); this.tweens.add({ targets: ex, scale: big ? 2.8 : 1.8, alpha: 0, duration: 480, ease: 'Power2', onComplete: function(tw, objs) { objs[0].destroy(); }, }); // Sparks for (var i = 0; i < (big ? 12 : 6); i++) { var spark = this.add.graphics().setDepth(14); spark.fillStyle(Phaser.Math.RND.pick([0xffcc00, 0xff6600, 0xffffff]), 1); spark.fillCircle(0, 0, Phaser.Math.Between(2, 4)); spark.x = x; spark.y = y; var sa = Math.random() * Math.PI * 2; var sr = Phaser.Math.Between(30, big ? 100 : 60); this.tweens.add({ targets: spark, x: x + Math.cos(sa) * sr, y: y + Math.sin(sa) * sr, alpha: 0, duration: Phaser.Math.Between(300, 600), onComplete: function(tw, objs) { objs[0].destroy(); }, }); } this.cameras.main.shake(big ? 140 : 80, big ? 0.015 : 0.008); } spawnSplash(x, y) { for (var i = 0; i < 8; i++) { var s = this.add.image(x + Phaser.Math.Between(-10, 10), y, 'splash') .setDepth(10).setAlpha(0.9).setScale(0.6); this.tweens.add({ targets: s, x: s.x + Phaser.Math.Between(-35, 35), y: s.y - Phaser.Math.Between(15, 50), alpha: 0, scale: 1.8, duration: Phaser.Math.Between(400, 750), onComplete: function(tw, objs) { objs[0].destroy(); }, }); } } // ─── BALL ↔ ENEMY COLLISION CHECK (manual, since balls are plain images) ── checkBallEnemyCollisions() { var enemies = this.enemies.getChildren(); for (var bi = this.ballData.length - 1; bi >= 0; bi--) { var bd = this.ballData[bi]; if (!bd.img || !bd.img.active) { this.ballData.splice(bi, 1); continue; } for (var ei = enemies.length - 1; ei >= 0; ei--) { var enemy = enemies[ei]; if (!enemy || !enemy.active) continue; var dist = Phaser.Math.Distance.Between(bd.img.x, bd.img.y, enemy.x, enemy.y); if (dist < 50) { this.onBallHitEnemy(bd, enemy, bi); break; } } } } onBallHitEnemy(bd, enemy, ballIdx) { var isPiercing = bd.piercing; var isExplode = bd.explosive; this.spawnExplosion(bd.img.x, bd.img.y, isExplode); if (!isPiercing) { bd.img.destroy(); this.ballData.splice(ballIdx, 1); } var dmg = isExplode ? 2 : 1; var hp = enemy.getData('hp') - dmg; enemy.setData('hp', hp); this.redrawHealthBar(enemy); this.tweens.add({ targets: enemy, alpha: 0.3, duration: 80, yoyo: true, repeat: 2 }); this.shotsHit++; if (hp <= 0) { this.destroyEnemy(enemy); } else { this.tweens.add({ targets: enemy, x: enemy.x + 12, duration: 60, yoyo: true }); } } destroyEnemy(enemy) { var pts = 100 * enemy.getData('tier') * this.wave; this.score += pts; this.scoreText.setText('Score: ' + this.score); this.showFloatingText(enemy.x, enemy.y, '+' + pts, '#ffe600'); this.spawnExplosion(enemy.x, enemy.y, true); this.spawnExplosion(enemy.x + 20, enemy.y - 10, false); var bg = enemy.getData('hbBg'); var fg = enemy.getData('hbFg'); if (bg) bg.destroy(); if (fg) fg.destroy(); this.enemiesAlive--; enemy.destroy(); if (this.enemiesAlive <= 0) this.onWaveCleared(); } // ─── ENEMY BALL ↔ PLAYER CHECK ───────────────────────────────────────────── checkEnemyBallPlayerCollision() { for (var bi = this.eBallData.length - 1; bi >= 0; bi--) { var bd = this.eBallData[bi]; if (!bd.img || !bd.img.active) { this.eBallData.splice(bi, 1); continue; } var dist = Phaser.Math.Distance.Between(bd.img.x, bd.img.y, this.cannonPivot.x, this.cannonPivot.y); if (dist < 52) { bd.img.destroy(); this.eBallData.splice(bi, 1); this.loseLife(); } } } loseLife() { if (this.gameOver) return; this.lives--; this.cameras.main.shake(200, 0.02); this.cameras.main.flash(300, 255, 60, 60); this.updateLivesUI(); if (this.lives <= 0) { this.triggerGameOver(); } else { this.showStatus('SHIP HIT! ❤ x' + this.lives, '#ff3333', 1200); } } // ─── ENEMY AI ────────────────────────────────────────────────────────────── enemyFire() { if (this.gameOver) return; var ships = this.enemies.getChildren(); if (ships.length === 0) return; var shooter = ships[Phaser.Math.Between(0, ships.length - 1)]; if (!shooter.active || shooter.getData('frozen')) return; var tx = this.cannonPivot.x + Phaser.Math.Between(-30, 30); var ty = this.cannonPivot.y + Phaser.Math.Between(-20, 20); var dx = tx - shooter.x; var dy = ty - shooter.y; var spd = 160 + this.wave * 12; var len = Math.sqrt(dx * dx + dy * dy) || 1; var img = this.add.image(shooter.x - 16, shooter.y + 5, 'cannonball') .setDepth(9).setScale(0.85).setTint(0xff6666); this.eBallData.push({ img: img, vx: (dx / len) * spd, vy: (dy / len) * spd, }); } // ─── POWER-UPS ───────────────────────────────────────────────────────────── dropPowerup() { if (this.gameOver) return; var types = Object.values(POWERUP_TYPES); var t = types[Phaser.Math.Between(0, types.length - 1)]; var pu = this.physics.add.image( Phaser.Math.Between(160, 380), Phaser.Math.Between(360, 450), 'pu-' + t ).setDepth(8); pu.body.allowGravity = false; pu.setData('puType', t); this.tweens.add({ targets: pu, y: pu.y - 12, duration: 900, yoyo: true, repeat: -1, ease: 'Sine.easeInOut', }); this.powerups.add(pu); this.time.delayedCall(10000, function() { if (pu && pu.active) pu.destroy(); }); } collectPowerup(type) { var duration = type === POWERUP_TYPES.RAPID ? 8000 : 6000; this.activePowerup = type; this.puTimer = this.time.now + duration; var labels = { triple: '3x SHOT — TRIPLE BARREL!', explode: '💥 EXPLOSIVE ROUNDS!', freeze: '❄ WIND FROZEN!', rapid: '⚡ RAPID FIRE!', piercing: '◈ PIERCING SHOT!', }; this.puText.setText(labels[type] || type.toUpperCase()); if (type === POWERUP_TYPES.FREEZE) { this.windFrozen = true; this.windSpeed = 0; this.updateWindUI(); } this.cameras.main.flash(200, 100, 255, 200); this.showStatus(labels[type] || '', '#00ffcc', 1400); } clearPowerup() { if (this.activePowerup === POWERUP_TYPES.FREEZE) { this.windFrozen = false; this.windSpeed = Phaser.Math.Between(-40, 40); this.updateWindUI(); } this.activePowerup = null; this.puText.setText(''); } // ─── WAVE CLEAR ──────────────────────────────────────────────────────────── onWaveCleared() { if (this.waveComplete) return; this.waveComplete = true; var acc = this.shotsFired > 0 ? Math.round((this.shotsHit / this.shotsFired) * 100) : 0; var accBonus = acc >= 80 ? 500 * this.wave : (acc >= 50 ? 200 * this.wave : 0); if (accBonus > 0) { this.score += accBonus; this.scoreText.setText('Score: ' + this.score); this.showFloatingText(GAME_WIDTH / 2, 200, 'ACCURACY BONUS +' + accBonus + '!', '#00ffcc'); } this.shotsFired = 0; this.shotsHit = 0; this.windSpeed = Phaser.Math.Between(-60, 60); this.updateWindUI(); this.showStatus('WAVE CLEAR! ⚓', '#39ff14', 2000); this.time.delayedCall(2200, function() { this.wave++; this.spawnWave(); }, [], this); } // ─── GAME OVER ───────────────────────────────────────────────────────────── triggerGameOver() { this.gameOver = true; if (this.enemyFireTimer) this.enemyFireTimer.remove(false); if (this.powerupDropTimer) this.powerupDropTimer.remove(false); // Destroy all manual balls this.ballData.forEach(function(bd) { if (bd.img) bd.img.destroy(); }); this.ballData = []; this.eBallData.forEach(function(bd) { if (bd.img) bd.img.destroy(); }); this.eBallData = []; try { var hs = parseInt(localStorage.getItem('cannon_royale_hs') || '0', 10); if (this.score > hs) localStorage.setItem('cannon_royale_hs', this.score); } catch (e) {} this.showStatus('SHIP SUNK! ☠', '#ff2d7b', 1500); this.time.delayedCall(1500, function() { this.scene.start('GameOverScene', { score: this.score, wave: this.wave }); }, [], this); } // ─── INPUT ───────────────────────────────────────────────────────────────── onPointerDown(ptr) { if (this.gameOver) return; // Tap a power-up to collect it var pus = this.powerups.getChildren(); for (var i = pus.length - 1; i >= 0; i--) { var pu = pus[i]; if (!pu.active) continue; if (Phaser.Math.Distance.Between(ptr.x, ptr.y, pu.x, pu.y) < 32) { this.collectPowerup(pu.getData('puType')); pu.destroy(); return; } } this.dragging = true; this.updateAimFromPointer(ptr); } onPointerMove(ptr) { if (!this.dragging || this.gameOver) return; this.updateAimFromPointer(ptr); } onPointerUp(ptr) { if (this.dragging && !this.gameOver && this.canShoot) { this.fireCannon(this.aimAngle, this.power); } this.dragging = false; this.chargingPower = false; this.power = 0; } updateAimFromPointer(ptr) { var dx = ptr.x - this.cannonPivot.x; var dy = ptr.y - this.cannonPivot.y; if (dx < 10) return; var deg = Phaser.Math.RadToDeg(Math.atan2(dy, dx)); this.aimAngle = Phaser.Math.Clamp(deg, -65, 5); } // ─── UI ──────────────────────────────────────────────────────────────────── updateWindUI() { var dir = this.windSpeed >= 0 ? '→' : '←'; var spd = Math.abs(this.windSpeed); var note = this.windFrozen ? '❄ FROZEN' : (spd > 30 ? '⚠ STRONG' : 'light'); this.windText.setText('WIND ' + dir + ' ' + Math.round(spd) + ' ' + note); } updateLivesUI() { var h = ''; for (var i = 0; i < 3; i++) h += (i < this.lives ? '❤ ' : '🖤 '); this.livesText.setText(h.trim()); } drawPowerBar() { this.powerBar.clear(); var bx = 16, by = GAME_HEIGHT - 30, bw = 130, bh = 12; this.powerBar.fillStyle(0x111133, 0.85); this.powerBar.fillRoundedRect(bx, by, bw, bh, 4); var frac = this.power / 100; if (frac > 0) { var col = frac < 0.4 ? 0x00ff88 : (frac < 0.75 ? 0xffcc00 : 0xff3333); this.powerBar.fillStyle(col, 1); this.powerBar.fillRoundedRect(bx, by, bw * frac, bh, 4); } this.powerBar.lineStyle(1, 0x6688aa, 0.6); this.powerBar.strokeRoundedRect(bx, by, bw, bh, 4); } // Aim-guide preview — uses the SAME gravity constant as the update loop. drawAimGuide() { var cx = this.cannonPivot.x; var cy = this.cannonPivot.y; var ar = Phaser.Math.DegToRad(this.aimAngle); var speed = 230 + this.power * 5.5; var vx = Math.cos(ar) * speed + (this.windFrozen ? 0 : this.windSpeed * 0.4); var vy = Math.sin(ar) * speed; // negative = upward var dt = 0.07; // seconds per step var pvx = vx; var pvy = vy; var px = cx; var py = cy; for (var i = 0; i < this.aimDots.length; i++) { // Simulate one step exactly as update() does pvy += GRAVITY * dt; px += pvx * dt; py += pvy * dt; this.aimDots[i].setPosition(px, py); this.aimDots[i].setAlpha((1 - i / this.aimDots.length) * 0.85); this.aimDots[i].setScale(i < 6 ? 1.3 : 0.9); } } showFloatingText(x, y, msg, color) { var t = this.add.text(x, y, msg, { fontSize: '15px', color: color, fontFamily: 'monospace', stroke: '#000000', strokeThickness: 2, }).setOrigin(0.5).setDepth(22); this.tweens.add({ targets: t, y: y - 58, alpha: 0, duration: 1100, onComplete: function(tw, objs) { objs[0].destroy(); }, }); } showStatus(msg, color, duration) { this.statusText.setText(msg).setColor(color).setAlpha(1); this.tweens.add({ targets: this.statusText, alpha: 0, duration: 400, delay: Math.max(duration - 400, 0), }); } // ─── UPDATE ──────────────────────────────────────────────────────────────── update(time, delta) { if (this.gameOver) return; var dt = delta / 1000; // seconds // ── Keyboard angle control ── var angleStep = 1.4; if (this.cursors.up.isDown || this.wasd.up.isDown) this.aimAngle = Math.max(this.aimAngle - angleStep, -65); if (this.cursors.down.isDown || this.wasd.down.isDown) this.aimAngle = Math.min(this.aimAngle + angleStep, 5); this.angleText.setText('Angle: ' + Math.round(-this.aimAngle) + '°'); // ── Space charge-and-fire ── if (Phaser.Input.Keyboard.JustDown(this.spaceKey) && !this.chargingPower && this.canShoot) { this.chargingPower = true; this.power = 0; } if (this.chargingPower && this.spaceKey.isDown) { this.power = Math.min(this.power + 130 * dt, 100); } if (this.chargingPower && !this.spaceKey.isDown) { if (this.canShoot) this.fireCannon(this.aimAngle, this.power); this.chargingPower = false; this.power = 0; } // ── Barrel rotation ── this.cannonBarrel.setRotation(Phaser.Math.DegToRad(this.aimAngle)); this.drawAimGuide(); this.drawPowerBar(); // ───────────────────────────────────────────────────────────────────────── // PLAYER CANNONBALL FLIGHT // Each ball stores its own vx, vy. Each frame: // vy += GRAVITY * dt → gives a downward-curving parabolic arc // x += vx * dt // y += vy * dt // vx adjusts slightly for wind // ───────────────────────────────────────────────────────────────────────── var windAcc = (this.windFrozen ? 0 : this.windSpeed) * 1.2; for (var bi = this.ballData.length - 1; bi >= 0; bi--) { var bd = this.ballData[bi]; if (!bd.img || !bd.img.active) { this.ballData.splice(bi, 1); continue; } // Apply gravity bd.vy += GRAVITY * dt; // Apply wind drift (gentle acceleration on X) bd.vx += windAcc * dt; // Move bd.img.x += bd.vx * dt; bd.img.y += bd.vy * dt; // Cull off-screen if (bd.img.x > GAME_WIDTH + 80 || bd.img.x < -80 || bd.img.y > GAME_HEIGHT + 80) { this.spawnSplash( Phaser.Math.Clamp(bd.img.x, 0, GAME_WIDTH), Phaser.Math.Clamp(bd.img.y, 0, GAME_HEIGHT - 20) ); bd.img.destroy(); this.ballData.splice(bi, 1); } } // ── Collision: player balls vs enemies ── this.checkBallEnemyCollisions(); // ───────────────────────────────────────────────────────────────────────── // ENEMY CANNONBALL FLIGHT (straight lines, no gravity) // ───────────────────────────────────────────────────────────────────────── for (var ei = this.eBallData.length - 1; ei >= 0; ei--) { var ebd = this.eBallData[ei]; if (!ebd.img || !ebd.img.active) { this.eBallData.splice(ei, 1); continue; } ebd.img.x += ebd.vx * dt; ebd.img.y += ebd.vy * dt; if (ebd.img.x < -80 || ebd.img.x > GAME_WIDTH + 80 || ebd.img.y < -80 || ebd.img.y > GAME_HEIGHT + 80) { ebd.img.destroy(); this.eBallData.splice(ei, 1); } } // ── Collision: enemy balls vs player ── this.checkEnemyBallPlayerCollision(); // ── Power-up proximity pickup ── this.powerups.getChildren().forEach(function(pu) { if (!pu.active) return; if (Phaser.Math.Distance.Between(pu.x, pu.y, this.cannonPivot.x, this.cannonPivot.y) < 60) { this.collectPowerup(pu.getData('puType')); pu.destroy(); } }, this); // ── Power-up expiry ── if (this.activePowerup && time > this.puTimer) { this.clearPowerup(); } if (this.activePowerup && this.puTimer - time < 2000) { this.puText.setAlpha(Math.floor(time / 180) % 2 === 0 ? 1 : 0.2); } else if (this.activePowerup) { this.puText.setAlpha(1); } // ── Health bars follow ships ── this.enemies.getChildren().forEach(function(ship) { if (ship.active) this.redrawHealthBar(ship); }, this); // ── Animated waves & stars ── this.waveTime += dt; this.drawWaves(); this.drawStars(time); this.drawClouds(time); } // ─── ENVIRONMENT ANIMATIONS ──────────────────────────────────────────────── drawWaves() { var W = GAME_WIDTH; var g = this.waveGfx; g.clear(); var rows = [ { y: 290, amp: 5, speed: 1.1, col: COLORS.foam, alpha: 0.13 }, { y: 320, amp: 7, speed: 0.8, col: COLORS.ocean3, alpha: 0.30 }, { y: 355, amp: 9, speed: 1.4, col: COLORS.foam, alpha: 0.10 }, { y: 400, amp: 6, speed: 0.6, col: COLORS.ocean3, alpha: 0.22 }, { y: 450, amp: 4, speed: 1.7, col: COLORS.foam, alpha: 0.09 }, { y: 510, amp: 3, speed: 2.0, col: COLORS.foam, alpha: 0.07 }, ]; rows.forEach(function(row) { g.lineStyle(2, row.col, row.alpha); g.beginPath(); g.moveTo(0, row.y); for (var x = 0; x <= W; x += 8) { g.lineTo(x, row.y + Math.sin(x * 0.025 + this.waveTime * row.speed) * row.amp); } g.strokePath(); }, this); } drawStars(time) { var g = this.starsGfx; g.clear(); this.starData.forEach(function(s) { var twinkle = 0.3 + 0.7 * Math.abs(Math.sin(time * 0.001 + s.blink)); g.fillStyle(0xffffff, s.r * twinkle); g.fillCircle(s.x, s.y, 1.3); }); } drawClouds(time) { var g = this.cloudGfx; g.clear(); // A couple of slow-drifting cloud wisps near the horizon var clouds = [ { baseX: 400, y: 210, w: 140, h: 28, speed: 0.008 }, { baseX: 620, y: 230, w: 90, h: 20, speed: 0.006 }, { baseX: 200, y: 195, w: 110, h: 22, speed: 0.010 }, ]; clouds.forEach(function(c) { var x = ((c.baseX + time * c.speed) % (GAME_WIDTH + c.w)) - c.w / 2; g.fillStyle(0x334466, 0.35); g.fillEllipse(x, c.y, c.w, c.h); }); } }

Cannon Royale

Comments1

Created by

Rate this game