[Game Effect] 게임 이펙트 01

게임 이펙트 01

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 게임 이펙트를 만들어보도록 하겠습니다.
컴퓨터 바탕화면과 작동되는 뮤직 플레이어를 만들어보도록 하겠습니다.

HTML 소스 보기

HTML 구성은 헤더(제목, 시간)와 메인(바탕화면 아이콘), 푸터(agent, 소스 보기), 뮤직 플레이어로 구성된다.

<body>
    <div class="mouse__cursor"></div>
    <!-- png 형식으로 마우스 커서를 적용할 때에 필요함, cur 파일 적용의 경우 불필요 -->

    <header id="header">
        <h1>Coding Note's Game World</h1>
        <div class="time"></div>
    </header>
    <!-- // header -->

    <main id="main">
        <div class="icon_box">
            <div class="icon0">
                <img src="../assets/img/icon0.png" alt="디스크">
                <span>디스크</span>
            </div>
            <div class="icon1">
                <img src="../assets/img/icon1.png" alt="뮤직">
                <span>뮤직 듣기</span>
            </div>
            <div class="icon2">
                <img src="../assets/img/icon2.png" alt="샵 폴더">
                <span>샵 폴더</span>
            </div>
            <div class="icon3">
                <img src="../assets/img/icon3.png" alt="동영상">
                <span>동영상</span>
            </div>
            <div class="icon4">
                <img src="../assets/img/icon4.png" alt="파일">
                <span>파일</span>
            </div>
            <div class="icon5">
                <img src="../assets/img/icon5.png" alt="FIGMA">
                <span>FIGMA</span>
            </div>
        </div>
    </main>
    <!-- // main -->

    <footer id="footer">
        <div class="agent">agent</div>
        <div class="modal__wrap">
            <div class="modal__btn">
                <label for="btn">소스 보기</label>
            </div>
            <div class="modal__cont">
                <div class="modal__close">
                    <span class="close">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                            <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                </div>
                <div class="t_iframe">
                    <iframe src="https://github1s.com/kde66034/coding" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </footer>
    <!-- // footer -->

    <!-- 뮤직 플레이어 -->
    <div class="music__wrap">
        <div class="music__inner">
            <div class="music__header">
                <div>***</div>
                <h2>MUSIC PLAYER</h2>
                <div>***</div>
            </div>
            <div class="music__contents">
                <div class="volume__wrap">
                    <img class="volume_icon" src="../assets/img/volume.svg" alt="볼륨" />
                    <img class="volumeOff_icon" src="../assets/img/volumeoff.svg" alt="볼륨" />
                    <div class="volume_bar">
                        <input type="range" id="volume-control" min="0" max="10" />
                    </div>
                </div>
                <div class="music__view">
                    <div class="img">
                        <img src="../assets/img/music-1.png" alt="">
                    </div>
                    <div class="title">
                        <h3>Kazoom - Quincas Moreira</h3>
                        <p>YouTube Music</p>
                    </div>
                </div>
                <div class="music__control">
                    <div class="progress">
                        <div class="bar">
                            <audio id="main-audio" src="../assets/audio/music-1.mp3"></audio>
                        </div>
                        <div class="timer">
                            <span class="current">0:00</span>
                            <span class="duration">4:00</span>
                        </div>
                    </div>
                    <div class="control">
                        <i title="전체 반복" class="repeat" id="control-repeat"></i>
                        <!-- <i title="한곡 반복" class="repeat_one"></i>
                        <i title="랜덤 재생" class="shuffle"></i> -->
                        <i title="이전곡 재생" class="prev" id="control-prev"></i>
                        <i title="재생" class="play" id="control-play"></i>
                        <i title="정지" class="stop" id="control-stop"></i>
                        <i title="다음곡 재생" class="next" id="control-next"></i>
                        <i title="재생목록" class="list" id="control-list"></i>
                    </div>
                </div>
            </div>
            <div class="music__footer">
                <div class="music__list close">
                    <h3><span class="list">뮤직 리스트</span> <span class="close-btn" id="control-close"></span></h3>
                    <ul>
                        <!-- <li>
                            <strong>제목</strong>
                            <em>아티스트</em>
                            <span>재생시간</span>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

JavaScript 소스 보기 : 헤더(상단바)에 시간 표시하기

시간, 날짜를 저장할 상수와 시, 분, 초를 저장할 변수를 생성한 다음 if문을 이용하여 시간을 나타내는 스크립트를 짜도록 한다.

