Canvas3 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. [WEB] HTML/CSS/JS로 게임 만들기 1 오늘은 HTML / CSS / JS로 게임을 만들어 볼 것이다. 게임은 어렸을 때 많이 했던 갤러그이다. 이 게임은 적군이 아래로 다가오는데 다가오는 적군에 총을 쏴서 없애는 게임이다. 물론 위 게임처럼 완벽하게 만들 수는 없겠지만 최대한 비슷하게 만들어볼 예정이다. 1. 캔버스 세팅하기 JS에서 캔버스를 생성해 주어서 게임을 진행할 화면을 세팅해줘야 한다. canvas(캔버스) - HTML문서 내부에 그림을 그릴 수 있는 일종의 컨테이너 요소이다. JS를 통해 애니메이션과 이벤트를 처리할 수 있다. //캔버스 세팅 let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); // 2d로 보여줄 것이다. canvas.w.. 2022. 9. 13. 이전 1 다음
