My footsteps

자바스크립트 / 11 본문

국비수업/수업정리

자바스크립트 / 11

밀김 2023. 4. 4. 11:02
728x90

 
 
 
 
 
 
 
 
 
- 클래스 만들기 : 클래스 파일 생성 > export default 쓰기(내보내야하니까) > 생성자 만들기(클래스는 무조건 생성자 있어야함) > 필요한곳에서 import로 만든 클래스 파일 가져오기 > 만든 클래스 파일 객체 생성(생성자 부분에) 암기하기!!★
 
 
- import,export 경로가 틀리면 404 오류가 뜬다
 
 
 

  update(){
        if(this.#x > this.#dx && this.#x ){ //dx=내가 지목한 x /x는 좌푯값
            //좌표값은 정수로 딱 떨어지기도 어려워서 == 같다는 연산자는 적합하지 않다.
            this.#vx = 0;
            this.#vy = 0;
        }
        this.#x+=this.#vx;
        this.#y+=this.#vy; 
    }

 
 
 
- 캔버스 기반의 x,y는 offsetx,offsety라고 한다
 
- 아이템의 중심축을 설정하려면 좌표값에서 이미지 크기의 절반만큼 빼주면, 마우스중심축이 아이템 정중앙에 간다
 
- 스프라이트 이미지 : 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는것
 

import Boy from '../item/boy.js'; //클래스를 가져와야 한다..폴더명이 아닌

 
 
 
- 이미지 가져오기

import GameCanvas from './ui/game-canvas.js';

window.onload = function(){ //이미지가 로드가 완료 되면 함수가 실행이 되게끔
    let gameCanvas = new GameCanvas();
    gameCanvas.run();
}

- html에 img태그 넣고 > document.id로 이미지 id가져오고 > drawImage로 이미지 그려주고 
 
 
 
 
 
 
 
 


 
 
 
 
✏️ 캡슐이란?
: 외부로부터 보호하기 위해 포장한 형태

✏️ 캡슐화란?
: 서로 연관있는 속성들과 기능을 하나로 묶어두는것

✏️ 캡슐화를 왜 하나요?
: 코드를 외부로부터 은닉화하여 함부로 변경하지 못하게 구조화 해놓는것




 
 
 

728x90

'국비수업 > 수업정리' 카테고리의 다른 글

git / 2  (0) 2023.04.07
자바스크립트 / 12  (0) 2023.04.05
자바스크립트 / 10  (0) 2023.04.03
자바스크립트 / 9  (0) 2023.03.31
자바스크립트 / 8  (0) 2023.03.30