function printTime(){
const clock = document.querySelector(".time");
const now = new Date();

let nowHours = now.getHours();
let nowMins = now.getMinutes();
let nowSecs = now.getSeconds();
if(nowHours > 12) {
    nowHours = `${nowHours - 12}`
} else if(nowHours >= 0 && nowHours<=9){
    nowHours = `0${nowHours}`
};
if(nowMins < 10) nowMins = `0${nowMins}`;
if(nowSecs < 10) nowSecs = `0${nowSecs}`;
let nowMonth = now.getMonth() + 1;
let nowDate = now.getDate();
if(nowMonth  < 10 ) nowMonth = `0${nowMonth}`
if(nowDate < 10 ) nowDate = `0${nowDate}`

const nowTime = `${now.getFullYear()}년 ${(now.getMonth()+1)}월 ${now.getDate()}일 ${nowHours}시 ${nowMins}분 ${nowSecs}초`;

    clock.innerText = nowTime;
    setTimeout("printTime()", 1000);
}

JavaScript 소스 보기 : Agent

하단 푸터 영역에 현재 사용하고 있는 기기와 화면 크기를 표시시키기 위한 스크립트이다. agent, os라는 상수를 만들고 agent 영역에 innerText로 os 정보를 출력시킨다. if, else if문을 이용하여 각각 운영체제별로 출력시킬 문구를 스크립트로 짠다.

function printAgent() {
    const agent = document.querySelector(".agent");
    const os = navigator.userAgent.toLocaleLowerCase();

    agent.innerText = os;

    if(os.indexOf("window") >= 0){
        agent.innerText = "현재 Windows를 사용하고 있으며, 화면 크기는 "+ screen.width +"x"+ screen.height + "입니다.";
        document.querySelector("body").classList.add("window");
    } else if(os.indexOf("macintosh") >= 0){
        agent.innerText = "현재 Mac을 사용하고 있으며, 화면 크기는 "+ screen.width +"x"+ screen.height + "입니다.";
        document.querySelector("body").classList.add("mac");
    } else if(os.indexOf("iphone") >= 0){l
        agent.innerText = "현재 iPhone을 사용하고 있으며, 화면 크기는 "+ screen.width +"x"+ screen.height + "입니다.";
        document.querySelector("body").cassList.add("iphone");
    } else if(os.indexOf("android") >= 0){
        agent.innerText = "현재 Android를 사용하고 있으며, 화면 크기는 "+ screen.width +"x"+ screen.height + "입니다.";
        document.querySelector("body").classList.add("android");
    }
}

window.onload = function() {
    printTime();
    printAgent();
}

JavaScript 소스 보기 : 아이콘과 뮤직 플레이어를 자유자재로 드래그

아이콘과 뮤직 플레이어를 자유자재로 드래그하여 위치 이동을 가능하게 하도록 하는 스크립트이다. jQuery를 설치하여야 하며 자유자재 드래그를 시켜주고자 하는 div의 클래스값에 .draggable를 붙이면 된다.

$( function() {
    $(".icon0").draggable();
    $(".icon1").draggable();
    $(".icon2").draggable();
    $(".icon3").draggable();
    $(".icon4").draggable();
    $(".icon5").draggable();
    $(".music__wrap").draggable({
    });
} );

JavaScript 소스 보기 : 뮤직 플레이어

allMusic 상수에는 음악 정보(곡명, 아티스트, 이미지, 오디오 파일명)를 담고, 필요한 만큼의 상수를 선언한다. 현재 음악 인덱스 번호를 처음에는 1로 설정한다. 그런 다음엔 음악 재생, 재생 버튼, 정지 버튼, 이전 곡 듣기 버튼, 다음 곡 듣기 버튼 스크립트를 짠 다음 버튼을 클릭했을 때 해당 스크립트들이 실행될 수 있도록 addEventListener를 이용하여 스크립트를 짜도록 한다. 그 외에도 뮤직 리스트 구현, 뮤직 진행바, 오디오가 끝났을 때, 버튼 바꿔주기 등의 스크립트가 있으며 아래 코드의 주석 처리된 설명문을 참고하도록 한다.

뮤직 플레이어 JS 소스 보기

