AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA PENAT
This commit is contained in:
Stanley
parent
decb897401
commit
88bfd9bd04
205
Script.js
205
Script.js
@ -191,8 +191,8 @@ function preRenderAssets() {
|
||||
mCtx.fillStyle = mg;
|
||||
mCtx.beginPath();
|
||||
mCtx.moveTo(mPad, mPad);
|
||||
mCtx.lineTo(mPad + 30, mPad + 6);
|
||||
mCtx.lineTo(mPad, mPad + 12);
|
||||
mCtx.lineTo(mPad + 30, mPad + 6);
|
||||
mCtx.lineTo(mPad, mPad + 12);
|
||||
mCtx.fill();
|
||||
}
|
||||
|
||||
@ -201,7 +201,7 @@ window.onload = function () {
|
||||
};
|
||||
|
||||
function init() {
|
||||
preRenderAssets();
|
||||
preRenderAssets();
|
||||
c = document.getElementById("canvas");
|
||||
|
||||
ctx = c.getContext("2d", { alpha: false });
|
||||
@ -633,7 +633,7 @@ function drawUI() {
|
||||
drawNewText(game.level, canvasWidth - 140, 50, "#00ff00", "30px");
|
||||
|
||||
// Lives (Stacked Icons)
|
||||
const lifeSize = 40;
|
||||
const lifeSize = 40;
|
||||
const lifePadding = 5;
|
||||
|
||||
if (livesImg.complete) {
|
||||
@ -837,7 +837,7 @@ class backgroundObj {
|
||||
this.height = 900;
|
||||
this.img = img;
|
||||
this.img = img;
|
||||
this.factor = speed;
|
||||
this.factor = speed;
|
||||
}
|
||||
draw() {
|
||||
ctx.save();
|
||||
@ -1172,7 +1172,7 @@ class AbilityToken {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = 40;
|
||||
this.width = 40;
|
||||
this.height = 40;
|
||||
this.speed = 4;
|
||||
let r = Math.random();
|
||||
@ -1355,24 +1355,133 @@ class Explosion {
|
||||
}
|
||||
|
||||
function drawGameOver() {
|
||||
ctx.fillStyle = "rgba(53, 0, 0, 0.7)";
|
||||
// Dark overlay with gradient
|
||||
const gradient = ctx.createRadialGradient(
|
||||
canvasWidth / 2,
|
||||
canvasHeight / 2,
|
||||
0,
|
||||
canvasWidth / 2,
|
||||
canvasHeight / 2,
|
||||
canvasWidth / 1.5
|
||||
);
|
||||
gradient.addColorStop(0, "rgba(10, 0, 0, 0.85)");
|
||||
gradient.addColorStop(0.5, "rgba(30, 0, 10, 0.92)");
|
||||
gradient.addColorStop(1, "rgba(0, 0, 0, 0.97)");
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
ctx.font = "80px Arial";
|
||||
ctx.fillStyle = "red";
|
||||
// Animated pulsing effect
|
||||
const pulseTime = Date.now() / 1000;
|
||||
const pulse = Math.sin(pulseTime * 2) * 0.15 + 0.85;
|
||||
|
||||
ctx.save();
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText("GAME OVER", canvasWidth / 2, canvasHeight / 2 - 50);
|
||||
|
||||
ctx.font = "40px Arial";
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillText(
|
||||
"Final Score: " + player1.score,
|
||||
canvasWidth / 2,
|
||||
canvasHeight / 2 + 20
|
||||
// "GAME OVER" main title with glowing effect
|
||||
ctx.font = "900 100px Orbitron, Arial";
|
||||
|
||||
// Outer glow layers
|
||||
for (let i = 30; i > 0; i -= 3) {
|
||||
ctx.shadowColor = `rgba(255, 50, 50, ${(30 - i) / 100})`;
|
||||
ctx.shadowBlur = i;
|
||||
ctx.fillStyle = `rgba(255, 0, 0, ${(30 - i) / 100})`;
|
||||
ctx.fillText("GAME OVER", canvasWidth / 2, canvasHeight / 2 - 120);
|
||||
}
|
||||
|
||||
// Main title gradient
|
||||
const titleGradient = ctx.createLinearGradient(
|
||||
canvasWidth / 2 - 300,
|
||||
0,
|
||||
canvasWidth / 2 + 300,
|
||||
0
|
||||
);
|
||||
ctx.fillText("Refresh to Restart", canvasWidth / 2, canvasHeight / 2 + 70);
|
||||
titleGradient.addColorStop(0, "#ff0033");
|
||||
titleGradient.addColorStop(0.5, "#ff3366");
|
||||
titleGradient.addColorStop(1, "#ff0033");
|
||||
|
||||
ctx.textAlign = "left";
|
||||
ctx.shadowColor = "rgba(255, 51, 102, 0.8)";
|
||||
ctx.shadowBlur = 40 * pulse;
|
||||
ctx.fillStyle = titleGradient;
|
||||
ctx.fillText("GAME OVER", canvasWidth / 2, canvasHeight / 2 - 120);
|
||||
|
||||
// Reset shadow
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// Statistics panel background
|
||||
const panelY = canvasHeight / 2 - 20;
|
||||
const panelWidth = 500;
|
||||
const panelHeight = 200;
|
||||
const panelX = canvasWidth / 2 - panelWidth / 2;
|
||||
|
||||
// Panel border glow
|
||||
ctx.strokeStyle = "rgba(0, 234, 255, 0.6)";
|
||||
ctx.lineWidth = 3;
|
||||
ctx.shadowColor = "rgba(0, 234, 255, 0.8)";
|
||||
ctx.shadowBlur = 20;
|
||||
ctx.strokeRect(panelX, panelY, panelWidth, panelHeight);
|
||||
|
||||
// Panel background
|
||||
const panelGradient = ctx.createLinearGradient(
|
||||
panelX,
|
||||
panelY,
|
||||
panelX,
|
||||
panelY + panelHeight
|
||||
);
|
||||
panelGradient.addColorStop(0, "rgba(10, 10, 30, 0.85)");
|
||||
panelGradient.addColorStop(1, "rgba(20, 20, 40, 0.9)");
|
||||
ctx.fillStyle = panelGradient;
|
||||
ctx.fillRect(panelX, panelY, panelWidth, panelHeight);
|
||||
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// Statistics text - centered
|
||||
ctx.textAlign = "center";
|
||||
|
||||
// "Your score:" label
|
||||
ctx.font = "700 28px Orbitron, Arial";
|
||||
ctx.fillStyle = "#00eaff";
|
||||
ctx.fillText("Your score:", canvasWidth / 2, panelY + 70);
|
||||
|
||||
// Score value
|
||||
ctx.font = "900 64px Orbitron, Arial";
|
||||
ctx.shadowColor = "rgba(255, 255, 255, 0.5)";
|
||||
ctx.shadowBlur = 15;
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fillText(player1.score.toString(), canvasWidth / 2, panelY + 145);
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// Restart instruction with pulsing effect
|
||||
ctx.textAlign = "center";
|
||||
ctx.font = "700 28px Orbitron, Arial";
|
||||
const instructionAlpha = Math.sin(pulseTime * 3) * 0.3 + 0.7;
|
||||
ctx.fillStyle = `rgba(0, 234, 255, ${instructionAlpha})`;
|
||||
ctx.shadowColor = "rgba(0, 234, 255, 0.6)";
|
||||
ctx.shadowBlur = 15 * pulse;
|
||||
ctx.fillText("PRESS F5 TO RESTART", canvasWidth / 2, panelY + panelHeight + 60);
|
||||
|
||||
// Additional decorative elements
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// Corner decorations (top-left and bottom-right)
|
||||
const cornerSize = 40;
|
||||
ctx.strokeStyle = "rgba(255, 51, 102, 0.5)";
|
||||
ctx.lineWidth = 3;
|
||||
|
||||
// Top-left corner
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(panelX - 10, panelY - 10 + cornerSize);
|
||||
ctx.lineTo(panelX - 10, panelY - 10);
|
||||
ctx.lineTo(panelX - 10 + cornerSize, panelY - 10);
|
||||
ctx.stroke();
|
||||
|
||||
// Bottom-right corner
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(panelX + panelWidth + 10, panelY + panelHeight + 10 - cornerSize);
|
||||
ctx.lineTo(panelX + panelWidth + 10, panelY + panelHeight + 10);
|
||||
ctx.lineTo(panelX + panelWidth + 10 - cornerSize, panelY + panelHeight + 10);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawPauseOverlay() {
|
||||
@ -1423,7 +1532,7 @@ function drawScreenShading() {
|
||||
let intensity = (game.surge - 1.0) / (7.0 - 1.0);
|
||||
if (intensity > 0) {
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = "hard-light";
|
||||
ctx.globalCompositeOperation = "hard-light";
|
||||
ctx.fillStyle = "white";
|
||||
ctx.globalAlpha = intensity * 0.4;
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
||||
@ -1433,8 +1542,8 @@ function drawScreenShading() {
|
||||
}
|
||||
|
||||
function updateSurge() {
|
||||
const RAMP_UP_FRAMES = 240;
|
||||
const HOLD_FRAMES = 780;
|
||||
const RAMP_UP_FRAMES = 240;
|
||||
const HOLD_FRAMES = 780;
|
||||
const RAMP_DOWN_FRAMES = 300;
|
||||
const MAX_SURGE_SPEED = 7.0;
|
||||
|
||||
@ -1549,14 +1658,14 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||
// === START BUTTON ===
|
||||
startBtn.addEventListener('click', () => {
|
||||
playSound(menuClickSound);
|
||||
|
||||
|
||||
// Apply settings to game
|
||||
applySettings();
|
||||
|
||||
|
||||
// Hide menu, show game
|
||||
mainMenu.style.display = 'none';
|
||||
gameContainer.style.display = 'block';
|
||||
|
||||
|
||||
// Start the game
|
||||
if (!gameStarted) {
|
||||
init();
|
||||
@ -1573,7 +1682,7 @@ optionBtn.addEventListener('click', () => {
|
||||
// === EXIT BUTTON ===
|
||||
exitBtn.addEventListener('click', () => {
|
||||
playSound(menuClickSound);
|
||||
|
||||
|
||||
// Create exit confirmation
|
||||
const confirmExit = document.createElement('div');
|
||||
confirmExit.style.cssText = `
|
||||
@ -1590,7 +1699,7 @@ exitBtn.addEventListener('click', () => {
|
||||
box-shadow: 0 0 40px rgba(0, 234, 255, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
`;
|
||||
|
||||
|
||||
confirmExit.innerHTML = `
|
||||
<h3 style="
|
||||
color: #00eaff;
|
||||
@ -1648,9 +1757,9 @@ exitBtn.addEventListener('click', () => {
|
||||
">NO</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
document.body.appendChild(confirmExit);
|
||||
|
||||
|
||||
// YES button hover effect
|
||||
const yesBtn = document.getElementById('confirmYes');
|
||||
yesBtn.addEventListener('mouseenter', () => {
|
||||
@ -1665,7 +1774,7 @@ exitBtn.addEventListener('click', () => {
|
||||
yesBtn.style.transform = 'translateY(0) scale(1)';
|
||||
yesBtn.style.boxShadow = '0 4px 0 #cc0033, 0 0 12px rgba(255, 51, 102, 0.4), inset 0 0 15px rgba(255, 51, 102, 0.1)';
|
||||
});
|
||||
|
||||
|
||||
// NO button hover effect
|
||||
const noBtn = document.getElementById('confirmNo');
|
||||
noBtn.addEventListener('mouseenter', () => {
|
||||
@ -1680,7 +1789,7 @@ exitBtn.addEventListener('click', () => {
|
||||
noBtn.style.transform = 'translateY(0) scale(1)';
|
||||
noBtn.style.boxShadow = '0 4px 0 #00bcd4, 0 0 12px rgba(0, 234, 255, 0.4), inset 0 0 15px rgba(0, 234, 255, 0.2)';
|
||||
});
|
||||
|
||||
|
||||
// Click handlers
|
||||
yesBtn.addEventListener('click', () => {
|
||||
window.close();
|
||||
@ -1688,7 +1797,7 @@ exitBtn.addEventListener('click', () => {
|
||||
window.location.href = 'about:blank';
|
||||
}, 100);
|
||||
});
|
||||
|
||||
|
||||
noBtn.addEventListener('click', () => {
|
||||
playSound(menuClickSound);
|
||||
document.body.removeChild(confirmExit);
|
||||
@ -1706,18 +1815,18 @@ backBtn.addEventListener('click', () => {
|
||||
musicBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
playSound(menuClickSound);
|
||||
|
||||
|
||||
musicBtns.forEach(b => b.classList.remove('active'));
|
||||
|
||||
|
||||
btn.classList.add('active');
|
||||
|
||||
|
||||
gameSettings.musicEnabled = btn.dataset.music === 'on';
|
||||
|
||||
|
||||
if (typeof currentBGM !== 'undefined') {
|
||||
if (gameSettings.musicEnabled) {
|
||||
currentBGM.volume = 1;
|
||||
if (!game.gameOver && gameStarted) {
|
||||
currentBGM.play().catch(() => {});
|
||||
currentBGM.play().catch(() => { });
|
||||
}
|
||||
} else {
|
||||
currentBGM.volume = 0;
|
||||
@ -1731,11 +1840,11 @@ musicBtns.forEach(btn => {
|
||||
sfxBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
playSound(menuClickSound);
|
||||
|
||||
|
||||
sfxBtns.forEach(b => b.classList.remove('active'));
|
||||
|
||||
|
||||
btn.classList.add('active');
|
||||
|
||||
|
||||
gameSettings.sfxEnabled = btn.dataset.sfx === 'on';
|
||||
});
|
||||
});
|
||||
@ -1760,7 +1869,7 @@ function applySettings() {
|
||||
currentBGM.pause();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (typeof gameOverBGM !== 'undefined') {
|
||||
if (gameSettings.musicEnabled) {
|
||||
gameOverBGM.volume = 1;
|
||||
@ -1775,7 +1884,7 @@ function playSound(audio) {
|
||||
if (gameSettings.sfxEnabled) {
|
||||
audio.volume = 0.3;
|
||||
audio.currentTime = 0;
|
||||
audio.play().catch(() => {});
|
||||
audio.play().catch(() => { });
|
||||
}
|
||||
}
|
||||
|
||||
@ -1789,7 +1898,7 @@ document.addEventListener('keydown', (e) => {
|
||||
togglePause();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Enter to start game from main menu
|
||||
if (e.key === 'Enter' && mainMenu.style.display === 'flex') {
|
||||
startBtn.click();
|
||||
@ -1808,7 +1917,7 @@ function returnToMenu() {
|
||||
gameOverBGM.pause();
|
||||
currentBGM.currentTime = 0;
|
||||
gameOverBGM.currentTime = 0;
|
||||
|
||||
|
||||
game.gameOver = false;
|
||||
game.frames = 0;
|
||||
game.level = 1;
|
||||
@ -1817,7 +1926,7 @@ function returnToMenu() {
|
||||
game.surgePhase = 0;
|
||||
game.surgeTimer = 0;
|
||||
game.surgeCooldown = 2400;
|
||||
|
||||
|
||||
missilesArray = [];
|
||||
playerMissilesArray = [];
|
||||
enemyShipArray = [];
|
||||
@ -1825,11 +1934,11 @@ function returnToMenu() {
|
||||
explosions = [];
|
||||
abilityTokens = [];
|
||||
particles = [];
|
||||
|
||||
|
||||
player1 = new PlayerObject(100, 300);
|
||||
player1.lives = 6;
|
||||
player1.lives = 1;
|
||||
player1.score = 0;
|
||||
|
||||
|
||||
respawnCounter = 0;
|
||||
damageFlash = 0;
|
||||
currentWave = null;
|
||||
@ -1839,7 +1948,7 @@ function returnToMenu() {
|
||||
cameraY = 0;
|
||||
gameStarted = false;
|
||||
gamePaused = false;
|
||||
|
||||
|
||||
if (gameContainer) gameContainer.style.display = 'none';
|
||||
if (mainMenu) mainMenu.style.display = 'flex';
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user