Pong-8 adds sound to the game.
Important Functions
new Audio(path)- This function creates an Audio object that we can play back at any point in our program. You can control the volume and whether or not the file loops (ex. your game’s background music).
- We will use this functionality to play a sound whenever there is a collision and when a player scores.
What is jsfxr?
- jsfxr is a simple program for generating random sounds. We will use it to generate all sound effects for our Pong game.
- We’ve created 3 sound files and stored them in a sub-directory within Pong-8.
Important Code
You’ll notice in main.ts and Ball.ts that we’ve created an object with references to the 3 sound files we’ve added to our project directory:
const sounds = { score: new Audio('./sounds/score.wav'),};this.sounds = { paddleHit: new Audio('./sounds/paddle_hit.wav'), wallHit: new Audio('./sounds/wall_hit.wav'),};The sound objects are ready to use. Your job is to play the appropriate sound at the moment when each event happens: paddle collision, wall collision, and scoring.
And with that, we have a fully functioning game of Pong!
🧩 Challenge: Play sound effects
Trigger the paddle, wall, and score sound effects at the collision and scoring moments.
Files
Preparing Environment
- Installing dependencies
- Starting Vite dev server