이 비디오에는 내가 만들고 싶은 몇 가지 작은 변화가 있습니다. 그리고 나서 이것을 약간 리펙토링 할 수있는 방법에 대해 이야기 할 것입니다.
그래서 첫 번째 변화는 우리가이 게임에서 승리 할 때입니다.
그럼 여기서 승리합시다.
우리는 가서 올바른 메시지를 얻었고 나는 다시 게임을 클릭합니다.
그것은 여전히 ​​정확하다고 말합니다.
그리고 우리는 그것이 정말로 빠른 변화 인 리셋을 원합니다.
우리가해야 할 일은 연극을 다시 클릭 할 때 실행되는 코드를 찾은 다음 여기에있는 범위를 변경하고 비어있게 만드는 것입니다.
그럼이 전체 화면을 만드는 것을 찾으러 가자.
그래서 우리가 바로 그 리셋 버튼을 클릭 할 때.
우리가해야 할 일은 우리가 메시지 디스플레이라고 부르는 디스플레이를 바꾸는 것뿐입니다.
그래서 우리는 여기 어디에서나 그렇게 할 것입니다.
메시지 표시 텍스트 ups 텍스트 내용은 빈 문자열과 같습니다.
그리고 그것이 어떻게 진행되는지 봅시다.
새롭게 하다.
좋아, 우리가 이기기 전 까진 클릭하십시오.
OK라고 써서 여기에 맞습니다.
그리고 내가 다시 연극을 클릭하면 사라집니다.
내가 만들고자하는 또 다른 약간의 변화는이 버튼이 사용자가 승리하면 다시 말해야한다는 것입니다.
그래서 나는 페이지를 새로 고칠 것이고 그것이 우리가 원했던 방식 인 새로운 색깔을 말합니다.
그런 다음 내가 이기면 다시 플레이하고 싶은지 묻습니다.
그런 다음 다시 재생을 클릭하면 버튼 텍스트가 새 색상으로 변경됩니다.
정말 약간의 차이점이 있지만 사용자가 방금 얻은 경우 다시 게임을하고 싶습니다.
따라서 우리 코드를 살펴보고 사용자가 선택한 색을 클릭 할 때 사용자가 게임에서이긴 장소를 찾아야합니다.
따라서 사용자가 올바른 색상을 클릭하면 리셋 버튼 텍스트가 텍스트 내용으로 변경되지만 사용자가 재설정 버튼을 클릭하면 변경 될 것입니다.
이 도트 텍스트 내용은 새 색상으로 돌아가고 재설정 버튼을 쓸 수도 있습니다.
그러나 리셋 버튼 이벤트 리스너 내부에 있기 때문에이 작업이 더 쉽습니다.
그리고 우리가 올바른 것을 얻을 때까지 우리가 빨리 새롭게하면 그것은 좋을 것입니다.
우리는 다시 놀고 싶다.
확실한.
이제는 새로운 색상으로 돌아가고 새로운 색상이 반복해서 표시 될 때마다 그리고 내가 이기면 다시 게임을 말하는 유일한 시간입니다.
그래서 정말 사소한 일이지만, 정말주의를 산만하게한다는 것은이 버튼 중 하나를 클릭 할 때 주위에 성가신 개요가 있다는 것입니다.
그리고 이것은 실제로 우리 브라우저가하는 일입니다.
그리고 우리는 그것을 끌 수 있습니다.
나는 당신이 스크린 캐스트에서 그것을 볼 수 있는지 모르지만 파란 윤곽선이있다.
그것은 꽤 유해합니다.
따라서 우리가 스타일 시트로 이동하면 여기에 버튼을 선택하면 윤곽선 없음을 작성하고 돌아가서 새로 고칠 수 있습니다.
이제 우리가 클릭하면 그 주위에 파란 윤곽선이 생기지 않습니다.
게임 논리를 위해 내가 원하는 모든 것입니다.
이제 우리는 코드를 리팩터링하는 데 약간의 시간을 소비하고자합니다.
그래서 돌아 가자.
나에게 가장 먼저 떠오르는 것은 여기에 하드 버튼 쉬운 버튼과 각각의 청취자가있는 코드이다.
그리고 그들은 그들이 일하는 방식이 매우 비슷합니다.
그 중 하나는 세 개의 사각형으로 작동합니다.
다른 하나는 6 개로 작동하지만 그렇지 않으면 기본적으로 동일한 작업을 수행합니다.
그래서 우리는 실제로 그 중복을 줄일 수 있습니다.
그리고 각자에게 이상을주는 것보다 우리가 할 일은 그 신분증을 없애고 그들에게 수업을 주면 그들은 같은 수업을 나눌 것입니다.
따라서 클래스는 모드라고합니다.
그래서 우리는 그들에게 클래스 모드를 제공 할 것입니다.
버튼이나 아이템이 두 가지 클래스를 가질 수 있다는 것을 기억하십시오.
그들은 단지 공백으로 구분해야합니다.
클래스 모드와 클래스가 선택되었습니다.
승인.
이제 우리는이 두 버튼을 여기서 지우고 모드 버튼이라는 버튼 목록을 만들 것입니다. 그리고 그것은 질의 선택자 인 문서가 될 것입니다.
Paul datt 모드.
그래서 두 개의 버튼이 있습니다.
그런 다음 모드 버튼을 반복합니다.
따라서 우리는 var가 0과 같아야합니다.
모드 버튼 깜짝 놀랄 정도.
또한 이것이 우리에게 할 일은 앞으로 중형 또는 보통 난이도 모드 또는 수퍼 하드 난이도 모드를 추가하려는 경우입니다.
추가 리스너를 추가 할 필요가 없습니다. 왜냐하면 우리는 모두를 선택하고 루프를 사용하기 때문입니다. 여기에 우리가 추가하는 모든 버튼에 대해 수동으로 작성해야합니다.
승인.
여기 루프를 마무리하십시오.
플러스 플러스.
그리고 우리가 할 일은 모드 버튼을 추가하여 이벤트 리스너 클릭을 추가하는 것입니다.
더 나아 가기 전에 실제로 코드를 주석 처리하여 새 코드에서 실행중인 내용과 해당 단추 중 하나를 클릭 할 때 발생할 일을 알릴 수 있습니다.
우선 우리가 원하는 것은 선택된 클래스가 적용되기 위해서입니다.
그래서 지금은 우리가 떠있을 때만입니다.
우리는 클릭 할 때 그 색깔을 원합니다.
그래서 우리는이 점 클래스 목록을 할 필요가있다. 우리가 쉬운 버튼과 하드 버튼을 사용하는 것 외에는 우리가 가지고있는 것과 똑같은 것을 선택한다.
우리는 이것을 클릭하여 무엇을 클릭했는지 나타낼 수 있습니다.
유일한 문제는 원본 광고도 해제해야한다는 것입니다.
그리고 이렇게하기 위해 우리는 하드 코드를 작성하고 모드 버튼을 작성하고 제로 점 클래스 목록 도트 제거를 선택한 다음 다른 것을 제거 할 것입니다.
두 버튼 만 있기 때문에.
이것은 문제가되지 않습니다.
우리가하고있는 일은 안전을 위해 두 버튼에서 제거한 다음 방금 클릭 한 버튼에 추가하는 것입니다.
이제 우리가 이것을 시험해보고 새로 고침하면됩니다.
방금 클릭 한 항목에 추가되고 다른 항목에서 제거 된 것을 볼 수 있습니다.
그래서 우리가 다음에해야 할 일은이 버튼들을위한 로직을 여기에 추가하는 것입니다.
그래서 우리는 몇 개의 사각형을 보여줄 것인지를 결정할 필요가 있습니다. 그러면 새로운 색상을 선택하여 우리가 클릭하려고하는 색상 인 새로운 선택을 선택해야합니다.
마지막으로 변경 사항을 반영하도록 페이지를 업데이트하려고합니다.
따라서이 모든 작업을 수행하기 위해 실제로 새로운 함수를 만들려고합니다. 함수를 재설정하려고합니다.이 단계를 반복하기 때문에 몇 군데에서 사용할 것입니다. 새로운 색상을 선택하여 색상 배열에서 새 색상을 선택하고 페이지를 업데이트하여 새로운 색상을 표시하고 여기에이 디스플레이를 업데이트하십시오.
우리는 그 일을 항상하고 있습니다. 그래서 나는 그 모든 것을 하나의 함수에 넣을 것입니다.
그래서이 함수 안에서해야 할 일은 실제로 여기에서 복사하는 것입니다.
우리는 이미 여기에서 이것을 수행했습니다.
나는이 모든 것을 우리의 리셋에 그대로 복사하려고했습니다.
그리고 무슨 일이 일어나는지 보도록하겠습니다.
따라서 마비 제곱 변수에 따라 임의의 색상을 재설정하거나 생성하는 대신 새 색상을 선택하여 색상 표시 내용을 변경합니다.
이 텍스트 콘텐츠는 새로운 색상과 동일합니다.
그리고 리셋 버튼을 언급하기 때문에 실제로 작동하지 않습니다.
그리고 리셋 버튼 중앙에 이벤트가있었습니다.
우리는 이제 reset이라는 별도의 함수 대신에 있습니다.
따라서 리셋 버튼으로 하드 코딩해야합니다.
그리고 나서 우리는 메시지 디스플레이를 공백으로 바꾸고 있습니다.
그리고 나서 우리는 모든 사각형을 반복하면서 색상을 업데이트하고 있습니다.
그리고 나서 8시 1 분의 배경을 파란색으로 변경합니다.
그리고 만약 우리가 여기서 대신에 호출한다면, 우리는 단지 리셋을 실행합니다.
우리가 감각 광장을 결코 업데이트하지 않는다는 것이 하나의 작은 문제입니다.
그래서 쉬운 버튼을 클릭하면 사각형 변수를 3으로 변경하고 싶습니다.
하드 버튼을 클릭하면 6으로 변경됩니다.
그래서 그 분을 바로 여기에 가서 if 문을 추가하면 우리가 할 수있는 것은이 텍스트 내용이 있다면 쓰는 것입니다.
텍스트 내용이 쉬운 것과 같으면 클릭 한 버튼입니다.
우리가하려고하는 것은 마비 된 사각형이 세 개의 L의 수 제곱에 해당한다고 말하는 것입니다.
그리고 리셋 기능을 호출합니다. 리셋 기능은 마비 제곱을 사용합니다. 리셋 기능에서 볼 수 있습니다.
우리는 무작위 색 생성 함수를 호출하기 위해 몇 개의 사각형을 사용하고 있습니다.
그래서 우리는 지금 우리가하고있는 사각형을 업데이트해야합니다.
실제로 이것을 쓰는 더 짧은 방법이 있습니다. 어떤 사람들은 큰 팬입니다.
삼항 연산자라고합니다.
그래서 나는 그것을 먼저 쓰고 어떻게 작동하는지 이야기하겠습니다.
따라서이 텍스트 내용은 같음 같음입니다.
쉬운 물음표.
Numb 사각형은 세 개의 콜론 마비 사각형이 6과 동일합니다.
여기이 한 줄은이 네 줄과 똑같은 일을합니다.
이 다섯 줄.
그래서 삼항 연산자라고합니다.
거기에 세 부분이 있습니다.
첫 번째는 조건입니다.
그래서이 텍스트 내용이 쉬운 것과 같고 그 다음에 사각형이 3과 같지 않은 것처럼 이것을 읽을 수 있습니다. 그렇지 않으면 사각형이 6이 아닙니다.
그래서 이것은 이것을 작성하는 한 방법 일뿐입니다.
그리고 나는 이것을 이렇게 유지할 것이다.
보통 하나의 값을 두 개의 서로 다른 가능한 옵션으로 설정하는 문장을 if 한 줄로 간단하게 만들면 삼항 연산자에 대한 좋은 유스 케이스가됩니다.
우리는 여전히 문제가 있습니다.하지만 우리는 실제로 숨어 있는게 아닙니다.
또는 정확한 제곱 수를 보여줍니다.
그래서 내가 새로 고침하면 어떻게 될지.
우리는 하드 모드에서 시작합니다.
그건 잘 작동합니다.
모든 것은 똑같이 작동합니다.
여기를 클릭해도 쉽게 여섯 개의 사각형을 볼 수 있습니다. 3 가지 색상을 생성했기 때문에 하단의 3 가지 색상 만 변경됩니다.
따라서 리셋 기능 대신에해야 할 일이 있습니다.
여기이 루프 대신 색상 배열의 색상과 일치하는 사각형의 색상을 변경합니다.
색상 배열에 세 개의 항목 만 있다면 실제로 수행해야하는 작업은 다른 세 개의 사각형을 숨기는 것입니다.
그래서 저는 if 문을 써서 작성하고 페인트 할 색이 있는지 확인하려고합니다.
나는 또한 다른 일을한다.
그래서 색상이 있다면 우리는 사각형의 배경색을 페인트하거나 바꿀 것입니다.
나는 그렇지 않으면 우리는 아무것도 표시하지 않는 사각형을 변경해야합니다.
그리고 그 것처럼 표시되도록 스타일을 지정해야합니다.
그래서 그것은 우리를 위해 그것을 숨길 것입니다.
그래서 쉬운 버튼을 클릭하면 3 가지 항목이 6 개의 사각형을 반복하고 다시 확인되는 색상의 배열이 있습니다.
해당 사각형과 일치하는 색상이 있고 처음 세 개의 색상이있는 경우
그래서 배경 색상을 배열의 색상으로 설정했습니다.
그러나 마지막 3 색은 내가 아니오가 될 것입니다.
또는 실제로 정의되지 않습니다.
거기에는 색깔이 없습니다.
그래서 그것은 거짓입니다.
그리고 나서 우리는 디스플레이가 none이되도록 설정합니다.
그래서 나는 그것이 어떻게 새로워지는지를 보여줄 것입니다.
쉬운 것을 클릭하면 아래쪽 3 개가 사라집니다.
쉽게 계속 클릭하면 세 가지 새로운 색상이 나옵니다.
게임을하자.
우리는 거기에 갈.
우리는 열심히 클릭하면 새로운 Bactrim 색상을 갖기 위해 여섯 개의 사각형을 모두 바꿀 수 있지만, 우리가 새로운 배경을 부여하기 전에 바닥에있는 세 가지가 주위를 돌아 다니기 위해 할 수있는 것을 숨기지는 않을 것입니다. 사각형에 색상.
나는 그들에게 보여줄 것입니다.
그래서 스타일 디스플레이가 블록 같다고 생각하는 사각형이 될 것입니다.
그래서 그것이 우리가 그들을 돌려 보내는 방법입니다.
그리고 우리는 6 명 모두에게 그렇게 할 것입니다.
그것은 큰 문제가 아닙니다.
그래서 우리가 배경색을 주면 항상 먼저 볼 수 있도록 할 것입니다.
그래서 우리가 새로 고치면 그들은 쉽게 경기에 나설 수 있습니다.
나는 열심히 클릭한다.
이제 우리는 6 명의 발신자를 얻습니다.
게임하자.
우리는 쉽게 클릭하고 3으로 돌아갑니다.
괜찮아.
그래서 여기서 많은 코드를 정리할 수 있습니다.
이전에는 훨씬 오래되었습니다.
적어도 3 배는 길다.
그리고 두 개의 서로 다른 클릭 된 리스너와 지금 우리의 코드는 비교적 다양합니다.
만약 중간 난이도 버튼을 추가하고 싶다면이 라인을 여기에서 바꾸십시오.
어쩌면 우리는 5 개의 정사각형을 원하거나 우리가 10 개의 정사각형을 가지고 번호 정사각형을 바꾸고 리셋 기능을 호출하여 리셋 기능을 사용할 수있는 슈퍼 난이도를 원한다면 리셋 버튼을 클릭 할 때 실제로 리셋 기능을 사용할 수 있습니다 .
그래서 우리가해야 할 일은 리셋 버튼 대신 모든 것을 교체하는 것입니다.
그래서 우리 코드를 많이 발전시킵니다.
방금 10 개 정도 줄을 없앴습니다.
그러니 괄호없이 저장하십시오.
브라우저로 가서 여전히 작동하는지 확인하십시오.
그럼 게임을 해 봅시다.
다시 재생을 클릭하면 정상적으로 재설정됩니다.
다른 게임을 쉽게 재생할 수 있도록 클릭하고 간단하게 재설정하겠습니다.
괜찮아.
그래서 우리는 코드를 꽤 많이 사용합니다.