const allMusic = [
    {
        name: "1. Kazoom",
        artist: "Quincas Moreira",
        img: "music-1",
        audio: "music-1"
    },
    {
        name: "2. Calimba",
        artist: "E's Jammy Jams",
        img: "music-2",
        audio: "music-2"
    },
    {
        name: "3. This Old Man (instrumental)",
        artist: "The Green Orbs",
        img: "music-3",
        audio: "music-3"
    },
    {
        name: "4. This Old Man (vocal)",
        artist: "The Green Orbs",
        img: "music-4",
        audio: "music-4"
    },
    {
        name: "5. The Farmer In The Dell",
        artist: "The Green Orbs",
        img: "music-5",
        audio: "music-5"
    },
    {
        name: "6. The Farmer In The Dell (Instrumental)",
        artist: "The Green Orbs",
        img: "music-6",
        audio: "music-6"
    },
    {
        name: "7. Snack Time",
        artist: "The Green Orbs",
        img: "music-7",
        audio: "music-7"
    },
    {
        name: "8. Sand Castles",
        artist: "The Green Orbs",
        img: "music-8",
        audio: "music-8"
    },
    {
        name: "9. Rock-a-bye Baby",
        artist: "The Green Orbs",
        img: "music-9",
        audio: "music-9"
    },
    {
        name: "10. A Walk Into Space",
        artist: "Topher Mohr and Alex Elena",
        img: "music-10",
        audio: "music-10"
    },
]

const musicWrap = document.querySelector(".music__wrap");
const musicView = musicWrap.querySelector(".music__view .img img");
const musicName = musicWrap.querySelector(".music__view .title h3");
const musicArtist = musicWrap.querySelector(".music__view .title p");
const musicAudio = musicWrap.querySelector("#main-audio");
const musicPlay = musicWrap.querySelector("#control-play");
const musicPrevBtn = musicWrap.querySelector("#control-prev");
const musicNextBtn = musicWrap.querySelector("#control-next");
const musicProgress = musicWrap.querySelector(".progress");
const musicProgressBar = musicWrap.querySelector(".progress .bar");
const musicProgressCurrent = musicWrap.querySelector(".progress .timer .current");
const musicProgressDuration = musicWrap.querySelector(".progress .timer .duration");
const musicRepeat = musicWrap.querySelector("#control-repeat");
const musicListBtn = musicWrap.querySelector("#control-list");
const musicList = musicWrap.querySelector(".music__list");
const musicListUl = musicList.querySelector(".music__list ul");

let musicIndex = 1;     // 현재 음악 인덱스

// 음악 재생
function loadMusic(num){
    musicName.innerText = allMusic[num-1].name;     // 뮤직 이름 로드
    musicArtist.innerText = allMusic[num-1].artist;     // 뮤직 아티스트 로드
    musicView.src = `../assets/img/${allMusic[num-1].img}.png`;     // 뮤직 이미지 로드
    musicView.alt = allMusic[num-1].name;       // 뮤직 이미지 alt 태그 로드
    musicAudio.src = `../assets/audio/${allMusic[num-1].audio}.mp3`;    // 뮤직 파일 로드
}
musicAudio.play();

// 재생 버튼
function playMusic() {
    musicWrap.classList.add("paused");
    musicPlay.setAttribute("title", "정지");
    musicPlay.setAttribute("class", "stop");
    musicAudio.play();
}

// 정지 버튼
function pauseMusic() {
    musicWrap.classList.remove("paused");
    musicPlay.setAttribute("title", "재생");
    musicPlay.setAttribute("class", "play");
    musicAudio.pause();
}

// 이전 곡 듣기 버튼
function prevMusic() {
    // musicIndex --
    musicIndex == 1 ? musicIndex = allMusic.length : musicIndex--;
    loadMusic(musicIndex);
    playMusic();
    playListMusic();        // 재생목록 업데이트
}

// 다음 곡 듣기 버튼
function nextMusic() {
    // musicIndex ++
    musicIndex == allMusic.length ? musicIndex = 1 : musicIndex++;
    loadMusic(musicIndex);
    playMusic();
    playListMusic();        // 재생목록 업데이트
}

// 플레이 버튼 클릭
musicPlay.addEventListener("click", () => {
    const isMusicPaused = musicWrap.classList.contains("paused");   // 음악이 재생중
    isMusicPaused ? pauseMusic() : playMusic();
});

// 이전곡 버튼 클릭
musicPrevBtn.addEventListener("click", () => {
    prevMusic();
});

// 다음곡 버튼 클릭
musicNextBtn.addEventListener("click", () => {
    nextMusic();
});

// 뮤직 리스트 버튼
musicListBtn.addEventListener("click", () => {
    musicList.classList.add("show");
});

