Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drum Kit #19

Open
Rajatt09 opened this issue Oct 23, 2024 · 2 comments
Open

Drum Kit #19

Rajatt09 opened this issue Oct 23, 2024 · 2 comments

Comments

@Rajatt09
Copy link
Contributor

Description:
Create an interactive web-based drum kit that allows users to play different drum sounds by pressing specific keys on their keyboard or clicking on the drum elements displayed on the screen. This project will help you understand event handling, audio manipulation, and creating an engaging user interface.

Key Features:

Random Sound Mapping:

  • Assign drum sounds to random keys (A to Z) when the game starts. Display the current mapping to the user (e.g., "Press 'D' for Kick Drum").

Sound Playback:

  • Load a collection of drum sounds (kick, snare, hi-hat, toms, cymbals).
  • Play the assigned sound when the game begins and when the user successfully matches the sound.

Timer:

  • Implement a countdown timer (e.g., 50-60 seconds) that starts when the game begins.
  • Display the remaining time on the screen.

User Input:

  • Capture keyboard input and check if the user presses the correct key for the sound played.
  • If the user presses the correct key, play the sound and increase the score.
  • If the user fails to press the correct key within the time limit, display a "Time's Up!" message.

Score Tracking:

  • Maintain a score to count how many correct sounds the user has matched within the time limit.
  • Display the score on the screen.

Game Over and Restart:

  • When the timer reaches zero, display a "Game Over" message with the final score.
  • Provide an option to restart the game, which will randomize the key mappings again.

Responsive Design:

  • Ensure the drum kit layout is responsive, allowing users to play on various devices, including desktops, tablets, and mobile phones.

Technologies Used:

  • HTML: To create the structure of the drum kit interface.
  • CSS: For styling and layout of the drum elements.
  • JavaScript: For handling user interactions, audio playback, and animations.
  • Audio Files: Use sound files for each drum element.
@MayurJirapure11
Copy link

@Rajatt09 plz assign me this issue

@Maaahive
Copy link
Contributor

@Rajatt09 please assign me this issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants