치춘짱베리굿나이스

spread 문법 배열 또는 객체 안에 있는 내용물들을 전개하는 역할을 한다 배열에 스프레드 구문을 사용할 경우, 배열을 감싸는 대괄호가 사라지고 내용물만이 반환된다 배열 스프레드를 이용하여 배열 합치기 let arr1 = [var1, var2, var3]; let arr2 = [...arr, var4, var5]; //[var1, var2, var3, var4, var5] let arr3 = [...arr, ...arr] //[var1, var2, var3, var1, var2, var3]; 스프레드 구문은 한 배열을 만들 때 여러 번 사용 가능하다 객체 스프레드를 이용하여 객체 합치기 let obj1 = { var1: 'hello', var2: 'good afternoon&#39..

비구조화 할당 / 구조분해 할당 배열이나 객체의 속성을 해체하여 개별 변수에 그 값을 담을 수 있는 문법 구조를 분해해서 각각의 원소를 할당하기 때문에 구조분해 또는 비구조화 할당이라고 불린다 쉽게 말하면 오른쪽의 배열 / 객체 원소를 왼쪽의 [] 또는 {} 로 감싸진 변수들에 각각 할당해주는 문법이다 배열 비구조화 할당 let [a, b] = [1, 2] // a = 1, b = 2 좌측 배열의 길이와 우측 배열의 길이가 같을 경우, 순서대로 일대일 대응한다 let [a, b, c] = [1, 2, 3, 4, 5] // a = 1, b = 2, c = 3 좌측 배열의 길이가 우측 배열의 길이보다 짧을 경우, 좌측 배열 기준으로 값을 할당한다 let [a, b, c] = [1, 2]; // a = 1, ..

미디어 쿼리 미디어 쿼리란? 현재 브라우저 또는 장치 환경이 프로그래머가 정의한 규칙에 부합할 때 특정 css를 적용하도록 해주는 구문 특히 반응형 웹을 만들고자 할 때 화면 크기에 따라 서로 다른 css 스타일을 적용하기 위해 많이 사용한다 미디어 쿼리 기본 @media media-type and (media-feature-rule) { /* CSS rules go here */ } 구성 요소 @media 미디어 쿼리의 시작 부분 media-type 미디어 유형 all, print, screen, speech 네 가지 중 하나를 지정할 수 있다 all: 모든 장치에 적용 (기본값) print: 인쇄 결과물 및 출력 미리보기 화면에 적용 screen: 화면에 적용 speech: 음성합성장치에 적용 논리합..

텍스쳐 입히기 직전에는 벽에 단색을 입혔지만 이번엔 텍스쳐를 입혀보자 벽이 왜곡되어 보여야 하므로 어느 높이에 어떤 텍스쳐 색을 넣어야 할 지 계산해야 한다 동서남북 텍스쳐 저장하기 .xpm 또는 .png 파일을 불러와서 포인터 배열 또는 구조체에 저장해둔다 perpWallDist 구하기 Raycasting 구현 - 화면에 벽 그리기 의 방법으로 perpWallDist를 구한다 벽이 바라보는 위치 구하기 벽이 바라보는 방향이 어느 쪽인지 (동서남북) 에 따라 다른 텍스쳐를 적용해야 하므로, 부딪힌 광선의 방향을 가진rayDirX와 rayDirY, 벽이 위치한 축 (x 또는 y)을 담은 side 변수를 사용하여 벽의 방향을 구한다 벽의 x축 거리의 비율 구하기 광선이 벽의 어느 지점에 닿았는지 구해야 텍스..

키 이벤트 시야 회전 (←, →) 플레이어의 시야를 좌우로 회전하기 위해선 시선 (dir벡터 : dirX, dirY) 과 카메라평면 (plane벡터: planeX, planeY) 이 같이 회전되어야 한다 시선 (dir) 회전하기 dirX = dirX * cos(theta) - dirY * sin(theta); dirY = dirX * sin(theta) + dirY * cos(theta);카메라평면 (plane) 회전하기 planeX = planeX * cos(theta) - planeY * sin(theta); planeY = planeX * sin(theta) + planeY * cos(theta);캐릭터 이동 (w, a, s, d) 카메라평면 (plane) 과 시선벡터 (dir) 는 방향벡터이며, ..

화면에 벽 그리기 이번 예제에서는 텍스쳐 대신 색상을 사용하여 벽을 그린다 벽의 높이 계산하기 카메라 평면부터 벽까지의 거리를 구했으니 이제 벽의 높이를 계산하고, 실제로 화면에 벽을 그릴 단계에 왔다 가중치 없는 기본값으론, 카메라 평면과 벽 사이 거리가 정확히 1일 때 벽의 높이가 height와 일치한다고 가정한다 화면상 표시되는 벽의 높이는 카메라 평면과 벽 사이의 거리 (perpWallDist) 에 비례한다 이때 취향에 따라 height를 보정하여 사용하여도 상관 없다 height의 가중치가 클 수록 벽의 높이가 높아진다 벽을 그리기 위한 벽의 시작점, 끝점 계산 startPoint = (height / 2) - (lineHeight / 2); if (startPoint < 0) startPoin..

광선 이동거리 계산 및 보정 어안렌즈 효과 방지하기 화면에 벽을 출력할 땐 카메라 평면 (plane ⇒ 선) 기준으로 출력됨에도 불구하고 플레이어 기준 (pos ⇒ 점) 으로 거리를 계산하기 때문에 카메라 평면으로부터 벽까지의 거리가 제각각이 된다 카메라 평면의 끄트머리에 가까울 수록 벽까지의 거리가 과도하게 길어져 실제 카메라 평면까지의 거리보다 훨씬 멀게 연산되며 이는 화면의 왜곡을 초래한다 어안렌즈 효과를 방지하기 위해 광선이 벽에 도달했다 하더라도 광선의 이동거리를 바로 구하지 않는다 어안렌즈 효과를 방지한다면 플레이어 시점 (점) 이 아니라 카메라 평면 (선) 까지의 거리를 계산하므로 광선이 정확히 어느 지점에 부딪혔는지도 구할 필요가 없다 perpWallDist 광선의 적중 지점과 카메라 평면..

반복문의 동작 주의할 점 Lodev는 y가 아래에서 위로 증가하는 좌표계를 사용하였는데, 레이캐스팅 구현 시에 이 부분을 신경쓰지 않으면 이동 방향이나 회전 방향이 반대가 된다 각 벡터의 용도를 확실히 알고 구현해야 플레이어의 현재 상태에서 어떤 방향 또는 값을 갖는지 명확하게 알고 디버깅할 수 있으므로 코드를 작성하기 전 각 변수의 의미를 확실히 알고 가는 것을 추천함 위의 이미지 또한 어떻게 구현하는가에 따라 틀릴 수 있다 1. stepX, stepY 설정 if (rayDirX < 0) stepX = -1; else stepX = 1; if (rayDirY < 0) stepY = -1; else stepY = 1; 현재 광선의 방향에 따라 stepX와 stepY를 설정한다 광선의 방향은 rayDirX..