마리오 두더지 잡기 4일차

오늘은 자바스크립트 22일차 되는 날 입니다..
오늘은 제 개인 프로젝트로 저의 학습 능력을
향상 시키기 위해 준비한 프로그램입니다!
클론코딩에 저의 추가 프로그램을 준비해서
만들어보았습니다.

오늘의 프로젝트는 마리오 두더지 잡기 2일차 입니다!
이 프로젝트의 요구사항을 말씀드리겠습니다.

<추가요구사항>
3일차 4일차 나누기가 너무 추가 범위가 (제대로 정리 안한점 죄송합니다..)
넓어서 제가 추가한 부분에서 처음 알게되고 그 어디에서 도 쓰지않았던
사운드를 추가해봤습니다.
오늘은 이 사운드에 대해 알려드릴려고 합니다.

이건 전체적으로 추가한 간단한 영상입니다.
영상이 너무 커질까봐 생략된 부분이 많습니다.

우리는 왜 사운드라는 걸 추가를 할까? 라는 질문에 저는 이러한
주관적인 생각이 나왔습니다.

여러부분이 있다고 생각합니다.

1. 접근성 향상 시각 장애가 있는 사용자에게 사운드는 중요한 정보 제공 수단이 될 수 있고 화면에 나타나는 정보를 음성으로 전달하거나,
   시각적 피드백을 소리로 제공함으로써 접근성을 향상시킬 수 있기 때문에.
2. 위에 맞춰 브랜딩 및 개성 사운드는 프로그램이나 애플리케이션의 브랜드 아이덴티티를 강화하는 데 사용될 수 있어 특정 사운드나 음악은 브랜드와 연결되어 사용자의 기억에 남을 수 있기 때문에.
3. 몰입감 및 분위기 조성 게임이나 멀티미디어 애플리케이션에서는 사운드가 몰입감과 분위기를 조성하는 데 중요한 역할을하고 배경 음악이나 효과음은 사용자가 더 깊이 몰입할 수 있도록 도와주기 때문에.

이것 말고 도 여러 등등 이유가 있고 자기의 프로그램 목적에 맞게 사운드가 사용 되고 있을 것 입니다.

그러면 저는 이 자바스크립트 프로그램에서 어떻게 사운드를 집어넣어야 할까?
라는 생각이 들었습니다.

어떠한 것이 사운드를 넣을 수 있을까?

HTML5의 <audio> 요소를 사용하면 HTML 문서에 직접 사운드를 삽입하고 자바스크립트를 통해 제어할 수 있습니다.

<audio> 요소

<audio id="background-music" src="./music/Super Mario Bross - Theme Song.mp3" loop></audio>

예시코드는 제가 사용한 코드입니다.

이 코드 같은 경우에는 게임이 시작이 되었을때 배경음악을 담당하고 있습니다.

그럼 이 <audio> 요소는 어떻게 자바스크립트에서 활용이 될까요?

이 함수는 주어진 URL의 사운드 파일을 재생합니다.

function playSound(soundUrl) {
    const audio = new Audio(soundUrl);
    audio.volume = 0.2; // 볼륨 조절
    audio.play().catch(error => {
        console.error("소리 재생 오류: ", error);
    });
}

Audio 객체를 생성하여 주어진 soundUrl의 사운드를 로드합니다.
볼륨을 0.2로 설정하여 소리의 크기를 조절합니다.
play() 메서드를 호출하여 소리를 재생합니다.
사운드 재생 중 오류가 발생하면, 콘솔에 오류 메시지를 출력합니다.

그리고

<button id="instructions-button" data-sound="./music/설정사운드.wav">Instructions</button>
            
<button id="start-button" data-sound="./music/start.wav">Start</button>
            
<button id="exit-button" data-sound="./music/게임종료버튼.wav">Exit</button>

버튼에서 도 버튼 클릭 등의 이벤트에 따라 사운드를 재생할 수 있습니다.

그럼 자바스크립트에서는

 document.getElementById("instructions-button").addEventListener("click", function() {
        playSound(this.getAttribute("data-sound")); // 버튼에 설정된 소리 재생
        showInstructions();
    });

HTML 문서에서 ID가 "instructions-button"인 요소(버튼)를 선택합니다.

addEventListener("click", function() { }) 이 버튼에 클릭 이벤트 리스너를 추가합니다.
버튼이 클릭될 때 실행될 함수(function() { })를 정의합니다.

this.getAttribute("data-sound") 클릭된 버튼(this)의 data-sound 속성 값을 가져옵니다
이 속성 값은 사운드 파일의 경로를 포함하고 있습니다.

playSound(this.getAttribute("data-sound")) playSound 함수에 data-sound 속성에서 가져온 경로를 전달합니다.
playSound 함수는 이 경로를 사용해 사운드를 로드하고 재생합니다.

