JavaScript
JS arrow function
화살표 함수를 사용하면 function 키워드를 사용해서 함수를 만드는 것 보다 간단하게 표현할 수 있다. // function const sum = function(a, b) { return a + b; }; //arrow function const sum = (a, b) => a + b; () 안에 매개변수를 넣고 화살표 오른쪽에 함수 본문을 넣는다. 매개변수 지정 방법 //매개변수가 없을 경우 const ex = () => { ... }; //매개변수가 하나인 경우 괄호 생략 가능 const ex = a => { ... }; const ex = (a) => { ... }; //매개변수가 여러개인 경우 const ex = (a, b, c) => { ... }; 함수 본문 지정 방법 // 함수 본문이 ..
JS 배열 요소 삭제
1. splice() arr.splice(index, 1); arr.splice(0); //모든 요소 삭제 첫 번째 인자는 제거할 요소의 인덱스, 두 번째 인자는 제거할 요소 개수를 받는다. 반환 값은 삭제한 요소들을 담은 배열이다. splice(0)을 하면 배열의 모든 요소가 삭제된다. 2. delete let arr = [1, 2, 3]; delete arr[0]; 해당 요소를 빈 값으로 변경한다. 따라서 배열 길이는 그대로다. 위 코드를 실행하면 arr는 [empty(undifined), 2, 3]이 되며 arr의 길이는 3이다. 3. pop() arr.pop(); 배열의 마지막 요소를 삭제한다. 반환 값은 삭제된 요소의 값이다. 4. shift() arr.shift(); 배열의 첫 번째 요소를 삭..
JS parentNode / parentElement / childNodes / children / append / appendChild
웹 개발을 하다 보면 지금 처리하는 엘리먼트의 부모 엘리먼트에 접근하거나 자식 엘리먼트를 추가해야 할 일이 생긴다. 이때 주로 parentNode와 appendChild를 썼는데, 비슷한 기능을 하는 parentElement와 append까지 찾아보고 정리하려고 한다. 우선 노드와 엘리먼트의 차이를 알아야 한다. https://velog.io/@yejineee/DOM%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-DOM-Node%EC%99%80-Element%EC%9D%98-%EC%B0%A8%EC%9D%B4 DOM은 무엇인가? DOM Node와 Element의 차이 여행자보험의 보장명과 보장가격을 가져오기 위해 웹크롤링을 해보았다. 사실 이 과정은 그냥, html pa..
JS event / eventHandler / eventListener
event 브라우저에서 event란 말 그대로 사용자가 어떤 사건을 일으켰을 때를 의미한다. 클릭을 했을 때, 키를 눌렀을 때, 스크롤을 했을 때 등. 이벤트의 종류는 정말 많다. https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 내가 자주 쓸만한 것들을 정리해 보자면 다음과 같다. keydown 키를 눌렀을 때 keyup 키를 뗐을 때 keypress 키를 누르고 있을 때 click 엘리먼트를 클릭했을 때(눌렀다 ..
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단 점프를 해야 하는 장애물이 있는 것 처럼.. 이렇게 비슷한 여러 객체를 만들어야 할 때 사용하는 것이 클래스다. 클래스를 쿠키 틀이라고 한다면 객체는 그 쿠키 틀로 찍어낸 쿠키 반죽이라고 할 수 있겠다. 쿠키 틀을 하나만 구비해 놓으면 쿠키를 하나하나 빚을 필요 ..