js

JS querySelector() & querySelectorAll()

querySelector는 css선택자(name/id/class)를 사용하여 엘리먼트를 찾는 메서드다. 이를 이용해 html의 엘리먼트들을 js 코드로 가져와 변경할 수 있다. document.querySelector(selectors); querySelector는 selectors와 일치하는 문서 내 첫번째 엘리먼트 하나를 반환한다.(없으면 null 반환) 이름으로 찾고 싶을 경우 이름을, id로 찾고 싶을 때는 "#id"를, 클래스 이름으로 찾고 싶을 때는 ".className"과 같이 입력해준다. document.querySelectorAll(selectors); querySelectorAll을 사용하면 여러 엘리먼트들을 한 번에 가져올 수 있다. selectors와 일치하는 모든 요소를 리스트 타..

JS Object

웹 게임 강의를 듣고 있는데, 사용자가 누른 키를 관리하기 위해 객체를 사용했다. 자주 쓰이는 자료형이므로 정리해놓고 필요할 때마다 추가해야겠다. Object = 객체 객체는 키와 밸류를 갖는 여러 개의 멤버로 구성된다. 중괄호 내부에 key: value 모양으로 값이 저장된다. 키에는 String과 Symbol type만 사용할 수 있다. 따라서 key값에 12345를 넣어도 자동으로 String으로 취급된다. 밸류값에는 모든 타입의 자료형을 넣을 수 있다. 나는 객체 안에 객체를 또 넣어 해당 키가 눌렸는지 확인했다. // 객체 패턴 const objectName = { member1Name: member1Value, member2Name: member2Value, member3Name: member..

크롬 공룡 게임 만들기(4/4): 장애물 충돌 체크

이번에는 공룡과 장애물이 충돌하는 경우를 체크하고, 우리의 주인공들을 네모네모가 아니라 캐릭터 이미지로 바꿔보도록 하겠다. 매우 허접하지만 이 단계까지 하고 나면 대충 게임의 구색은 갖출 수 있다. 우선 두 유닛이 충돌하는지를 확인하는 함수 isBumped를 구현했다. function isBumped(dino, cactus) { var xDif = cactus.x - (dino.x + dino.width); var yDif = cactus.y - (dino.y + dino.height); if (xDif < 0 && yDif < 0) { ctx.clearRect(0, 0, canvas.width, canvas.height); cancelAnimationFrame(animation); } } 충돌 여부는 ..

크롬 공룡 게임 만들기(3/4): 장애물 관리 및 점프 구현

앞의 포스팅에서 일정 시간마다 장애물을 생성해 cactuses 배열에 넣어 관리하는 코드를 작성했었다. 오늘은 게임 키를 구현하기에 앞서 이미 지나간 장애물을 삭제하는 코드를 먼저 추가해 보겠다. 이미 지나가 화면에 보이지 않는 장애물을 배열에서 제거해 주지 않는다면, 게임 플레이 시간이 늘어남에 따라 배열에 담긴 장애물 수도 계속해서 증가할 것이다. 이건 바람직하지 않기 때문에 장애물을 생성하고 배열에 추가한 후 화면에 그리는 코드를 수정해 보도록 하겠다. if (timer % 240 === 0) { var cactus = new Cactus(); cactuses.push(cactus); } cactuses.forEach((a, i, o) => { if (a.x < 0) { o.splice(i, 1);..

크롬 공룡 게임 만들기(2/4): 공룡과 장애물 만들기

이제 본격적으로 main.js를 작성해 보자. 공룡 게임에 사용되는 유닛에는 크게 공룡과 장애물이 있다. 이런 등장 요소의 속성을 객체로 정리해 두면 편리하다. 객체란 관련된 데이터와 함수(객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다)의 집합이라고 보면 된다. 생각해 보면 게임에서 공룡은 한 마리만 있으면 되지만, 장애물은 여러 개가 있어야 할 뿐만 아니라 각각의 속성이 다를 수 있다. 쿠키런에서 1단 점프를 해야 하는 장애물과 2단 점프를 해야 하는 장애물이 있는 것 처럼.. 이렇게 비슷한 여러 객체를 만들어야 할 때 사용하는 것이 클래스다. 클래스를 쿠키 틀이라고 한다면 객체는 그 쿠키 틀로 찍어낸 쿠키 반죽이라고 할 수 있겠다. 쿠키 틀을 하나만 구비해 놓으면 쿠키를 하나하나 빚을 필요 ..

크롬 공룡 게임 만들기(1/4): 게임 개발의 기본

재미로 게임 한 번 만들어 보고 싶어서 유튜브 뒤적거리다가 흥미로운 강의를 발견했다. https://www.youtube.com/watch?v=qkTtmgCjHhM&t=97s 나는 데브시스터즈의 쿠키런:오븐브레이크의 찐팬인데 언젠가 짭키런을 만들어서 배포해보고 싶다는 목표가 있다. 수익 창출을 한다는건 아니고 오직 팬심만으로 하는거다. 사랑해요 데브시스터즈.. 아무튼 그래서 쿠키런보다는 단순하지만 같은 러닝게임인 크롬 공룡 게임을 한 번 만들어보려고 한다. JS는 꽤 써봤지만 게임 개발은 어떤 식으로 하는 건지 감이 잘 안왔는데, 영상에서 굉장히 쉽고 재미있게 설명해 주셔서 잽싸게 따라해 봤다. BoB 활동을 하면서는 JS를 이틀 공부하고 실전에 투입됐기 때문에 기본적인 개념이 부족한 감이 있는데, 이 ..