yoon's Devlog

Step 1. 오디오 객체 생성 //1. audio id="one" src="sounds/piano.mp3" controls> controls를 넣으면 다음과 같은 재생바가 생긴다. 재생바가 없더라도 재생과 멈춤에는 영향이 없다. Step 2. 버튼 클릭 시 소리 재생 //눌러보셈 버튼을 눌렀을때 레이저 소리를 재생해 보세요. document.querySelector("#myBtn").addEventListener("click", function(){ //빠르게 처음부터 다시 재생하고 싶다면 laserSound.currentTime=0; laserSound.play(); }); .play() 를 사용하면 재생한다. 하지만, 버튼을 누를 때마다 빠르게 처음부터 소리 재생을 다시하고 싶다면, .current..

이번에는 배경이미지 위에 마우스가 있는 지점에만 이미지가 떠다니도록 구현해보려 한다. Step 1. 마우스가 있는 point에만 그림이 있도록 코드 수정하기(잔상 없애기) 저번 게시물에서 offset을 활용하여 마우스가 있는 지점마다 이미지가 보이도록 구현했었다. 이번에는 마우스가 있는 그 지점에만 이미지가 있도록 해야하므로 이전 게시물의 코드를 보완해야한다. 우선, 이전 게시물의 코드는 다음과 같다. 이전 코드 canvas.addEventListener("mousemove",function(e){ context.drawImage(kimImg,e.offsetX-50,e.offsetY-50,100,100); }); 다음 코드의 결과는 아래와 같다. 보완을 위한 중요한 생각 point는, 위의 코드는 mou..

다음 게시물에서 DragonFlight라는 슈팅게임을 구현해보려 한다. 따라서, DragonFlight 구현에 필요한 canvas 사용법에 대해 알아보려 한다. Step1. 캔버스 생성하기, 도구 준비하기 canvas 생성에는 태그를 사용한다. context는 그림을 그릴 수 있는 도구로, context의 참조값도 얻어온다. 중요한 점은, context와 canvas는 서로 독립적이라는 것이다. Step2. 선 스타일 지정하기 Step3. 선 그리기 stroke를 꼭 해주어야 한다. stroke를 하지 않으면 캔버스에 아무것도 표시되지 않는다. Step4. 이미지 삽입하기 new Image()는 힙 영역에 이미지 객체를 생성한다. onload를 사용하는 이유는, 페이지 로딩 시점에 이미지가 로딩되어 있지..

JSON은 JavaScript Object Notation이다. 따라서 JSON 형식에서 object 형식으로의 전환, object에서 JSON 형식으로의 전환이 자유롭다. JSON 작성 형식은 다음과 같다. [ json 문자열 작성 형식 ] 형식1 : { } 형식2 : [ ] { "키값" : value, "키값2": value2, ... } - 키값은 반드시 double quotation "" 로 감싸야 된다. - value 가 될수 있는 형식 숫자 : 10 또는 10.1 와 같이 숫자를 작성 하면된다. 문자 : "xxx" double quotation 으로 감싸면 된다. 논리값 : true or false 를 작성하면 된다. obejct : { } array : [ ] 빈값 : null functio..

예제1 select를 선택했을 때 선택한 아이템을 p에 출력하기 선택 가위 바위 보 가위 이 문제에서는 앞에서 배운 this를 활용했다 . selection.addEventListener("change",function(){ document.querySelector("#result").innerText = selection[this.value].innerText; }); 여기서 this는 change 이벤트가 일어난 '바로 그' 객체'이므로 여기에서는 선택된 option 태그임을 확인할 수 있다. 예제2 select를 선택했을 때 선택한 아이템에 해당하는 가위, 바위, 보 이미지 div에 출력하기 선택 가위 바위 보 예제1과 비슷한데 이미치를 출력하는 문제이다. 이 코드에서 사용한 this를 살펴보자. ..

예시 1 Math 객체 활용하기 floor() : 내림 round(): 반올림 ceil(): 올림 random(): 0이상 1미만으 랜덤한 실수 얻어내기 다음의 예시에서, random() 뒤에 곱해지는 숫자는 범위값(끝), 뒤에 더해지는 숫자 1은 시작값을 의미함을 알 수 있다. //1 이상 45 이하의 랜덤한 정수 얻어내기 let result13 = Math.floor(Math.random()*45)+1; 예시 2 버튼 클릭 시 0과 2 사이의 랜덤한 정수를 얻어 p요소에 출력하기 랜덤한 결과 얻어내기 테스트 예시 3 랜덤한 0~2 사이의 정수를 얻어 경우에 따라 가위, 바위, 보를 p에 출력하기 3-1) if문 사용하기 랜덤한 결과 얻어내기 테스트 3-2) 배열 사용하기 랜덤한 결과 얻어내기 테스트

setInterval() 메서드는 일정시간을 주기로 반복 작업을 하기 위한 메서드이다. setTimeout()과 다른점은, setTimeout은 일정 시간이 지났을 때 한번만 호출하지만, setInterval은 일정 시간마다 해당 함수를 반복 호출한다는 점이다. setInverval의 사용법은 다음과 같다. setInverval(function(){},delay) //(호출할 함수, 지연시간) 예제를 살펴보자. 다음 예제는 setInterval()을 활용하여 버튼 클릭 시 1초마다 숫자가 증가하도록 구현한 예제이다. 일정시간 주기로 반복 작업하기 숫자 세기 0

setTimeout은 일정 시간을 지연시켜 어떤 작업을 수행하기 위한 메서드이다. 사용법은 다음과 같다. setTimeout(function(){}, delay) //(호출할 함수, 지연시간) 지연시간 단위는 1/1000초이다. 다음 예제는 setTimeout을 활용하여 5초 이후에 알림창을 띄우는 예제이다. 일정시간 지연 시켜서 어떤 작업 수행하기 5초 이후에 알림띄우기