I. INTRO : 프로젝트 관련
목표 코딩연습임 기한내 완수하겠다가 바람직하지 않음, 기한 내 어떻게 만들어지긴 하나 오만가지 쓰레기통이 존재함
자기가만든거 설명도, 오류원인도 모르고
목표를 작게 여러개 (이거하나만 만들더라도 완성도있게)
자랑할만한 작은거 만드는게 코딩습관에 좋은 방향
완성도라 함은 자존심이 높아지는것이다.
앞으로 이론 + 프젝 + 실습 동시에 간다.
II. 객체
1 Top -down 설계
(1) 시나리오에서 개체 식별하기
각각 개체가 무엇인지 생각해보기
슈팅게이 : 빌런 / 전투기
(2)객체분석과 개체분석
JS는 클래스가 없어서 개체는 function 객체로 만든다.
(3) 캡슐화
시나리오에서 전투기에 행동 체크하기 => 개체마다 역할 정리
시나리오 => 실체객체(개체 객체분석)는 무엇인지 => 역할은 무엇인지 => 구현(but 실제 이질감있을수도)
(4) 결과물
1) 클래스다이어그램
클래스다이어그램하면은 이렇게 만드는게 실제로 되는걸까?
첫번째. 내가생각한것과 다른 복병 있을수도
두번째. 내 경험미숙에서 오는 불안감
처음부터 Top - down 이 힘들기는 하다.
경험없는데 처음부터 팩토링 잘 하기 어렵다. 이후 리팩토링하자
2. 자바스크립트를 위한 입/출력 객체
- HTML 요소들을 객체화 하는 로드 과정이 포함됨
HTML =(load)=> DcumnetOboject =(show)=> UserInterface
DO 와 UI사이에 자바스크립트를 이용한다.
III. Canvas 실습
1. html에 JS코드 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
<script src="./app.js"></script>
</head>
<body>
<!-- <img src="./img/boy.png" alt=""> -->
<canvas class="game-canvas" width="700" height="700"></canvas>
</body>
</html>가운데 스크립트를 넣어준다.
2. JavaScript에 값 넣기
<전체코드>
window.addEventListener("load", function(){
//window는 이벤트가지고있음
//이벤트 담고있어서 시점(html가지고 있는
//모든 리소스가 올라갔을때 )
// var canvas = this.document.querySelector("")
//this는 윈도우 이다. 그래서 생략함
/** @type {CanvasRenderingContext2D}; */
var canvas = document.querySelector(".game-canvas");
//docu가 보따리 //. 하면 태그가 아니라 클래스 명을찾음
//# 하면 HTML id로 찾는다. 못찾는다.
// undefined(null) 가 나온다.
var img = new Image();
img.src="./image/boy.png";
img.onload = function(){
var ctx = canvas.getContext("2d");
}
console.log(canvas);
//나온다 이렇게 canvas는 큰 도화지이다.
//이거는 그림판이나 포토샵 제작할수 있다.
//사용자가 그림 그릴수있게 해주는 도구로
// ctx.fillStyle = "rgb(50, 100, 50)"; //색상
// ctx.fillRect(30, 30, 100, 100); //크기
// ctx.strokeStyle = "purple";
// ctx.strokeRect(50, 50, 100, 300);
ctx.context.drawImage(img, 100, 100);
//opengameart에서 따오기 가능
//게임에서 걸어가는 것이다.
});(1) addEventListener
이벤트라 함은 특정 조건에 부합되었을 때 브라우저에서 사건이 발생을 의미한다.
여기서 addEventListener는
window.addEventListener("load", function(){
window는 가장 기본적인 최상위 객체를 의미한다.
여기서 "load" : 는 여러가지 이벤트 타입 중에서 페이지에 있는 모든 요소들이 업로드 됐을 때 사건이 발생하는 것을 의미한다.
function()은 기본적으로는 발생하지 않다가 load라는 조건이 충족되었을 때 실행하는 것을 의미한다.
(2) var canvas = this.document.querySelector("")
document.querySelector("") 에서
"" 인 선택자와 일치하는 요소를 canvas에 반환하는 것을 의미한다.
이 경우 찾지 못하면 null이 나온다.
var canvas = document.querySelector(".game-canvas");
//docu가 보따리 //. 하면 태그가 아니라 클래스 명을찾음
//# 하면 HTML id로 찾는다. 못찾는다.
// undefined(null) 가 나온다.실제로는 이런 방식으로 선언해준다.
클래스 명인 선택자와 일치하는 요소를 canvas에 반환해주는 것을 의미한다.
이렇게 canvas 요소를 찾아 줄 수있다.
(3) /** @type {CanvasRenderingContext2D}; */
vscode에서 canvas 자동완성을 위한 것이다.
(4) 이미지 객체
var img = new Image();
img.src="./image/boy.png";
img.onload = function(){
var ctx = canvas.getContext("2d");
}What (정의) : 웹에서 이미지를 다루기 위한 다양한 속성과 이벤트 핸들러를 의미하는 객체이다.
Why (존재이유) : 웹에서 이미지를 다루기 위해서
How (방법)
new Image()로 객체를 만들어 준다.
이미지 객체의 속성으로서 img.src 는 이미지가 있는 url을 의미한다.
이미지의 이벤트 핸들러로서 onload는 이미지가 성공적으로 로딩되었을 때를 의미한다.
결국 본 함수는 이미지 로딩시 발생하는 함수로서 이해할 수있다.
이렇게 이미지가 성공적으로 로딩되면 캔버스를 이용하게 금 할 수있다.
(5) canvas 이용해보기
크게 3단계가 필요하다
1) canvas 요소찾기
앞서 querySelector를 이용해서 요소를찾았다.
2) 드로잉 객체 생성
img.onload = function(){
var ctx = canvas.getContext("2d");
}여기서 ctx란 canvs의 c / getContext 의 tx를 합친 약어이다.
여기서 getContext는 드로잉에 필요한 속성과 함수를 만들어 주는 객체를 생성하는 것을 의미한다.
한편 2d는 2d형식의 그림을 그릴 것 이기에 필요하다.
3) canvas 에 그리기
이후 다양한 속성과 함수를 이용해서 그리기가 가능하다.
var ctx = canvas.getContext("2d");
console.log(canvas);
//나온다 이렇게 canvas는 큰 도화지이다.
//이거는 그림판이나 포토샵 제작할수 있다.
//사용자가 그림 그릴수있게 해주는 도구로
ctx.fillStyle = "rgb(50, 100, 50)"; //색상
ctx.fillRect(30, 30, 100, 100); //크기
ctx.strokeStyle = "purple";
ctx.strokeRect(50, 50, 100, 300);정리하면 위에서 부터 그리면서 내려 갈 수있다.
그리는 도구로서 ctx의 참조명의 변수로서 그리기가 가능하다
fill 은 색채우기
여기서 fillStyle는 색을 채우는 사각형을 의미한다.
rgb로서 색상조절이 가능하다
한편 fillRect는 좌표및 크기 조절이다.
앞 두개는 좌표 / 뒤 두개는 크기를 의미한다
----
stroke는 선만 채우기
strokeStyle는 보라색으로 하기
strokeRect는 앞서 fill과 마찬가지이다.
1. 보충
2. 회고
canvas로서 조절이 가능한것은 좋지만, 한땀한땀 해주어야하는것이 다소 부담스러움이 없지안아 상존한다.
더 좋은방법이 있을거라 생각한다.
'배움 __IL > TIL 1기' 카테고리의 다른 글
| TIL : 26번째- 230103 [1-1-화] (0) | 2023.01.03 |
|---|---|
| TIL : 25번째- 230102 [1-1-월] (0) | 2023.01.02 |
| TIL : 23번째- 221229 [12-5-목] (1) | 2022.12.29 |
| TIL : 22번째- 221228 [12-5-수] (0) | 2022.12.28 |
| TIL : 21번째- 221227 [12-5-화] : js 시작 (0) | 2022.12.27 |