// 뮤직 리스트 구현하기
for(let i=0; i<allMusic.length; i++){
    let li = `
        <li data-index="${i+1}">
            <strong>${allMusic[i].name}</strong>
            <em>${allMusic[i].artist}</em>
            <audio class="${allMusic[i].audio}" src="../assets/audio/${allMusic[i].audio}.mp3"></audio>
            <span class="audio-duration" id="${allMusic[i].audio}">재생시간</span>
        </li>
    `;

    // musicListUl.innerHTML += li;     // 맨 마지막 곡의 시간만 표시되는 문제有
    musicListUl.insertAdjacentHTML("beforeend", li);    // 문제 해결 : 모든 곡의 시간을 표시 가능

    // 리스트에 음악 시간 불러오기
    let liAudioDuration = musicListUl.querySelector(`#${allMusic[i].audio}`);       // 리스트에서 시간을 표시할 선택자를 가져옴
    let liAudio = musicListUl.querySelector(`.${allMusic[i].audio}`);               // 리스트에서 오디오를 가져옴
    liAudio.addEventListener("loadeddata", () => {
        let audioDuration = liAudio.duration;                                       // 오디오 전체 길이
        let totalMin = Math.floor(audioDuration / 60);                              // 전체 길이를 분 단위로 쪼갬
        let totalSec = Math.floor(audioDuration % 60);                              // 초 계산
        if(totalSec < 10) totalSec = `0${totalSec}`;                                // 앞 자리에 0 추가
        liAudioDuration.innerText = `${totalMin}:${totalSec}`;                      // 문자열 출력
        liAudioDuration.setAttribute("data-duration", `${totalMin}:${totalSec}`);   // 속성에 오디오 길이 기록
    });
}

// 뮤직 리스트를 클릭하면 재생
function playListMusic(){
    const musicListAll = musicListUl.querySelectorAll("li");    // 뮤직 리스트 목록 가져오기
    for(let i=0; i<musicListAll.length; i++){
        let audioTag = musicListAll[i].querySelector(".audio-duration");

        if(musicListAll[i].classList.contains("playing")){
            musicListAll[i].classList.remove("playing");        // 클래스 존재시 삭제
            let adDuration = audioTag.getAttribute("data-duration");    // 오디오 길이값 가져오기
            audioTag.innerText = adDuration;    // 오디오 길이값 출력
        }

        if(musicListAll[i].getAttribute("data-index") == musicIndex){   // 현재 뮤직인덱스랑 리스트 인덱스 값이 같다면
            musicListAll[i].classList.add("playing");                   // 클래스 playing 추가
            audioTag.innerText = "재생중";                              // 재생중일 경우 재생중 멘트 추가   
        }

        musicListAll[i].setAttribute("onclick", "clicked(this)");
    }
}

// 뮤직 리스트를 클릭하면
function clicked(el){
    let getLiIndex = el.getAttribute("data-index");     // 클릭한 리스트의 인덱스 값을 저장
    musicIndex = getLiIndex;    // 클릭한 인덱스 값을 뮤직 인덱스에 저장
    loadMusic(musicIndex);      // 해당 인덱스 뮤직 로드
    playMusic();                // 음악 재생
    playListMusic();            // 음악 리스트 업데이트
}

// 뮤직 진행바
musicAudio.addEventListener("timeupdate", e => {
    // console.log(e);

    const currentTime = e.target.currentTime;   // 현재 재생되는 시간
    const duration = e.target.duration;         // 오디오의 총 길이
    let progressWidth = (currentTime/duration) * 100;   // 전체길이에서 현재 진행되는 시간을 백분위로 나눔
    
    musicProgressBar.style.width = `${progressWidth}%`;

    // 전체 시간
    musicAudio.addEventListener("loadeddata", () => {
        let audioDuration = musicAudio.duration;
        let totalMin = Math.floor(audioDuration / 60);    // 전체시간을 분단위로 쪼갬
        let totalSec = Math.floor(audioDuration % 60);    // 남은 초를 저장
        if(totalSec < 10) totalSec = `0${totalSec}`;      // 초가 한자리수일때 일의 자리수 앞에 0을 붙임
        musicProgressDuration.innerText = `${totalMin}:${totalSec}`;    // 완성된 시간 문자열                                 
    });

    // 진행 시간
    let currentMin = Math.floor(currentTime / 60);
    let currentSec = Math.floor(currentTime % 60);
    if(currentSec < 10) currentSec = `0${currentSec}`;
    musicProgressCurrent.innerText = `${currentMin}:${currentSec}`;
});

