커피 스크립트를 사용하면 문자열 보간을 허용하여 가독성을 높이고 복잡성과 코드 길이를 줄입니다. 문자열 내에 #{}를 추가하고 버팀대 내의 함수 호출에서 변수 또는 반환 값을 삽입 할 수 있습니다.
addnotification 방법은 CoffeeScript에서 매개 변수를 정의하는 방법을 보여줍니다. 화살표 앞에 (->)을 씁니다
PHP와 유사한 매개 변수에 대한 기본값을 제공 할 수 있습니다.<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span> <span><span><span><header</span> class<span>="text-center"</span>></span>
</span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span>
</span>
<span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span>
</span> ...
<span><span><span></form</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
기본 매개 변수가있는 함수가 컴파일되면 다음으로 변환됩니다.
마지막으로, AddListeners 메소드 : 로 돌아가 봅시다
여기서 Coffeescript는 No, Yes, Off 및 On과 같은 진실 및 거짓 가치를 나타내는 추가 키워드를 제공합니다. 또한! ==, ===, &&,! ISNS, IS, 그리고 그에 따라 사용하지 않는 사용을 대표 할 수 있습니다. <span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>
당신은 if ... then ... else ... 구문. 를 사용하여 읽기 쉬운 단일 라인 조건부를 만들 수 있습니다.
게임의 메커니즘
whorse method checkend는 플레이어가 움직일 때마다 승자가 있는지 확인합니다. 보드 위에 반복하고 X와 O에 속하는 제곱을 계산하여이를 수행합니다. 먼저 대각선 축을 확인한 다음 수직, 수평을 확인합니다.
보시다시피, 이것은 또 다른 편리한 커피 스크립트 기능을 사용합니다.
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>
이것은이 순서로 0, 1 및 2에 해당하는 행을 세 번 루프합니다. 또는 [0 ... 2] (독점 범위)는 단지 두 개의 반복만으로 0과 1에 해당하는 행을 설정합니다.
수평 점검에서 우리는 루프의 일부가 무엇인지, 루프 외부에있는 내용을 결정하는 데 어떻게 들여 쓰기가 중요한지 다시 알 수 있습니다. 체크 필드 호출은 내부 루프 안에 있습니다. .
이것은 Checkfield의 모습입니다 :
이 방법은 사용을 보여줍니다. 조건부의 변수 옆에 삽입 될 때 키워드 :
는 분명히 매우 편리합니다.
Checkfield 메소드가하는 일은 클릭 한 제곱의 클래스 이름에 따라 X 또는 O 속성의 적절한 축에 하나를 추가하는 것입니다. AddListeners 메소드에서 사용자가 빈 보드 정사각형을 클릭하면 클래스 이름이 추가됩니다.
이것은 우리를 Checkwin 메소드로 데려옵니다.이 방법은 플레이어 중 하나가 게임에서 승리했는지 확인하는 데 사용됩니다.
CoffeeScript에서는 ... 배열에서 배열 값을 루프하기 위해 사용할 수 있고 객체의 특성을 통해 루프를위한 객체 값을 사용할 수 있습니다. Checkwin은 이것을 사용하여 X 및 O 객체 내부의 모든 속성을 확인합니다. 그들 중 하나라도 3보다 큰 숫자를 보유하고 있다면, 우리는 승자가 있고 게임은 끝나야합니다. 이 경우, 우리는 LocalStorage를 통해 플레이어의 결과를 지속하는 AddToscore 방법을 호출합니다.
로컬 스토리지에 관한 단어
LocalStorage는 웹 스토리지 사양의 일부이며 브라우저 지원이 매우 좋습니다. 이를 통해 사용자의 컴퓨터에 데이터 (쿠키와 유사)를 저장하고 원할 때마다 액세스 할 수 있습니다.
예를 들어 일반 객체의 속성과 마찬가지로 여러 가지 방법으로 API에 액세스 할 수 있습니다.
로컬 스토리지는 항상 문자열을 저장하므로 객체 나 배열을 저장하려면 배열/오브젝트를 저장할 때 json.stringify를 사용해야합니다. 우리의 AddToscore 방법은이 사실을 활용합니다 :
커피 스크립트 (json.stringify)에서 괄호를 생략 할 수있는 방법을 보여줍니다.
다음에 몇 가지 유틸리티 방법이 있습니다. 우리는 빈스토라 지바르를 사용하여 특정 수평 행 또는 대각선의 내용을 지우고 있습니다. 보드에 두 개의 대각선이 있고 Chekend 메소드 내부에는 두 개의 대각선에 대해 동일한 데이터 속성을 사용하기 때문에 필요합니다. 따라서 두 번째 대각선을 확인하기 전에 속성을 지워야합니다. 수평 행도 마찬가지입니다
플레이어 이름을 얻는 <span><span><span><div</span> class<span>="wrapper"</span>></span>
</span> <span><span><span><header</span> class<span>="text-center"</span>></span>
</span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span>
</span>
<span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span>
</span> ...
<span><span><span></form</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
게임 시작시 플레이어 이름이있는 양식이 제출되면 기본 조치를 방지하고 JavaScript를 사용하여 제출물을 처리 할 수 있습니다. 빈 이름이 있는지 또는 두 이름이 모두 동일했는지 확인하고 그렇다면 친숙한 경고를 표시합니다. 그렇지 않으면 tic.initialize (). 를 호출하여 게임을 시작합니다
최종 라인은 이벤트 대표단을 사용하여 클래스 플레이 가인으로 클릭에 응답하는 요소를 갖습니다. 이 요소는 게임이 완료되면이 요소가 페이지에만 추가되므로 이벤트 대표가 필요합니다. DOM이 처음 렌더링되면 존재하지 않습니다.
모든 것을 합쳐
그리고 그게 다야. 150 줄 미만의 커피 스크립트에서 우리는 작업 게임이 있습니다. 잊지 마십시오. github 에서이 자습서에서 코드를 다운로드 할 수 있습니다.
Codepen에서 sitepoint (@sitepoint)의 펜 tic-tac-toe를 참조하십시오
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>
결론
이 튜토리얼이 커피 스크립트에 대한 지식을 강화하고 jQuery와 CoffeeScript가 어떻게 함께 작동 할 수 있는지 보여 주었으면합니다. 게임을 개선하기 위해 할 수있는 일이 많이 있습니다. 예를 들어 보드를 표준 3 × 3 치수와 다르게 만드는 옵션을 추가 할 수 있습니다. 플레이어가 기계와 경기를 할 수 있도록 간단한 AI를 구현하거나 게임에서 폭탄을 구현할 수 있습니다 (예 : 임의의 게임 이동에서 임의의 X 또는 O를 추가하여 플레이어가 영광을 위해 싸우는 동안. 커피 스크립트 및 Tic TAC 발가락 게임에 대한 자주 묻는 질문 (FAQ)
Tic Tac Toe 게임을 만들기 위해 CoffeeScript로 시작하려면 어떻게 될까요?
CoffeeScript로 시작하려면 Tic Tac Toe 게임을 만들려면 먼저 커피 스크립트를 기본적으로 이해해야합니다. Coffeescript는 JavaScript로 컴파일하는 작은 언어입니다. 자바 스크립트의 기발한 부분을 피하는 더 나은 구문을 제공하며 여전히 언어의 유연성과 아름다움을 유지합니다. 공식 웹 사이트 또는 기타 온라인 리소스에서 CoffeeScript의 기본 사항을 배우는 것으로 시작할 수 있습니다. 기본적인 이해가 나면 Tic Tac Toe 게임 코딩을 시작할 수 있습니다. CoffeeScript 컴파일러를 사용하여 코드를 작성한 다음 JavaScript로 컴파일 할 수 있습니다. CoffeeScript에서 Tic Tac Toe 게임의 기본 구성 요소는 무엇입니까?
기본 구성 요소는 무엇입니까? CoffeeScript의 Tic Tac Toe 게임은 다른 프로그래밍 언어와 유사합니다. 여기에는 게임 보드, 플레이어 및 게임 논리가 포함됩니다. 게임 보드는 플레이어가 자국을 배치하는 3 × 3 그리드입니다. 플레이어는 보통 두 명이며, 차례로 점수를 게임 보드에 놓습니다. 게임 논리에는 플레이어의이기는 방법, 게임이 무승부 일 때 어떻게되는지 등 게임의 규칙이 포함되어 있습니다.
커피 스크립트에서 Tic Tac Toe 용 게임 보드를 만드는 데 3 × 3 행렬을 정의하는 것이 포함됩니다. 배열 배열을 사용하여 수행 할 수 있습니다. 각 내부 배열은 게임 보드의 행을 나타내고 내부 배열의 각 요소는 게임 보드의 셀을 나타냅니다. 처음에는 모든 세포가 비어 있습니다. 플레이어가 움직일 때, 매트릭스의 해당 셀이 플레이어의 마크로 업데이트됩니다. 커피 스크립트에서 플레이어 움직임을 처리 할 수있는 방법?
커피 스크립트에서 플레이어를 처리하면 게임 업데이트가 포함됩니다. 보드 및 게임이 이겼는지 확인하십시오. 플레이어가 움직일 때 플레이어의 마크로 게임 보드의 해당 셀을 업데이트해야합니다. 그런 다음 플레이어가 게임에서 승리했는지 확인해야합니다. 이것은 가능한 모든 셀의 셀 조합을 확인하여 수행 할 수 있습니다.
플레이어가 CoffeeScript에서 게임에서 승리했는지 확인하려면 어떻게해야합니까?
플레이어가 커피 스크립트에서 게임에서 승리했는지 확인합니다. 가능한 모든 셀 조합을 확인합니다. 8 개의 가능한 승리 조합이 있습니다 : 3 행, 3 개의 열 및 2 개의 대각선. 각 조합을 확인하여 조합의 모든 셀에 동일한 마크가 있는지 확인할 수 있습니다. 이는 현재 플레이어의 표시입니다. 그렇다면 플레이어가 게임에서 승리했습니다.
커피 스크립트에서 추첨을 어떻게 처리 할 수 있습니까?
커피 스크립트를 드로우는 것은 게임 보드의 모든 셀이 표시되었는지 확인하는 것이 포함되어 있습니다. 플레이어는 게임에서 승리했습니다. 모든 셀이 표시되고 플레이어가 승리하지 않으면 게임은 무승부입니다. 각 플레이어의 이동 후에는 이것을 확인할 수 있습니다. CoffeeScript 코드를 JavaScript로 컴파일하려면 CoffeeScript 코드를 JavaScript로 컴파일하는 방법은 CoffeeScript 컴파일러를 사용하여 수행 할 수 있습니다. Node.js 패키지 관리자 인 NPM을 사용하여 컴파일러를 설치할 수 있습니다. 일단 설치되면 Coffee Script Command를 사용하여 CoffeeScript 코드를 JavaScript로 컴파일하고 CoffeeScript 파일의 이름과 CoffeeScript 파일의 이름을 사용하여 CoffeeScript와 함께 jQuery를 사용할 수 있습니까?
예, 그렇습니다. CoffeeScript와 함께 jQuery를 사용할 수 있습니다. Coffeescript는 JavaScript로 컴파일되므로 jQuery를 포함하여 JavaScript 라이브러리를 사용할 수 있습니다. jQuery를 사용하여 DOM을 조작하고, 이벤트를 처리하고, 애니메이션을 만들 수 있습니다. 커피 스크립트 코드를 디버깅하려면 어떻게해야합니까?
커피 스크립트 코드 디버깅 동일한 도구를 사용하여 수행 할 수 있습니다. JavaScript를 디버그하는 데 사용합니다. 대부분의 최신 브라우저에는 JavaScript 디버거가 포함 된 내장 개발자 도구가 제공됩니다. 이 디버거를 사용하여 코드를 통해 변수를 검사하는 등을 검사 할 수 있습니다. 원래 CoffeeScript 코드가 아닌 컴파일 된 JavaScript 코드를 디버깅 할 것입니다. CoffeeScript에 대해 자세히 알아볼 수있는 곳은 어디입니까? 공식 웹 사이트에서 커피 스크립트에 대해 자세히 알아볼 수 있습니다. 자세한 안내서, 언어 구문에 대한 참조 및 예제. Codecademy, Udemy 및 Coursera와 같은 웹 사이트에는 많은 온라인 자습서와 코스가 있습니다. 또한 실제 코드에서 배울 수있는 Github에서 많은 오픈 소스 커피 스크립트 프로젝트를 찾을 수 있습니다.