coffeescriptは、JavaScriptにコンパイルする小さな小さな言語です。 Coffeescriptを書いて、JavaScriptにコンパイルし、結果のJavaScriptファイルをアプリに使用してから、実行時に解釈はありません。適切なCoffeeScriptの構文を備えた機能を使用するだけで、Coffeescript内から任意のJavaScriptライブラリ（jqueryなど）を使用できます。 coffeescriptは、フロントエンドにJavaScriptとバックエンドでJavaScriptを作成するために使用できます。
始めましょう
この記事では、CoffeescriptとjQueryを使用してシンプルなTic-Tac-Toeゲームを構築します。実用的なケースを調べる前に構文を読みたい場合は、SitePointのCoffeeScriptの記事でJavaScriptの開発を加速することをお勧めします。また、NPM（ノードパッケージマネージャー）を介してCoffeescriptをインストールする方法についても詳しく説明しています。 相変わらず、このチュートリアルのすべてのコードはGithubで入手でき、デモはCodepenまたはチュートリアルの最後に入手できます。使用する最も一般的なcoffeescriptコマンドは次のとおりです。
coffee -c filenameは、コフィースクリプトファイルを同じ名前でファイルにコンパイルしますが、.js拡張機能（通常.coffee拡張子があります）。
coffee -cw filenameは、ファイルの変更を監視します（ファイルを保存するたびに）コンパイルします。coffee -cw foldername/は、フォルダー内のすべての.coffeeファイルの変更を監視し、変更がある場合に同じディレクトリにコンパイルします。
最後に、.coffeeファイルを備えたフォルダーから.jsファイルのみを含むフォルダーにCoffeescriptをコンパイルするのが便利です。コーヒー-O JS / -CW /コーヒーは、コーヒーフォルダにあるすべての.Coffeeファイルの変更を監視し、JSフォルダーに出力（JavaScript）を配置します。
端子に入っていない場合は、GUIを備えたツールを使用してコーヒースクリプトファイルを処理できます。たとえば、無料の無制限のトライアルでプリプロスを試すことができます（ただし、気に入ったら購入する必要があります）。 以下の画像は、それが提供するオプションのいくつかを示しています：
Preprosがすべての作業を行っていることがわかります。Wathersをセットアップして.coffeeファイルがJSにコンパイルされ、コードを模倣/圧縮するUglify JSを使用できます。そして、Iced Coffeescriptをサポートしています。 Preprosは、Less LessなどのCSSプリプロセッサやJadeなどのテンプレートエンジンにも使用できます。
ゲーム
マークアップから始めましょう：
ゲームのインターフェイスは、次のもので構成されています
3×3の正方形が配置されるボードのIDを持つdiv要素
<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>
一般的なプレーヤーの統計とともに、誰がXとOを再生しているかを示す通知のクラスを備えたDiv要素。
TIC-TAC-TOEアプリが$ - >で始まることがわかります。これは、domの準備ができたときにコードを実行するjQueryの関数の速記に相当します：$（function（）{...}）;。
coffeescriptは、セミコロンやブレースに依存していませんが、インデントに依存しています。 - > coffeescriptに、次の行で関数の本体を起動し、2つのスペースで体をインデントできるように関数を定義していることを伝えます。
次に、TICと呼ばれるオブジェクトを作成し、それ自体にデータと呼ばれるオブジェクトが含まれます。プロパティを正しくインデントする限り、オブジェクトを作成するときにブレースやコンマが必須ではないことがわかります。ターンプロパティは、ゲームで取られたターンの総数を保持します。均等な数字を保持しているのか、それとも不均一な数字を保持しているのかを確認し、XまたはOのターンであるかどうかを判断できます。
<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>
その後、TICオブジェクトの内部にすべてを立ち上げて実行する方法があります。
JavaScriptキーワードにコンパイルする @の使用に注意してください。初期化の最初のプロパティに示されているように、プロパティまたは方法を設定または呼び出すときに、 @キーワードの後にドットをスキップできます。
メソッドに賢明な名前を付けることで、彼らが何をしているのかについての公正な考えがあります：
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Retirevestatsは、プレイヤーの統計をLocalStorageから取得し、データオブジェクトに設定します。
assorlolesは、誰がXを再生し、誰がOをプレイしているかを決定します。
準備ボードはフォームを隠し、通知を削除し、ボードを空にし、9つの空の正方形で満たします。の前に書き込みます
PHPと同様のパラメーターにデフォルト値を提供できます：<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span><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>
デフォルトのパラメーターを持つ関数がコンパイルされると、次のように変換されます。
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>に目を向けましょう
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>if ... then ... else ... syntax。
を使用して、読み取り可能なシングルライン条件を作成できます。
ゲームのメカニズムご覧のとおり、これは別の便利なコーヒースクリプト機能であるレンジを使用します。
$ <span>->
</span> <span>Tic =
</span> <span>data:
</span> <span>turns: 0
</span> <span>x: {}
</span> <span>o: {}
</span> <span>gameOver: false</span>これにより、この順序で列が0、1、2に等しく設定され、3回ループします。あるいは、[0 ... 2]（排他的な範囲）は、2回の繰り返しになり、列を0と1に等しく設定します。
<span>initialize: -> </span> @data<span>.gameOver = false </span> @<span>.setPlayerNames() </span> @<span>.retrieveStats() </span> @<span>.assignRoles() </span> @<span>.prepareBoard() </span> @<span>.updateNotifications() </span> @<span>.addListeners()</span>
これがチェックフィールドのように見えるものです：
この方法は？の使用を示しています。キーワードは、条件付きで変数の横に挿入された場合、次のようにコンパイルします。
これは明らかに非常に便利です。
<span>prepareBoard: ->
</span> <span>...
</span> <span>$("<div>", {class: "square"}).appendTo("#board") for square in [0..8]</span>チェックフィールドの方法が行うことは、クリックされた正方形のクラス名に応じて、xまたはoプロパティの適切な軸に追加することです。ユーザーがAddListenersメソッドの空のボードスクエアをクリックすると、クラス名が追加されます。
これにより、プレイヤーの1人がゲームに勝ったかどうかを確認するために使用されます。<span>updateNotifications: ->
</span> <span>$(".notifications").empty().show()
</span> @<span>.addNotification "#{@data.player1} is playing #{@data.rolep1}"
</span> <span>...</span>coffeeScriptで使用できます...配列で配列値をループするために、およびキーの値、オブジェクトのプロパティをループするオブジェクトの値。 CheckWinはこれを利用して、xオブジェクトおよびOオブジェクト内のすべてのプロパティを確認します。それらのいずれかが3つ以上の数を保持している場合、勝者がいて、ゲームは終了するはずです。そのような場合、LocalStorageを通じてプレイヤーの結果を持続するAddToscoreメソッドを呼び出します。
ローカルストレージについての単語LocalStorageはWebストレージ仕様の一部であり、かなり優れたブラウザサポートがあります。ユーザーのマシンにデータ（Cookieと同様）を保存し、いつでもいつでもアクセスできます。
たとえば、通常のオブジェクトのプロパティと同じように、いくつかの方法でAPIにアクセスできます。
<span>addNotification: (msg) ->
</span> <span>$(".notifications").append($("<p>", text: msg));</span>ローカルストレージは常に文字列を保存するため、オブジェクトまたは配列を保存する場合は、json.stringifyを使用する必要があります。
addtoscoreメソッドは、この事実を利用しています：
<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>
次に、いくつかのユーティリティメソッドがあります。 emptystoragevarを使用して、特定の水平列または対角線の内容をクリアします。これは、ボードに2つの対角線があり、Chekendメソッド内には両方の対角線に同じデータプロパティを使用するため、これが必要です。したがって、2番目の対角線をチェックする前に、プロパティをクリアする必要があります。水平行についても同じことが言えます
プレーヤー名を取得
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>最終行は、イベント委任を使用して、クラスのプレイアゲインをクリックすることで応答します。 この要素は、ゲームが終了したらページにのみ追加されるため、イベント委任が必要です。 DOMが最初にレンダリングされたとき、それは存在しません。
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>そしてそれだけです。 150行未満のcoffeescriptに、作業ゲームがあります。忘れないでください、GitHubからこのチュートリアルからコードをダウンロードできます。
coffeescriptコンパイラを使用してcoffeescriptコードをJavascriptにコンパイルすることができます。 node.jsパッケージマネージャーであるNPMを使用してコンパイラをインストールできます。インストールしたら、コーヒーコマンドを使用してcoffeescriptコードをJavaScriptにコンパイルし、次に-Cオプションとcoffeescriptファイルの名前を使用できます。 jqueryをcoffeescriptで使用できます。 coffeescriptはJavaScriptにコンパイルされるため、JQueryを含むJavaScriptライブラリを使用できます。 jQueryを使用してDOMを操作したり、イベントを処理したり、アニメーションを作成したり、コーヒースクリプトコードをデバッグするにはどうすればよいですか？ JavaScriptをデバッグするために使用します。ほとんどの最新のブラウザには、JavaScriptデバッガーを含む組み込み開発者ツールが付属しています。このデバッガーを使用して、コードを介して、変数を検査します。元のcoffeeScriptコードではなく、コンパイルされたJavaScriptコードをデバッグすることに注意してください。
以上が実用的なcoffeescript：Tic-Tac-Toeゲームを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
