Enemy_rains Game
기본 구성
1. Start 버튼으로 시작하고 Stop하면 귀신이 사라지고 정지 됨, reset 기능 구현 X
2. 영웅이 키보드 이벤트를 이용해 왼쪽 오른쪽을 인식하고 클래스명으로 이미지를 변경
3. 영웅과 귀신이 닿았을 때 포인트 + 10, 닿지 않고 벽에 닿으면 라이프 -1
4. 라이프가 0개가 되면 Game Over 출력
고찰
- 히어로와 고스트의 어떻게 움직일지에 대한 고민
=> OffsetLeft, OffsetTop 및 style 속성을 대입하는 걸로 해결
=> setInterval를 이용해 움직임을 표현
=> 영웅의 움직임은 좌우폭을 최대치 값을 이용하여 범위 안에서 움직임 - 고스트가 바닥에 닿는 경우, 히어로에 닿는 경우 조건문 고민
=> 고스트의 OffsetLeft를 히어로 width를 이용해 +,-를 하여 겹칠 때 범위를 정하고 범위안에 히어로의 OffsetLeft 값이 들어오면 닿아서 죽으면서 포인트 +10 - 고스트가 죽는 모션으로 바뀔 때 사라지는 타이밍 고민
=> setTimeout을 이용해 바로 죽지않고 지정한 시간 뒤에 죽임
게임을 만들면서 느낀점과 공부내용 ❗❗
⭐ Class와 function으로 만들고 난 다음 차이 ⭐
- 클래스 vs 일반 function 생성자 차이점
⭐클래스(Class)⭐
- ES6부터 적용
- 생성자 함수이므로 호출 시 가장먼저 constructor를 호출한다
- constructor는 생성자 함수의 초기상태를 지정해준다 (프로퍼티 메소드 등)
- 생성자 함수를 통해 만든 인스턴스 부모격인 생성자함수에 대해 proto 링크를 가진다.
- 객체 안에 있는 함수를 메소드라 칭함
prototype vs proto
function Person(name,first,second){
this.name = name;
this.first = fitst;
this.second = second;
}
- Person 객체를 생성하면 prototype이라는 프로퍼티를 생성하여 Person's prototype의 객체를 가리킴
- Person's prototype의 객체는 constructor 프로퍼티를 통해 Person객체에 접근
- 새로운 변수로 인스턴스를 만들 때 해당 인스턴스의 값에 원하는 메소드나 프로퍼티가이 있으면 해당 객체를 탐색
- 객체를 탐색하고 없으면 생성자인 Person의 프로토타입을 탐색
화살표 함수(Arrow Function)
⭐⭐가장 큰 차이점은 this의 차이 ⭐⭐
- 클래스 안 메소드들 사이에서 값을 상호작용하고 유지하고 싶을 때 this 사용
- 값을 한번만 사용하고 끝내는 경우 let, const 사용
- 일반함수의 this
- 콜백 함수 내부의 this는 전역 객체 window를 가리 킴
- (A) 지점에서의 this는 생성자 함수 Prefixer가 생성한 객체, 즉 생성자 함수의 인스턴스(위 예제의 경우 pre)이다.
- (B) 지점에서 사용한 this는 아마도 생성자 함수 Prefixer가 생성한 객체(위 예제의 경우 pre)일 것으로 기대하였겠지만, 이곳에서 this는 전역 객체 window를 가리킨다.
- 화살표 함수의 this
- 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정
- 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리 킴 => Lexical this라 칭함
❗❗❗클래스 생성자 함수는 생성자 함수 자체와 자체 객체의 메소드를 제외한 모든 함수(if문,내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체를 가리킴 ❗❗❗
⛔ 화살표 함수 잘못된 사례 예
1. 메소드
2. prototype
3. 생성자 함수
4. addEventListener 함수의 콜백 함수
Class 상속 및 super 메소드
상속
- 생성자에서 변수나 다양한 것을 모르는 상태에서 상속을 통해 본인이 원하는 메소드나 프로퍼티 추가 가능
super 메소드
- 부모가 가진 constructor를 이용하고 부모를 통해 자신만의 contructor 안에 프로퍼티 or 메소드 추가 가능
call, bind 함수
call 함수
var lee = {name:'lee', first:10, second:10}
function sum(prefix){
return prefix+(this.first+this.second);
}
// sum();
console.log("sum.call(kim)", sum.call(kim, '=> ')); //apply kim은 sum의 this 역할 , sum.call(kim) => 30
console.log("lee.call(kim)", sum.call(lee, ': ')); // sum.call(kim) => 20
- call의 첫 번째 인자에서 내부적인 this를 결정
- 두 번째 인자부터 파라미터 인자 값 설정
- 필요할 때마다 호출 시 마다 값을 바꿔주면서 실행
bind 함수
var kim = {name:'kim', first:10, second:20}
var lee = {name:'lee', first:10, second:10}
function sum(prefix){
return prefix+(this.first+this.second);
}
// sum();
console.log("sum.call(kim)", sum.call(kim, '=> '));
console.log("lee.call(kim)", sum.call(lee, ': '));
var kimSum = sum.bind(kim, '-> ');
console.log('kimSum()', kimSum()); // kimSum() -> 30
- 독립적이면서도 특정 객체의 메소드 역할을 할 수 있는 함수
- 새로운 변수를 생성해서 함수와 객체를 이어주는 역할
- 함수에 고정된 객체 인자를 받아 새로운 함수 생성
- this의 값을 내부적으로 고정
- call과 값이 두번째 인자부터 파라미터 인자 값 설정
객체 정의 방법
- 리터럴
var car = {goes : "far"}- 생성자
var car = new Object();
car.goes = "far"
⭐ 생성자 함수의 단점 ⭐
1. 가독성의 문제
리터럴 표기법이 더 짧고 직관적이며 객체 생성에 용이
2. 느린 속도
여러가지 실험을 통해 리터럴 기법이 더 빠르다는 것이 증명 (약 12.14%)
하지만 사실상 미미, 복잡도가 높은 어플리케이션에서 필요
http://jsperf.com/new-array-vs-literal/26
3. Overriden(재정의) 예방
자바스크립트에서 기본 함수 조차도 Overriden이 된다
Object = function(){
alert("재정의");
};
var obj1 = new Object(); //alert 발생- https://poiemaweb.com/es6-symbol
JS symbol - https://bblog.tistory.com/300
map 함수 - https://opentutorials.org/module/4047/24628
call,bind - https://bkdevlog.netlify.com/posts/oop-class-of-js
프로토타입 사진 - https://poiemaweb.com/es6-arrow-function
화살표 함수 사진 및 사이트 - http://jsperf.com/new-array-vs-literal/26
생성자 함수 단점 - http://jsperf.com/new-array-vs-literal/26
생성자 함수와 리터럴 비교 사이트
Front End. Dev