마우스 이동 감지하기 [ lesson09 단계의 설명 ] 마우스 움직임을 감지하는 것은 키 누름을 감지하는 것보다 더욱 쉽다. 필요한 것은 mousemove (en-US) 이벤트에 대한 리스너이니, 이 keyup event 바로 아래에 이 행을 추가 document.addEventListener("mousemove", mouseMoveHandler, false); 마우스 움직임에 따라 패들 이동하기 포인터 좌표에 따라 패들 위치를 업데이트할 수 있다. 다음의 핸들러 함수가 이것을 해주는것이고, 추가한 이전 줄 아래에 다음 함수를 추가해준다. function mouseMoveHandler(e) { var relativeX = e.clientX - canvas.offsetLeft; if(relativeX >..

점수 계산하기 [ lesson08 단계의 설명 ] 점수를 받기위한 변수 선언 및 초기화 var score = 0; 점수 화면을 만들고, 업데이트를 하기 위해서 drawScore() 함수가 필요 아래 코드를 collisionDetection() 함수 아래에 추가 function drawScore() { ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("Score: "+score, 8, 20); } 텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷하다. 폰트를 정의하는 것은 CSS에서의 작업과 같으며. — font() (en-US) 함수에서 크기와 타입을 설정할 수 있습니다. 그런 다음 fillStyle() (en-US) 함수를 ..

상속과 프로토타입 체인에 대한 실습 및 예제

상속이란? : 부모 클래스(상위 클래스)와 자식 클래스(하위 클래스)가 있고, 자식 클래스는 부모 클래스를 선택해서, 그 부모의 멤버를 상속받아 그대로 쓸 수 있게 하는 것 상속의 대상 : 자식클래스가 부모 클래스로부터 상속을 받게 되면 부모 클래스의 필드와 메서드를 물려받게 된다. 단, 접근제어자가 private을 갖는 필드나 메소드는 상속이 불가하고, 패키지가 다를 경우 접근제어가자 default인 경우에도 상속이 불가능하다. 상속의 장점 : 중복된 코드를 줄일 수 있고, 유지보수가 편리하며, 통일성이 있고 다형성을 구현할 수 있다. 상속의 방법(선언) - extends : 상속받을 자식 클래스 뒤에 extends 키워드를 사용하고 부모 클래스를 적어주면 됨. ex) class Child extend..

프로토타입 체인을 이용한 상속 속성상속 : 자바스크립트 객체는 속성을 저장하는 동적인 "가방"과 (자기만의 속성이라고 부른다) 프로토타입 객체에 대한 링크를 가진다. 객체의 어떤 속성에 접근하려할 때 그 객체 자체 속성 뿐만 아니라 객체의 프로토타입, 그 프로토타입의 프로토타입 등 프로토타입 체인의 종단에 이를 때까지 그 속성을 탐색한다. 메소드 상속 : 자바스크립트에 "메소드"라는건 없다. 하지만 자바스크립트는 객체의 속성으로 함수를 지정할 수 있고 속성 값을 사용하듯 쓸 수 있다. 속성 값으로 지정한 함수의 상속 역시 위에서 본 속성의 상속과 동일하다. (단 위에서 언급한 "속성의 가려짐" 대신 "메소드 오버라이딩, method overriding" 라는 용어를 사용한다) 상속된 함수가 실행 될 때,..

클래스 상속이란? : 객체지향 프로그래밍에서 상속의 개념은 현실에서 사용하는 상속이라는 단어의 뜻과 비슷 : 프로그래밍에서의 상속은확장이라고도 부르고, 특정 클래스(부모 클래스)의 속성과 메서드를 하위 클래스(자식 클래스)가 물려받는것을 의미한다. ※ 클래스 상속을 사용하면 기존 코드를 변경하지 않고도 기능을 추가하거나 수정할 수 있다. 클래스 상속 기능 코드 재사용성 중복 코드의 제거 확장 JavaScript 클래스 상속 문법 function 부모클래스() { this.프로퍼티 = 값; } 부모클래스.prototype.메서드 = function() { } // 상속코드 자식클래스.prototype = new 부모클래스();