(TIL 7-10일차) Enemy_rains 게임 (JavaScript)

pks787·2020년 2월 11일
0

TIL(Today I Learned)

목록 보기
18/43

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
    생성자 함수와 리터럴 비교 사이트
profile
Front End. Dev

0개의 댓글