본문 바로가기

자바스크립트16

[JS] setInterval()과 setTimeout() 함수 setInterval() 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있다. 이럴 때는 자바스크립트의 setInterval() 함수를 사용할 수 있다. setInterval() 함수는 원하는 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다. 사용법 setInterval( 함수명, 시간 ); 예를 들어 현재 시간을 1초 간격으로 출력하고 싶다면 const getClock= () => { const date = new Date(); console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`); }; getClock(); setInter.. 2022. 11. 14.
HTML/CSS/JS로 게임 만들기 4 https://conquer-it.tistory.com/132 HTML/CSS/JS로 게임 만들기 3 11. 적군 만들어 주기 총알 발사까지 마친 상태에서 다음으로 만들 것은 적군이다. 적군의 특징으로는 적군의 특징 1. 적군의 위치는 랜덤하다. 2. 적군은 위에서 아래로 내려온다. 3. n초마다 적군이 생성된다. 4. 적군이 바닥에 닿으면 게임이 종료된다. 5. 적군과 총알이 만나게 되면 적군은 사라지고 스코어가 1씩 올라간다. 총알 만드는 것처럼 적군도 클래스를 만들어 줘야 한다. const generateRandomValue =(min,max)=>{ let randomNum = Math.floor(Math.random()*(max-min-1))+min; return randomNum; } let e.. 2022. 9. 18.
HTML/CSS/JS로 게임 만들기 3 https://conquer-it.tistory.com/131?category=1065783 HTML/CSS/JS로 게임 만들기 2 7. 총알 생성을 위한 스페이스바 이벤트 생성하기 스페이스바가 눌렸을 때 총알이 발사 되고 싶다면 어떻게 해야할까? 우선, 우리가 만들어 놓은 keyup 이벤트에 스페이스바를 추가하면 된다. (keydown 이벤트에 총알발사를 추가하게 되면 난이도가 굉장히 쉬워지기 때문에 keyup에 적용) //방향키 이벤트 let keysDown = {}; const setupKeyboardListener=()=>{ document.addEventListener("keydown",(event)=>{ keysDown[event.key] = true; }); document.addEventL.. 2022. 9. 16.
[WEB] HTML/CSS/JS로 게임 만들기 2 https://conquer-it.tistory.com/130 HTML/CSS/JS로 게임 만들기1 5. 방향키에 이벤트 주기 우선 방향키를 눌렀을 때 우주선이 이동하기 위해서는 방향키에 이벤트를 주어야 한다. 그렇기 때문에 함수를 만들어 키보드 이벤트를 줘 보자. const setupKeyboardListener=()=>{ document.addEventListener("keydown",(event)=>{ console.log("어떤 키가 눌렸나",event.key) }); } 이벤트리스너에 키보드로 움직이는 것이다 보니 click이 아니라 keydown 이벤트를 주었다. 그 후 잘 동작하는지 보기 위해 console을 해 주었다. (잘 나오고 있다.) 우리가 누른 값이 저장이 되어야 우주선이 움직일 .. 2022. 9. 15.