이러한 방법으로 사운드를 각자 의 역할에 맞게 배치를 해두면
원하는 방향의 프로그램이 만들어집니다.

그럼 제가 자바스크립트에서 사운드를 활용한 코드를 보여드리겠습니다.

이 함수는 주어진 URL의 사운드 파일을 재생합니다.

function playSound(soundUrl) {
    const audio = new Audio(soundUrl);
    audio.volume = 0.2; // 볼륨 조절
    audio.play().catch(error => {
        console.error("소리 재생 오류: ", error);
    });
}

Audio 객체를 생성하여 주어진 soundUrl의 사운드를 로드합니다.
볼륨을 0.2로 설정하여 소리의 크기를 조절합니다.
play() 메서드를 호출하여 소리를 재생합니다.
사운드 재생 중 오류가 발생하면, 콘솔에 오류 메시지를 출력합니다.

이 함수는 배경 음악을 중지하고 재생 위치를 처음으로 되돌립니다.

function stopBackgroundMusic() {
    const music = document.getElementById("background-music");
    music.pause();
    music.currentTime = 0; // 음악 재생 위치를 처음으로 되돌림
}

pause() 메서드를 호출하여 음악을 일시 정지합니다.
currentTime을 0으로 설정하여 음악의 재생 위치를 처음으로 되돌립니다.

이 함수는 게임 오버 시 재생할 사운드를 재생합니다.

function playGameOverSound() {
    const gameOverSound = new Audio("./music/Game over.wav");
    gameOverSound.play().catch(error => {
        console.error("게임 오버 사운드 재생 오류: ", error);
    });
}

Audio 객체를 생성하여 "./music/Game over.wav" 파일을 로드합니다.
play() 메서드를 호출하여 사운드를 재생합니다.
사운드 재생 중 오류가 발생하면, 콘솔에 오류 메시지를 출력합니다.

함수는 게임 승리 시 재생할 사운드를 재생합니다.

function playWinSound() {
    const winSound = new Audio("./music/승리시.mp3");
    winSound.play().catch(error => {
        console.error("승리 사운드 재생 오류: ", error);
    });
}

Audio 객체를 생성하여 "./music/승리시.mp3" 파일을 로드합니다.
play() 메서드를 호출하여 사운드를 재생합니다.
사운드 재생 중 오류가 발생하면, 콘솔에 오류 메시지를 출력합니다.

버튼 클릭 시 사운드 재생

document.getElementById("start-button").addEventListener("click", function() {
    playSound(this.getAttribute("data-sound")); // 버튼에 설정된 소리 재생
    // 기타 게임 시작 로직...
});

각 버튼의 클릭 이벤트 핸들러는 playSound() 함수를 호출하여 해당 버튼에 설정된 소리(data-sound 속성)를 재생합니다.

이 프로그램에 사운드를 넣으면서 의 가장 큰 문제점은 상호작용인것 같습니다.
음악이 안나오는 경우도 있고 음악이 나왔다 안나왔다 하는 부분에 뭐가 문제지 하는데
정답은 가까웠습니다.

window.onload = function() {
    // 버튼 클릭 이벤트 핸들러 설정
    document.getElementById("start-button").addEventListener("click", function() {
        playSound(this.getAttribute("data-sound")); // 버튼에 설정된 소리 재생
        const music = document.getElementById("background-music");
        music.volume = 0.1; // 볼륨 조절 (0.0에서 1.0 사이)
        music.play().catch(error => {
            console.error("음악 재생 오류: ", error);
        });
        startGame(); // 게임 시작 함수 호출
    });

바로 여기서 문제가 일어 났습니다.

요약해서 설명하자면
1. 페이지가 로드되면, "start-button" ID를 가진 버튼에 클릭 이벤트 리스너가 추가됩니다.
2. 사용자가 이 버튼을 클릭하면, 버튼의 data-sound 속성에 설정된 소리가 재생됩니다.
3. 배경 음악을 찾은 후, 그 볼륨을 설정하고 재생합니다.
4. startGame() 함수를 호출하여 게임을 시작합니다.

여기서 저는 이 4번 startGame()함수를 넣지 않고 사운드 재생오류에 애를 쓰고 있었는데 게임이 시작이 되면 나오는 사운드인데 저는 버튼을 누르면 사운드가 실행이 될줄알고 startGame(); 호출을 뒤늦게 깨달아 넣으니 이문제는 없어졌습니다.

아직 업데이트 중인 프로그램이라 4일차라는 표시를 해놨습니다.

추가 하는 부분은 또 차수에 블로그로 뵙겠습니다.

아직 어려운점도 부족한 점도 많지만
프론트엔드로 진출하기 위해 한 계단을 오른 프린이 일기였습니다.

끝까지 읽어주신분들 감사합니다~!