팀프로젝트로 웹페이지를 만들며 컨셉에 맞게
간단한 게임 요소를 넣기로 했다.
그래서 구현하게 된 퍼즐게임.
퍼즐게임은 '데브리'님의 강의 영상을 참고했다.
https://youtu.be/iTBZdg7tg-w?si=m6GbOKlwihkJPyDV
아래 영상처럼 퍼즐게임이 잘 구현되었지만
퍼즐이 옮기는데에 있어 조작감이 아쉬운 느낌이다.
그래서 퍼즐 클릭 시 효과음을 넣기로 했다.
효과음 반영하는 코드 작성은 아래 블로그를 참고했다.
https://record-ay.tistory.com/32
[HTML] 클릭시 효과음 넣기
1. 스킨 편집 들어간 후 html 편집 들어가기 html편집하기에서 아래 소스 복사해서 넣기 2. 마우스 클릭 효과음 다운로드 http://itthe.net/15 3. 클릭 효과음 다운받고 적용하면 약간 소리가 짤리더라구
record-ay.tistory.com
<html >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>퍼즐게임</title>
<!--생략-->
<audio id='audio_play' src='효과음.mp3'></audio>
</head>
</html >
<html>
먼저 원하는 효과음.mp3 파일을 다운로드한 뒤
html문서 <head> 안에
<audio>태그를 넣고 mp3파일을 연결한다.
function play() {
var audio = document.getElementById('audio_play');
if (audio.paused) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0
}
}
<js>
스크립트 파일에 위처럼 효과음 반영하는 함수를 선언하고
//게임 시작
function setGame() {
play();
isPlaying = true;
time = 0;
container.innerHTML = "";
gameText.style.display = 'none'
clearInterval(timeInterval)
// 생략
}
// 생략
// 마우스 이벤트
container.addEventListener('dragstart', e => {
play();
if(!isPlaying) return;
const obj = e.target;
dragged.el = obj;
dragged.class = obj.className;
dragged.index = [...obj.parentNode.children].indexOf(obj);
})
<js>
게임 시작을 구현하는 함수와
마우스 이벤트를 구현한 함수에
play(); 함수를 호출한다.
'JavaScript' 카테고리의 다른 글
| [TIL] 내배캠_영화소개페이지(3)_리뷰 수정 기능 구현하기 (0) | 2024.05.10 |
|---|---|
| [TIL] 내배캠_영화소개페이지(1)_localStorage 사용하기 (0) | 2024.05.08 |
| [TIL] 대소문자 구분없이 검색 기능 구현하기 (0) | 2024.04.29 |
| [TIL] 데이터의 유형_숫자 (0) | 2024.04.23 |
| [TIL] var, let, const의 차이 (1) | 2024.04.18 |