🚀 Devlog #6: Velocity Puck Character Select, SFX, Haptics, and a Glowing Title Screen!

Hey puck pros! ⚡ In this sixth devlog, we’re introducing powerful updates that improve the onboarding experience, game feel, and customizability. This is our most polished version yet, and here’s what’s new!

🎭 1. Dedicated Character Selection Screen

Gone is the old inline menu—now you get a full character selection screen (#characterSelectionScreen) after clicking "Single Player" from the main menu.

🕹️ Features:

• Preview icons for each paddle type (Classic, Robot, Ninja, Alien).

• Hover and click animations.

• A clear Start Game button once your pick is locked in.

🧠 Under the Hood:

js
document.querySelectorAll('.characterBtn').forEach(btn => {   
  btn.addEventListener('click', function() {     
    document.querySelectorAll('.characterBtn').forEach(b => b.classList.remove('selected'));     
    this.classList.add('selected');   
  }); 
}); 

Upon hitting Start Game, the system hides the selection screen, stores the chosen character, and loads into gameplay:

js
document.getElementById('startGameButton').addEventListener('click', function() {    
    ...     
    const selectedCharacter = document.querySelector('.characterBtn.selected').getAttribute('data-character');
    updateCharacterStyle(selectedCharacter);     
    gameStarted = true;     
    animate(); 
}); 

🔊 2. Added Sound Effects 🎧

We’ve introduced two key sound effects:

• Hit sound when the puck is struck

• Goal sound when a point is scored

Audio levels are customizable in the Options → Audio menu using sliders.

📁 Assets:

• /hit2.ogg

• /goal1.ogg

🎚️ Volume Controls:

js
document.getElementById('sfxVolume').addEventListener('input', function(e) {     
    const volume = e.target.value / 100;     
    hitSound.volume = volume;     
    goalSound.volume = volume; 
}); 

🔄 Real-time Audio Playback:

js
hitSound.currentTime = 0; 
hitSound.play().catch(e => console.log("Audio play failed:", e)); 

📳 3. Haptic Feedback: Feel the Impact

For mobile players, vibration feedback (haptics) makes every hit and goal more satisfying.

💥 Events That Trigger Vibration:

• Wall collisions: vibrate(50)

• Paddle strikes: vibrate(100)

• Goals: vibrate([100, 50, 200])

📲 Vibration Code:

js
function vibrate(pattern) {   
  if ('vibrate' in navigator) {     
    navigator.vibrate(pattern);   
  } 
} 

This works on supported browsers/devices and falls back silently if unsupported.

⚙️ 4. Options Is Now Its Own Screen

We’ve broken Options out into its own clean, full-screen interface.

📋 Inside Options (#optionsScreen):

• Colors

• 

• 

• Audio

• 

• Toggle Theme

• Back to Menu

Each submenu—like #colorsScreen and #audioScreen—is now a standalone screen, keeping things focused and user-friendly.

js
document.getElementById('audioButton').addEventListener('click', function() {     
    document.getElementById('optionsScreen').style.display = 'none';     
    document.getElementById('audioScreen').style.display = 'flex'; 
}); 

🌌 5. Animated Title Screen Background

The new title screen is fully alive with:

• Floating pucks & SVG hockey icons

• Glow-in-the-dark neon typography

• Inspirational hockey quotes on a rotating timer

💡 Background Setup:

html
<div class="hockey-elements"></div> 

🎨 JavaScript-Generated Elements:

js
function createPuck() { ... } 
function createHockeyIcon() { ... } 

10 icons and 8 pucks float gently across the screen using:

css
@keyframes float {   
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }   
  ... 
} 

Quotes rotate every 10 seconds:

js
setInterval(rotateQuotes, 10000); 

✅ Summary of What’s New:

• 🎭 Full Character Selection screen

• 🔊 Sound effects for strikes and goals

• 📳 Haptic feedback on mobile (vibration API)

• ⚙️ Clean and separate Options screen

• 🌌 Glowing, animated title screen with floating elements and quotes

Thanks for all your support! Keep sending feedback and tag us if you're playing online! 🧊

— Jordon McClain
Steel Cyclone Studios 💥