Vishva/game_development_workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add glowing golden ambient particle system to home page

Browse Source
This commit is contained in:
Vishva
2026-09-26 18:11:51 +05:30
parent 0f555fdb17
commit d4afacb1d2
4 changed files with 335 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+10
View File
@@ -432,6 +432,16 @@ html, body {
transform: translateZ(0);
}
.home-particles-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}
.btn-start-hero-overlay {
position: absolute;
top: 78.5%;
index.html
+2
View File
@@ -81,6 +81,8 @@
<section id="screen-start" class="screen-view active">
<div class="home-screen-backdrop">
<img src="images/home_page_bg.png" alt="PPE Safety Challenge" class="home-bg-image" />
<!-- High-fidelity Golden Ambient Particle Canvas -->
<canvas id="home-golden-particles" class="home-particles-canvas"></canvas>
<button id="btn-start-game" class="btn-start-hero-overlay" aria-label="Start Challenge" title="Click or Press Space to Start Challenge">
<span class="btn-hero-hover-text">▶ START CHALLENGE</span>
</button>
js/game.js
+4
View File
@@ -100,6 +100,7 @@ class SafetyGame {
init() {
this.avatar = new WorkerAvatar('avatar-container');
this.particles = new ParticleEngine('stage-fx-canvas');
this.homeParticles = new GoldenParticleEngine('home-golden-particles');
this.bindEvents();
this.updateHUD();
@@ -376,6 +377,9 @@ class SafetyGame {
if (screenName === 'start') {
this.stopTimer();
this.dom.screenStart.classList.add('active');
if (this.homeParticles) this.homeParticles.start();
} else {
if (this.homeParticles) this.homeParticles.stop();
}
if (screenName === 'game') this.dom.screenGame.classList.add('active');
if (screenName === 'summary') {
js/particles.js
+319
View File
@@ -220,3 +220,322 @@ class ParticleEngine {
requestAnimationFrame(() => this.animate());
}
}
/**
* GOLDEN PARTICLE ENGINE FOR HOME SCREEN
* Generates floating golden ambient dust, sparkling stars, glowing bokeh orbs, and embers.
*/
class GoldenParticleEngine {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
this.particles = [];
this.mouse = { x: -1000, y: -1000, isHovering: false };
this.isRunning = false;
this.maxParticles = 75;
this.animId = null;
if (this.canvas) {
this.init();
}
}
init() {
this.resize();
window.addEventListener('resize', () => this.resize());
// Interactive mouse glow and cursor sparkle trail
const backdrop = this.canvas.parentElement;
if (backdrop) {
backdrop.addEventListener('mousemove', (e) => {
const rect = this.canvas.getBoundingClientRect();
this.mouse.x = e.clientX - rect.left;
this.mouse.y = e.clientY - rect.top;
this.mouse.isHovering = true;
if (Math.random() < 0.4 && this.isRunning) {
this.spawnCursorSparkle(this.mouse.x, this.mouse.y);
}
});
backdrop.addEventListener('mouseleave', () => {
this.mouse.isHovering = false;
this.mouse.x = -1000;
this.mouse.y = -1000;
});
}
this.createInitialParticles();
this.start();
}
resize() {
if (!this.canvas) return;
const rect = this.canvas.parentElement ? this.canvas.parentElement.getBoundingClientRect() : this.canvas.getBoundingClientRect();
const dpr = Math.min(window.devicePixelRatio || 1, 2);
this.canvas.width = (rect.width || 1024) * dpr;
this.canvas.height = (rect.height || 458) * dpr;
this.dpr = dpr;
this.logicalWidth = rect.width || 1024;
this.logicalHeight = rect.height || 458;
}
createInitialParticles() {
this.particles = [];
for (let i = 0; i < this.maxParticles; i++) {
this.particles.push(this.createParticle(true));
}
}
createParticle(randomY = false) {
const types = ['dust', 'dust', 'sparkle', 'orb', 'ember'];
const type = types[Math.floor(Math.random() * types.length)];
const w = this.logicalWidth || 1024;
const h = this.logicalHeight || 458;
const palettes = [
{ fill: '#ffd700', glow: '#f59e0b' }, // 24k Gold
{ fill: '#fef08a', glow: '#fbbf24' }, // Light Champagne Sparkle
{ fill: '#f59e0b', glow: '#d97706' }, // Deep Warm Amber Gold
{ fill: '#fffbeb', glow: '#facc15' }, // Star Core Glow
{ fill: '#eab308', glow: '#ca8a04' } // Lustrous Yellow Gold
];
const palette = palettes[Math.floor(Math.random() * palettes.length)];
let size, baseAlpha, speedY, speedX, wobbleSpeed;
if (type === 'orb') {
size = Math.random() * 4.5 + 2.5;
baseAlpha = Math.random() * 0.22 + 0.08;
speedY = -(Math.random() * 0.35 + 0.12);
speedX = (Math.random() - 0.5) * 0.22;
wobbleSpeed = Math.random() * 0.015 + 0.005;
} else if (type === 'sparkle') {
size = Math.random() * 3.5 + 2.2;
baseAlpha = Math.random() * 0.55 + 0.35;
speedY = -(Math.random() * 0.6 + 0.25);
speedX = (Math.random() - 0.5) * 0.35;
wobbleSpeed = Math.random() * 0.03 + 0.01;
} else if (type === 'ember') {
size = Math.random() * 2.2 + 1.2;
baseAlpha = Math.random() * 0.75 + 0.25;
speedY = -(Math.random() * 0.85 + 0.35);
speedX = (Math.random() - 0.5) * 0.4;
wobbleSpeed = Math.random() * 0.04 + 0.015;
} else { // dust
size = Math.random() * 1.8 + 0.8;
baseAlpha = Math.random() * 0.45 + 0.2;
speedY = -(Math.random() * 0.4 + 0.15);
speedX = (Math.random() - 0.5) * 0.2;
wobbleSpeed = Math.random() * 0.02 + 0.008;
}
return {
type,
x: Math.random() * w,
y: randomY ? Math.random() * h : h + Math.random() * 15,
size,
palette,
baseAlpha,
currentAlpha: baseAlpha,
speedY,
speedX,
wobbleAngle: Math.random() * Math.PI * 2,
wobbleSpeed,
wobbleRadius: Math.random() * 20 + 8,
twinkleAngle: Math.random() * Math.PI * 2,
twinkleSpeed: Math.random() * 0.05 + 0.02,
rot: Math.random() * Math.PI * 2,
rotSpeed: (Math.random() - 0.5) * 0.025,
life: 1.0,
isCursorParticle: false
};
}
spawnCursorSparkle(x, y) {
if (this.particles.length > this.maxParticles + 25) return;
this.particles.push({
type: 'sparkle',
x: x + (Math.random() - 0.5) * 14,
y: y + (Math.random() - 0.5) * 14,
size: Math.random() * 3 + 2,
palette: { fill: '#ffffff', glow: '#ffd700' },
baseAlpha: 0.95,
currentAlpha: 0.95,
speedY: (Math.random() - 0.7) * 1.4,
speedX: (Math.random() - 0.5) * 1.4,
wobbleAngle: Math.random() * Math.PI * 2,
wobbleSpeed: 0.05,
wobbleRadius: 6,
twinkleAngle: 0,
twinkleSpeed: 0.12,
rot: Math.random() * Math.PI,
rotSpeed: 0.06,
life: 1.0,
decay: 0.022,
isCursorParticle: true
});
}
start() {
if (this.isRunning) return;
this.isRunning = true;
this.animate();
}
stop() {
this.isRunning = false;
if (this.animId) {
cancelAnimationFrame(this.animId);
this.animId = null;
}
}
drawStarSparkle(ctx, x, y, size, rot, alpha, palette) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot);
ctx.globalAlpha = alpha;
ctx.fillStyle = palette.fill;
ctx.shadowColor = palette.glow;
ctx.shadowBlur = 10;
const spikes = 4;
const outerRadius = size * 1.9;
const innerRadius = size * 0.35;
ctx.beginPath();
for (let i = 0; i < spikes * 2; i++) {
const r = (i % 2 === 0) ? outerRadius : innerRadius;
const angle = (i * Math.PI) / spikes;
const sx = Math.cos(angle) * r;
const sy = Math.sin(angle) * r;
if (i === 0) ctx.moveTo(sx, sy);
else ctx.lineTo(sx, sy);
}
ctx.closePath();
ctx.fill();
// Inner bright core
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(0, 0, innerRadius * 0.75, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
animate() {
if (!this.isRunning) return;
const w = this.logicalWidth || 1024;
const h = this.logicalHeight || 458;
const dpr = this.dpr || 1;
if (this.ctx && this.canvas) {
this.ctx.save();
this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
this.ctx.clearRect(0, 0, w, h);
for (let i = this.particles.length - 1; i >= 0; i--) {
const p = this.particles[i];
// Motion & Oscillation
p.wobbleAngle += p.wobbleSpeed;
p.twinkleAngle += p.twinkleSpeed;
p.rot += p.rotSpeed;
p.y += p.speedY;
p.x += p.speedX + Math.sin(p.wobbleAngle) * 0.4;
// Twinkle factor
const twinkleFactor = 0.65 + 0.35 * Math.sin(p.twinkleAngle);
p.currentAlpha = p.baseAlpha * twinkleFactor;
// Cursor gentle magnetic attraction / deflection
if (this.mouse.isHovering) {
const dx = p.x - this.mouse.x;
const dy = p.y - this.mouse.y;
const dist = Math.hypot(dx, dy);
if (dist < 65 && dist > 1) {
const force = (65 - dist) / 65 * 0.65;
p.x += (dx / dist) * force;
p.y += (dy / dist) * force;
}
}
// Handle cursor-spawned decay
if (p.isCursorParticle) {
p.life -= p.decay || 0.02;
p.currentAlpha *= Math.max(0, p.life);
if (p.life <= 0) {
this.particles.splice(i, 1);
continue;
}
}
// Recycle particles drifting off screen
if (p.y < -25 || p.x < -30 || p.x > w + 30) {
if (!p.isCursorParticle) {
this.particles[i] = this.createParticle(false);
} else {
this.particles.splice(i, 1);
}
continue;
}
// Render particle
if (p.type === 'sparkle') {
this.drawStarSparkle(this.ctx, p.x, p.y, p.size, p.rot, Math.min(1, p.currentAlpha), p.palette);
} else if (p.type === 'orb') {
// Soft golden bokeh orb
this.ctx.save();
this.ctx.globalAlpha = Math.min(1, p.currentAlpha);
this.ctx.fillStyle = p.palette.fill;
this.ctx.shadowColor = p.palette.glow;
this.ctx.shadowBlur = 10;
this.ctx.beginPath();
this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
this.ctx.fill();
// Outer translucent halo
this.ctx.fillStyle = p.palette.glow;
this.ctx.globalAlpha = p.currentAlpha * 0.35;
this.ctx.beginPath();
this.ctx.arc(p.x, p.y, p.size * 1.7, 0, Math.PI * 2);
this.ctx.fill();
this.ctx.restore();
} else {
// Ambient dust or ember
this.ctx.save();
this.ctx.globalAlpha = Math.min(1, p.currentAlpha);
this.ctx.fillStyle = p.palette.fill;
this.ctx.shadowColor = p.palette.glow;
this.ctx.shadowBlur = p.type === 'ember' ? 8 : 4;
this.ctx.beginPath();
this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
this.ctx.fill();
if (p.type === 'ember') {
this.ctx.fillStyle = '#ffffff';
this.ctx.globalAlpha = p.currentAlpha * 0.85;
this.ctx.beginPath();
this.ctx.arc(p.x, p.y, p.size * 0.4, 0, Math.PI * 2);
this.ctx.fill();
}
this.ctx.restore();
}
}
this.ctx.restore();
}
this.animId = requestAnimationFrame(() => this.animate());
}
}
window.ParticleEngine = ParticleEngine;
window.GoldenParticleEngine = GoldenParticleEngine;