// 진행 버튼 클릭
musicProgress.addEventListener("click", (e) => {
    let progressWidth = musicProgress.clientWidth;  // 진행바 전체 길이
    let clickedOffsetX = e.offsetX;                 // 진행바 기준으로 측정되는 X좌표값
    let songDuration = musicAudio.duration;         // 오디오 전체 길이

    musicAudio.currentTime = (clickedOffsetX / progressWidth) * songDuration;   // 백분위로 나눈 숫자에 다시 전체 길이를 곱해서 현재 재생값으로 바꿈
});

// 반복 버튼 클릭
musicRepeat.addEventListener("click", () => {
    let getAttr = musicRepeat.getAttribute("class");

    switch(getAttr){
        case "repeat" : 
            musicRepeat.setAttribute("class", "repeat_one");
            musicRepeat.setAttribute("title", "한곡 반복");
        break;
        case "repeat_one" :
            musicRepeat.setAttribute("class", "shuffle");
            musicRepeat.setAttribute("title", "랜덤 재생");
        break;
        case "shuffle" : 
            musicRepeat.setAttribute("class", "repeat");
            musicRepeat.setAttribute("title", "전체 반복");
        break;
    }
});

// 오디오가 끝나면
musicAudio.addEventListener("ended", () => {
    let getAttr = musicRepeat.getAttribute("class");
    
    switch(getAttr) {
        case "repeat" :
            nextMusic();
        break;
        case "repeat_one" : 
            playMusic();
        break;
        case "shuffle" :
            let randomIndex = Math.floor(Math.random() * allMusic.length + 1);      // 랜덤 인덱스 생성

            do {
                randomIndex = Math.floor(Math.random() * allMusic.length + 1);
            } while ( musicIndex == randomIndex )
                musicIndex = randomIndex;   // 현재 인덱스를 랜덤 인덱스로 변경
                loadMusic(musicIndex);      // 랜덤 인덱스가 반영된 현재 인덱스 값으로 음악을 다시 로드
                playMusic();                // 로드한 음악을 재생
            break;
    }
    playListMusic();        // 재생목록 업데이트
});

// 버튼 바꿔주기
const btnPlay = document.querySelector("#control-play");
const btnStop = document.querySelector("#control-stop");

btnStop.style.display = "none";

btnPlay.addEventListener("click", () => {
    playMusic();
    btnStop.style.display = "block";
    btnPlay.style.display = "none";
});

btnStop.addEventListener("click", () => {
    pauseMusic();
    btnStop.style.display = "none";
    btnPlay.style.display = "block";
});

// 로드
window.addEventListener("load", () => {
    loadMusic(musicIndex);  // 음악 재생
    playListMusic();        // 리스트 초기화
});

// 뮤직 플레이어 리스트 닫기 버튼 누르면
const musicListList = document.querySelector(".music__list");
const musicListCloseBtn = document.querySelector("#control-close");

musicListCloseBtn.addEventListener("click", () => {
    musicListList.classList.add("close");
});

// 뮤직 플레이어 리스트 버튼 누르면
const musicControlListBtn = document.querySelector(".music__control .list");

musicControlListBtn.addEventListener("click", () => {
    musicListList.classList.remove("close");
});

// 볼륨 조절
const audio = document.getElementById("main-audio");
const audioVolume = document.getElementById("volume-control");
const volumeIcon = document.querySelector(".volume_icon");
const volumeOffIcon = document.querySelector(".volumeOff_icon");

audioVolume.addEventListener("change", function (e) {
    audio.volume = this.value / 10;
    if (this.value == 0) {
        volumeIcon.classList.add("hide");
        volumeOffIcon.classList.add("show");
    } else {
        volumeIcon.classList.remove("hide");
        volumeOffIcon.classList.remove("show");
    }
});

결과

원본 사이트 보기

원본(HTML/JS) 소스 보기

게임 이펙트 CSS

뮤직 플레이어 CSS

코딩공책📚

[Game Effect] 게임 이펙트 01 - 뮤직 플레이어

게임 이펙트 01

HTML 소스 보기

JavaScript 소스 보기 : 헤더(상단바)에 시간 표시하기

JavaScript 소스 보기 : Agent

JavaScript 소스 보기 : 아이콘과 뮤직 플레이어를 자유자재로 드래그

JavaScript 소스 보기 : 뮤직 플레이어

결과

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바