on
자바스크립트, MOD4 프로젝트
자바스크립트, MOD4 프로젝트
이 모듈은 롤러코스터를 타본 적이 있습니다. 저는 자바스크립트의 많은 부분을 즐겼고 현대 인터넷 전체에서 배운 교훈을 볼 수 있습니다.
제가 이 모듈에 대한 제 프로젝트에 다가갈 때, 저는 흥분되고 제 관심사들로 정렬된 무언가를 하고 싶었습니다. 그래서 저는 간단한 픽셀 아트 웹 앱을 만들기로 했습니다. 제 머릿속에는 단순하게 들리지만, 그것을 만드는 것은 훨씬 더 어려운 것으로 나타났습니다.
저는 이 프로젝트를 하면서 많은 것을 배웠지만 제가 배운 중요한 교훈에 집중하고 싶었습니다.
관심이 있으시다면 여기 제 프로젝트에 대한 링크가 있습니다.
중요한 교훈
제가 배운 가장 큰 교훈 중 하나는 그림 그리기 앱에서 꽤 표준적인 그림 도구를 만들려고 했을 때입니다. 플러드 필 도구입니다. 이 아이디어는 밀폐된 영역 내부를 클릭하고 선택한 색으로 채우도록 하는 것입니다.
이것이 나를 재귀 라는 개념으로 이끈다. 가장 기본적인 의미에서, 재귀는 조건이 충족될 때까지 자신을 호출하는 함수입니다. 이 조건이 충족되면 기능이 작동을 중지합니다. 다음은 한 가지 예입니다(다음 정보는 javascript.info에서 제공합니다).
다음은 재귀 함수입니다.
function pow(x, n) { if (n == 1) { return x } else { return x * pow(x, n - 1) } } pow(2, 3) // 8
이 함수는 x를 사용하고 n 곱하기 또는 x를 n의 거듭제곱합니다. 먼저 n == 1인지 확인하면 숫자 x만 반환됩니다. 1의 거듭제곱은 숫자이기 때문입니다. n이 1과 같지 않으면 x * pow(x,n-1)를 반환합니다. n == 1까지 이 함수를 호출한 다음 최종 값을 반환합니다.
분명히 그것에는 더 많은 것이 있다. 하지만 이것은 제 초심자의 두뇌 수준입니다. 자세한 설명은 이 페이지를 참조하십시오.
이것이 내 도구와 어떤 관계가 있습니까?
픽셀 아트 앱의 구현은 테이블 셀을 사용하고 배경색을 변경합니다. 플러드 필이 작동하려면 클릭하는 위치에 인접한 셀에 대한 배경색 값을 확인해야 합니다. 배경색이 현재 색상과 일치하지 않으면 색이 바뀌고 다음 셀로 이동합니다. 재귀에 적합한 경우인 것 같네요. 다음은 제가 사용한 코드입니다(내 코드 전부는 아닙니다. 많은 연구가 진행되었습니다.)
function fillBucket(sr, sc, newColor, targetColor, current) { if (grid.rows[sr]) { current = grid.rows[sr].cells[sc] } if (sr < 0) { return } if (sc < 0) { return } if (sr > gridHeight.value - 1) { return } if (sc > gridWidth.value - 1) { return } if (grid.rows[sr].cells[sc] !== current) { return } if (current.style.backgroundColor === targetColor) { current.style.backgroundColor = newColor } else { return } fillBucket(sr - 1, sc, newColor, targetColor, current); fillBucket(sr + 1, sc, newColor, targetColor, current); fillBucket(sr, sc - 1, newColor, targetColor, current); fillBucket(sr, sc + 1, newColor, targetColor, current); }
기본적으로 사용자가 클릭하는 4개의 셀(위, 아래, 왼쪽, 오른쪽)을 확인하고 일치하지 않을 경우 색상을 변경합니다. 이것은 이것을 성취하는 느린 방법이다. 수표가 많이 필요해요. 그래서 채워야 할 면적이 크면, 속도가 느려질 수 있습니다. 이것을 더 빨리 할 수 있는 다른 반복적인 방법들이 있지만 나는 이미 깊은 물에서 수영하고 있었고 나 자신을 더 혼란스럽게 하고 싶지 않았다.
결론
이 일을 하는 것은 어려웠지만 중요한 교장선생님을 가르쳐 주었고 프로그래머로서 더 깊이를 주었습니다. 그것은 제가 겉보기에는 간단해 보이는 기능을 프로그래밍하는 것에 대한 생각을 이해하는데 도움을 주었습니다.
from http://gong-tech.tistory.com/46 by ccl(A) rewrite - 2021-09-25 02:27:48