반응형
⭐ 화면에 보이는 w, a, s, d, j, k, l을 클릭하거나
키보드로 입력을 하게된다면 소리를 출력한다.
index.html
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<!-- 페비콘 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- CSS 링크 -->
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
<button class="j drum">j</button>
<button class="k drum">k</button>
<button class="l drum">l</button>
</div>
<footer>
Made with ❤️ in London.
</footer>
<script src = "index.js">
</script>
</body>
</html>
var btns = document.querySelectorAll("button");
//모든 버튼에 이벤트 달기
for(var i = 0; i < btns.length; i++){
btns[i].addEventListener('click', handleClick);
}
// btns[0].addEventListener('click', handleClick);
// btns[1].addEventListener('click', handleClick);
// btns[2].addEventListener('click', handleClick);
//btn1.addEventListener('click', handleClick);
function handleClick() {
//alert("클릭했음");
// var audio = new Audio('sounds/tom-1.mp3');
// audio.play();
//console.log(this.textContent);
// 7개의 버튼중 어떤 버튼을 눌렀는지 키값으로 판별
drumBit(this.textContent);
for(var i = 0; i< btns.length; i++){
btns[i].addEventListener("click", handleClick);
}
// 전체 화면에 키보드 이벤트 달기
document.addEventListener('keypress', handleKey);
function handleKey(e) {
// 어떤 키보드 키를 눌렀는가?
// 이벤트 객체는 addEventListen에 함수의 매개변수로 사용
// 7개의 버튼중 어떤 버튼을 눌렀는지 키값으로 판별
drumBit(e.key);
}
}
function drumBit(key){
switch (key) {
case 'w':
var audio = new Audio('sounds/tom-1.mp3');
audio.play();
break;
case 'a':
var audio = new Audio('sounds/tom-2.mp3');
audio.play();
break;
case 's':
var audio = new Audio('sounds/tom-3.mp3');
audio.play();
break;
case 'd':
var audio = new Audio('sounds/tom-4.mp3');
audio.play();
break;
case 'j':
var audio = new Audio('sounds/snare.mp3');
audio.play();
break;
case 'k':
var audio = new Audio('sounds/crash.mp3');
audio.play();
break;
case 'l':
var audio = new Audio('sounds/kick-bass.mp3');
audio.play();
break;
default:
return;
//위의 key(w,a,s,d,j,k,l) 외에 다른 키가 입력되었을때
//함수를 끝내주기 때문에 다른 키보드값이 입력되어도 오류가 나지않는다.
}
animationDrum(key);
}
function animationDrum(key){
// 모든 버튼은 키값과 같은 클래스를 가지므로 '.' 클래스 이름으로 선택
var btn = document.querySelector('.' + key);
btn.classList.add('pressed');
// 0.1초 뒤에 클래스 제거
setTimeout(function(){
btn.classList.remove('pressed');
}, 100);
}Style.CSS
body {
text-align: center;
background-color: #283149;
}
h1 {
font-size: 5rem;
color: #DBEDF3;
font-family: "Arvo", cursive;
text-shadow: 3px 0 #DA0463;
}
footer {
color: #DBEDF3;
font-family: sans-serif;
}
.w {
background: url(images/tom1.png) center center no-repeat;
background-size: cover;
}
.a {
background: url(images/tom2.png) center center no-repeat;
background-size: cover;
}
.s {
background: url(images/tom3.png) center center no-repeat;
background-size: cover;
}
.d {
background: url(images/tom4.png) center center no-repeat;
background-size: cover;
}
.j {
background: url(images/snare.png) center center no-repeat;
background-size: cover;
}
.k {
background: url(images/crash.png) center center no-repeat;
background-size: cover;
}
.l {
background: url(images/kick.png) center center no-repeat;
background-size: cover;
}
.set {
margin: 10% auto;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.pressed {
box-shadow: 0 3px 4px 0 #DBEDF3;
opacity: 0.5;
}
.red {
color: red;
}
.drum {
outline: none;
border: 10px solid #404B69;
font-size: 5rem;
font-family: 'Arvo', cursive;
line-height: 2;
font-weight: 900;
color: #DA0463;
text-shadow: 3px 0 #DBEDF3;
border-radius: 15px;
display: inline-block;
width: 150px;
height: 150px;
text-align: center;
margin: 10px;
background-color: white;
}
반응형
'Front-End > Java Script' 카테고리의 다른 글
| [GitHub] 사용법 및 GitHub Desktop을 활용하기 (0) | 2021.05.31 |
|---|---|
| [자바스크립트] 문서 객체 모델(DOM) 정리 (0) | 2021.05.27 |
| [자바스크립트] 기본문법(조건문,배열,내장함수,함수,객체) 정리 (0) | 2021.05.26 |