다시 오신 것을 환영합니다.
이 비디오에서는 게임의 어려움에 영향을 줄 수있는 쉽고 간단한 버튼을 추가하는 데 중점을 둘 것입니다.
따라서 페이지를로드 할 때 하드가 이미 선택되어 있으며 여섯 개의 다른 버튼이나 여섯 개의 다른 사각형이 표시됩니다.
그리고 난 쉽게 클릭 할 수 있고 그 상태로 남아 있습니다.
그리고 우리는 선택할 수있는 세 개의 사각형 만 있습니다.
그리고 나서 나는 마음으로 돌아갈 수 있습니다.
우리는 우리가 필요로하는 두 개의 버튼을 추가함으로써 시작할 것입니다.
그래서 저는 HMO에 들어가 두 개의 버튼을 추가 할 것입니다.
우리가 쉽게 말할 수있는 첫 번째 것.
두 번째 것은 열심히 말하고 새로 고침합니다.
승인.
그리고 지금은 괜찮아 보입니다.
우리 스팬이 아직 공간을 차지하지 않는다는 것을 알 수 있습니다.
그리고 몇 가지 텍스트가 나타납니다.
버튼을 밀면 나중에 스타일에 초점을 맞 춥니 다.하지만 스타일을 적용 할 요소 중 하나는 페이지가로드 될 때 선택되어 보이게하거나 스타일을 선택하는 것이고 해당 버튼은 파란색으로 유지되어야합니다.
그리고 우리가하는 일은 수업을 사용하고 수업을 켜고 끄는 것입니다.
그래서 저는 여기에 클래스를 정의 할 것입니다. 그리고이 스타일을 여기 스타일링하는 것보다 간단 할 것입니다. 그냥 색상이 될 것입니다.
그래서 우리의 배경색과 클래스는 그것이 우리가하는 일이기 때문에 selected라고 부르게 될 것입니다.
선택한 클래스에 선택한 클래스를 추가합니다.
그리고 그것은 시작해야 할 배경을 갖게 될 것입니다.
그리고 나서 우리가하려고하는 것은 하드 모드 버튼 클래스를 똑같이 선택하는 것입니다.
코드를 새로 고치면 열심히 노력하고 있음을 알 수 있습니다.
그것은 끔찍한 예입니다. 그러나 적어도 우리가 하드 모드에 있다는 것을 보여줍니다.
따라서 우리가하고 싶은 것은 쉽게 전환 할 수있는 코드를 추가하는 것입니다. 가장 쉬운 부분은 마음을 클릭 할 때 쉽고 6 가지 색상을 클릭 할 때 세 가지 색상을 보여줍니다.
승인.
여기서 시작합시다.
이 버튼들을 실제로 작동하게 만들려면 자바 스크립트에서 그들을 선택하고 몇 가지 빠른 수신기를 가지고 각각을 클릭 할 때 코드를 실행해야합니다.
따라서 선택하기가 더 쉬워 지도록하고 각각의 ID를 쉽게 부여하여 시작할 것입니다.
DTN, 그리고 하드 ETN 그리고 여기에 붉은 깃발이 보이거나 너무 많은 아이디어를 사용하고 있다고 생각한다면 우리는 이것을 바꿀 것입니다.
우리는 잠시 후에 이것을 리 팩토링 할 것입니다.
하지만 두 개의 서로 다른 ID로 시작하겠습니다.
쉬운 단추 하드 단추.
자바 스크립트로 이동하여 선택하십시오.
그래서 var easy ETN은 Octa를 가진 문서 문서 질의 선택 자와 동일합니다.
쉬운 ETN.
우리는 물건을 똑같이 사용하는지 확인하십시오.
우리는 거기에 갈.
그리고 열심히 일하는 것과 똑같은 일을 당신이 숭고한 태도로 받아들 였는지 나는 알지 못합니다.
'쉬운 단어'를 선택하고 Kamandi를 누르면 자동으로 다음 인스턴스가 선택되며 모든 작업을 계속 선택할 수는 있지만이 두 가지를 원한다면 대신 입력 할 것입니다.
그래서 우리는 두 개의 버튼을 가지고 있습니다. 그러면 우리는 이와 같은 것을 할 수 있습니다.
쉬운 PTEN은 이벤트 리스너를 추가합니다.
클릭하기 만하면 우리는 간단 버튼이 이런 식으로 종료된다는 사실을 경고합니다.
알기 쉬운 버튼을 클릭하고 올바르게 작동하는지 확인하십시오.
Easy 버튼을 클릭하면 하드 버튼이 복제되고 하드 버튼은 종료되고 쉽게 새로 고침이 진행되고 하드라고 표시되지만 하드 버튼이 클릭되었음을 알려줍니다.
따라서 단순히 클래스를 선택 클래스를 선택하여 어떤 클래스가 선택되었는지를 반영하도록 노력하십시오.
그래서 우리가 쉬운 버튼을 클릭하면 우리가하고 싶은 모든 것이 쉬운 버튼입니다.
Doc 클래스 목록을 추가하고 지금 새로 고침하면 쉽게 클릭합니다.
선택한 클래스가 있습니다.
쉽지만 문제는 여전히 하드 버튼에 남아 있기 때문에 쉽게 고칠 수 있습니다.
우리는 하드 버튼을 가지고 싶습니다. 크로스리스트 점을 제거하고 쉽게 클릭하면 하드 모드가 사라집니다.
그러나 우리가 열심히 클릭하면 우리는 여전히 그 논리를 가지고 있지 않으므로이 코드를 복사하여 해결할 수 있습니다. 이제는 선택을 제거한 선택한 쉬운 단추 클래스 목록을 추가하는 클래스없는 하드 단추가 생깁니다.
확인해 보겠습니다.
괜찮아.
이제 우리는 여섯 가지 요소가 있기 때문에 어느 것이 현재 선택되어 있고 새로 고침되고 하드가 자동으로 선택되는지 보여주는 두 개의 버튼 인 더 쉬운 부분을 완성했습니다.
다음으로 우리는이 버튼의 스타일뿐만 아니라 실제로 세 개의 요소 또는 여섯 개의 사각형을 표시하는 데 어려움을 변경하는 논리를 추가해야합니다.
따라서 우리는 시작하기 전에 다음 단계로 진행해야합니다.
솔루션의 작동 방식을 다시 확인해 봅시다.
따라서 새로 고침하고 쉬운 색상을 클릭하면 새로운 색상을 얻을 수 있습니다. 여기에 6 가지 색상이 있고 여기에서 선택한 색상이이 3 가지 색상 중 하나 일 수 있으므로 클릭해야합니다. 그 3 개는 제거됩니다.
그래서 그것은 꽤 게임을 깨뜨리는 버그가 될 수 있습니다.
그래서 우리는 3 가지 새로운 색상을 선택하려고합니다.
그래서 과정은 우리가 그것을 새롭게합니다.
그래서 프로세스는 내가 쉬운 버튼을 클릭 할 때 색상 배열을위한 세 가지 새로운 색상을 생성하려고합니다.이 색상 배열에서 세 가지 색상 중 하나를 선택하게됩니다.
우리는 선택된 색상으로 나타나는 것을 업데이트 할 것입니다.
여기서 세 개의 사각형을 업데이트 할 것입니다.
그리고 중요한 부분은 세 개의 다른 사각형을 숨기므로 display를 none으로 설정하여 숨기지 않도록 삭제하는 것입니다.
그리고 똑같은 일이 열심히합니다.
colors 배열에 6 개의 새로운 색상을 생성합니다.
우리는 하나를 골랐다.
그걸 여기에 표시합니다.
그런 다음 바닥에있는 세 개의 사각형을 보여주고 각 사각형에 색상을 지정합니다.
승인.
이제이 문제를 해결해 보겠습니다.
우선 쉬운 버튼을 클릭하면 거기에서 시작합시다.
우리는 이번에는 색상이 같아서 임의의 색상을 생성하도록 새로운 색상을 생성하려고합니다.
그리고 나서 우리가 그 일을 마친 후에는 새로 고른 색을 고르고 싶기 때문에 고른 색은 그 색과 똑같습니다.
그래서 일단 우리가 우리의 색과 선택한 색상을 가지면 우리는 여기서 새로운 그림 색을 보여주기 위해 여기의 디스플레이를 변경함으로써 시작할 수 있습니다.
색상 표시 텍스트 내용이 선택된 색상과 같다고 말하는 것이 쉽습니다.
그리고 새로 고침하면 몇 가지 새로운 색상을 얻을 수 있습니다.
색상이 변경되기 전에 언급 한 것처럼 쉽게 클릭하면 변경되는 색상 배열이 있습니다.
그럼 지금 어떤 색상이 있는지 살펴본 다음 easy 모드를 클릭하고 다시 어떤 색상을보고 다른지 확인해보십시오.
그리고 그것은 또한 색깔을 고른 다르게 골랐다.
이제 쉬운 모드를 클릭하거나 세 가지 숨김을 숨길 때 세 개의 하위 div를 숨기는 방법에 대해 이야기 해 봅시다.
그건 중요하지 않아.
그러나 우리가 할 수있는 방법은 아래를 3 번 ​​반복하는 것입니다.
그래서 어떻게 작동하는지 보여 드리겠습니다.
나는 그 중 하나를 고르겠다.
문서 쿼리 선택기를 모든 정사각형 또는 사각형으로 만든 다음 다섯 번째 정사각형으로 작업 해 봅시다.
실제로 다섯 번째 인덱스가있는 여섯 번째 하나는 그 스타일 디스플레이를 none으로 설정합니다.
그리고 그것이 사라지는 것을 보게 될 것입니다.
그리고 하드 모드를 클릭하면 스타일을 말할 필요가 있습니다.
표시는 잠금과 동일합니다.
괜찮아.
이제 코드를이 코드로 구현해 보겠습니다. 먼저 6 개 모두를 반복하는 것입니다.
그리고 처음 세 가지를 위해 우리는 그들에게 새로운 색을 줄 것입니다.
그리고 바닥 3에 대해서는 우리가 숨길 것입니다.
따라서 두 개의 루프를 사용하는 것보다 한 번에 할 수 있습니다.
그래서 var I는 0입니다.
길이가 제곱보다 작습니다.
게다가 색상에 3 가지 항목이 있다는 사실을 활용할 것입니다.
그래서 우리는 색깔 I라면 이렇게 할 것입니다.
그래서 만약 다음 색이 있다면 이것은 처음 세 번에 일어날 것입니다.
우리는 배경이 색깔과 같은 스타일로 사각형을 쓸 것입니다.
따라서 색상은 세 개의 항목 만 있기 때문에 첫 번째 3 개의 경우에 모든 사각형을 반복하고 해당 색인에 색상이 있는지 확인합니다.
그리고 있다면 우리는 처음 세 가지 색깔을 바꿀 것입니다.
그럼 작동하는지 확인합시다.
나는 쉽게 클릭하고 상위 3 개 만 변하는 것을 볼 수 있습니다.
그래서 우리는 가깝습니다.
우리가 지금하고 싶은 것은 아래 3 가지를 숨기는 것입니다.
그래서 우리는 다른 사람들과 그것을 할 것입니다.
정사각형 나는 표시가 없음과 같은 스타일입니다.
쉬운 모드를 클릭하면 화면을 새로 고침하여 전체 화면으로 만들면 아래쪽 3 개를 잃어 버리고 상위 3 개 색상이 바뀌는 것을 볼 수 있습니다.
그리고 이것이 어느 것이 었는지 알아 내려고합시다.
그래서 백 육십 삼 붉은 색 125 녹색과 조금 푸른 색.
우리는 거기에 갈.
좀 더 시도해보십시오.
이 중 일부를 새로 고치고 쉬운 모드를 클릭하면 작은 문제가 하나 있습니다.
여기서 세 가지 색상 만 생성합니다.
그러나 새 색상 버튼을 클릭하면 현재 어떤 색상이 표시되는지 알려 드리겠습니다.
그것은 세 가지 항목입니다.
그래도 새로운 색상을 클릭하면 색상을 보게됩니다.
사실 6 개 항목이며 이는 우리가 어떤 모드를 사용하고 있는지 추적하지 않기 때문입니다.
그래서 그 코드가 리셋 버튼에 있습니다.
우리는 색상이 임의의 색상을 생성하는 것과 동일하다는 것을 말하고 있습니다.
그래서 우리는 결국 그것을 고쳐야합니다.
그러나 우리가하기 전에 우리의 하드 버튼을 가져 와서 우리를 6 개의 정사각형으로 되돌려 놓고 각자 자신의 색으로 그 색을 만듭니다.
나는이 코드 중 일부를 가져 와서 여기에 복사하여 항상 나쁜 기호입니다.
이것이 우리가 리팩토링하는 이유입니다.
그래서 내가하고 싶은 첫 번째 일.
하드 버튼 이벤트 리스너 색상으로 모두 복사 할 것입니다.
그것은 6 색 선택 될 것입니다 색깔은 동일한 텍스트 표시 내용이 동일합니다.
그리고 나서이 루프에서 모든 것을 반복 할 것입니다.
우리는 두 가지 다른 일을해야합니다.
첫 번째는 모든 사각형에 새 색상을 지정하는 것입니다.
그러나 우리는 잠재적으로이 3 가지가 하단에 숨겨져 있는지 확인해야 할 필요가 있습니다.
이제는 if 문을 없애고 모든 사각형을 배경색으로 설정하여 색을 지정합니다.
모든 사각형에는 블록이 표시됩니다.
그래서 우리는 기술적으로 마지막 3 개만 필요하기 때문에 조금 낭비가됩니다. 그리고 모두를 디스플레이 블록으로 재설정하고 있습니다.
그러나 그것은 나중에 우리가 집중할 수있는 사소한 일입니다.
이 작업이 새로 고침되면 36 행에 구문 오류가 있음을 알 수 있습니다. 우리가 누락 된 부분을 살펴 보겠습니다.
여기에 여분의 중괄호가 있습니다.
그래서 우리가 지금 저장하고 새로 고침하면 우리는 항상 가지고있는 것처럼 여섯 가지 색깔을 갖습니다.
쉬운 것을 클릭하면 3이됩니다.
열심히 클릭하면 이제 6으로 돌아갑니다.
나는 여기에 새로운 색을 입히고 그것이 계속 작동하는지 확인합시다.
하드 모드에 들어가면 하드 쉽기 때문에 쉽게 하드.
새로운 색상을 다시 클릭합시다.
쉽게 다시 하드 쉽고 어렵게 돌아갑니다.
괜찮아.
그리고 이것을 연주하고 그것이 작동하는지 봅시다.
그래서 색상은 196 170 57입니다.
많은 사람들이 많은 녹색과 푸른 색을 많이 읽었습니다.
그래서 그것은 많은 빨강과 초록색이 노란색입니다.
그래서 그것은 그 하나 또는 그 하나가 될 수 없습니다.
그 중 하나가 진짜 빨리 될 것입니다 그리고 그것은 잘 작동하는 것 같습니다.
쉽게 다시 클릭하면 세 가지 색상으로 돌아갑니다.
우리가 직면 한 가장 시급한 문제는 쉬운 모드에있을 때 나는 다시 3 번 6 색을 생성하고 6 번 중 임의의 색을 선택하여 재생할 것입니다. 문제를 해결하는 것.
우리가해야 할 일은 우리가 어떤 모드를 사용하고 있는지 추적하는 변수를 갖는 것뿐입니다.
쉽거나 단단한 또는 정사각형 3 또는 6의 수.
그래서 우리가 여기서 해낼거야.
우리는 제곱의 수라고 불리는 변수를 가질 것이고 그것은 6에서 시작될 것입니다. 그리고 우리는 여기에 그것을 선언하고 색상이 숫자의 임의의 색상을 생성하고 그것을 제곱 또는 제곱의 수로 만들어 보자고 말합니다.
그것은 조금 더 쉽고 저장하기 쉽습니다.
그런 다음 몇 군데를 대체해야합니다.
그래서 우리가 쉬운 모드를 클릭하면 마비 제곱이 3이되게하고 사각형이없는 임의의 색상을 생성합니다.
그런 다음 하드 버튼을 클릭하면 일부 사각형이 6이되도록 마비 제곱이 6이되고 무작위 색상 사각형이 생성되고 그 다음 재설정 버튼을 클릭하면 여기에 몇 개의 다른 장소가 있습니다.
우리는 거기에 Nahm 사각형이 될 정확한 색상 수를 생성하려고합니다.
그래서 우리가 돌아가서 새로 고침하면 그것은 우리를 위해 그것을 돌봐 줘야합니다.
우리는 쉬운 모드로 가서이 모드에서이기겠습니다.
그래서 대부분 붉은 색을 띤다.
이건 아니야.
그거 아니야.
우리는 거기에 갈.
그리고 다시 연주를 클릭하면 색상을 입력 할 때 3 가지 색상 만 보도록하겠습니다.
그리고 픽업 된 색상을보고 색상을 선택하면 색상 배열 안에 있음을 알 수 있습니다.
그래서 우리는 더 이상 걱정할 필요가 없습니다.