実用的なcoffeescript：Tic-Tac-Toeゲームを作成します

coffeescriptは、JavaScriptにコンパイルする小さな小さな言語です。 Coffeescriptを書いて、JavaScriptにコンパイルし、結果のJavaScriptファイルをアプリに使用してから、実行時に解釈はありません。適切なCoffeeScriptの構文を備えた機能を使用するだけで、Coffeescript内から任意のJavaScriptライブラリ（jqueryなど）を使用できます。 coffeescriptは、フロントエンドにJavaScriptとバックエンドでJavaScriptを作成するために使用できます。

キーテイクアウト

• coffeescript効率：coffeescriptは、必要なコードの量を大幅に削減し、JavaScriptと比較して文字が36％減少し、読みやすさとメンテナンスを向上させます。
迅速な開発：CoffeeScriptの簡潔な構文と変数の自動スコープが一般的なエラーを防ぎ、開発時間を速めます。
• 統合と編集：coffeescriptは、jqueryやコンパイルなどのJavaScriptライブラリとシームレスに統合され、フロントエンドとバックエンドの両方の開発での使用を可能にします。
ゲームの実装の詳細：TIC-TAC-Toeゲームは、ボード、プレーヤーの統計、ゲームステータスの更新を備えた明確な構造を採用しています。すべてがCoffeescriptのSimplied Syntaxとjqueryを介して管理しています。
• coffeescriptを使用した機能の拡張機能：ループ、条件、ローカルストレージなどの機能を利用して、ゲーム状態、プレーヤーの動き、スコアリングを管理し、WebプロジェクトでのCoffeeScriptの実用的なアプリケーションを実証します。
• では、なぜcoffeescript？
• コードが少ない

Coffeescriptの小さな本によると、Coffeescriptの構文は、JSを約33％から50％の作業にするために入力する必要がある文字の量を減らします。 Raw Coffeescript形式には4963文字が含まれているのに対し、Coffeescriptを使用して作成されたシンプルなTic-Tac-Toeゲーム（おそらくこれをタイトルから既に推測している）を提示しますが、コンパイルされたJavaScriptコードには7669文字が含まれています。これは、2706文字または36％！

の違いです

開発時間の高速

より短く、より少ないエラーが発生しやすいと書くため（たとえば、変数は自動スコープされます。つまり、varを省略してグローバルを誤って上書きすることはできません）。 CoffeescriptのTerse構文は、より読みやすいコード、そして最終的にはメンテナンスが容易なコードを作成します。

始めましょう

この記事では、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> class<span>="wrapper"</span>>
  <span><span><span><header> class<span>="text-center"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tic Tac Toe<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><div> id<span>="board"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="alerts welcome"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="notifications"</span>><span><span></span></span>
</div></span>></span>
</span>
  <span><span><span><form> action<span>=""</span> method<span>="POST"</span>></form></span>
</span>    ...
  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><script> src<span >="jquery.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="logic/app.js"</script></span>></span><span><span></span>></span></span>

ゲームステータスが表示されるアラートのクラスを備えたDiv要素

一般的なプレーヤーの統計とともに、誰がXとOを再生しているかを示す通知のクラスを備えたDiv要素。

ゲームがロードされたときにのみ表示され、プレイヤーに名前を入力するように促すフォーム。
ベストプラクティスに従って、jqueryとアプリのティックを作成するスクリプトの両方が、閉じたボディタグの前にロードされます。
• スタイリング
• CSSを使用して、各正方形をフローティングして4番目の平方をクリアすることにより、関係する9つの正方形を3×3グリッドに表示することができます。
• クラスXかO（JavaScriptを使用して追加されている）があるかどうかに応じて、正方形に別の色を追加することもできます。
• coffeescript in action
参照のために、メインコーヒースクリプトファイルはこちらを見つけることができます。

TIC-TAC-TOEアプリが$ - >で始まることがわかります。これは、domの準備ができたときにコードを実行するjQueryの関数の速記に相当します：$（function（）{...}）;。

coffeescriptは、セミコロンやブレースに依存していませんが、インデントに依存しています。 - > coffeescriptに、次の行で関数の本体を起動し、2つのスペースで体をインデントできるように関数を定義していることを伝えます。

次に、TICと呼ばれるオブジェクトを作成し、それ自体にデータと呼ばれるオブジェクトが含まれます。プロパティを正しくインデントする限り、オブジェクトを作成するときにブレースやコンマが必須ではないことがわかります。

ターンプロパティは、ゲームで取られたターンの総数を保持します。均等な数字を保持しているのか、それとも不均一な数字を保持しているのかを確認し、XまたはOのターンであるかどうかを判断できます。

<span><span><span><div> class<span>="wrapper"</span>>
  <span><span><span><header> class<span>="text-center"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tic Tac Toe<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><div> id<span>="board"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="alerts welcome"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="notifications"</span>><span><span></span></span>
</div></span>></span>
</span>
  <span><span><span><form> action<span>=""</span> method<span>="POST"</span>></form></span>
</span>    ...
  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><script> src<span >="jquery.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="logic/app.js"</script></span>></span><span><span></span>></span></span>

XおよびOプロパティはオブジェクトであり、ゲームにとって重要な3つの軸上のXまたはOの数に関連するデータが含まれます：Horizo​​ntal、垂直、対角線。これらは、ボード上のxとoの分布を表すために、チェックエンド法を介したあらゆる動きについて更新されます。 チェックエンドメソッドは、CheckWinを呼び出して、勝者がいるかどうかを判断します。

その後、TICオブジェクトの内部にすべてを立ち上げて実行する方法があります。

JavaScriptキーワードにコンパイルする @の使用に注意してください。初期化の最初のプロパティに示されているように、プロパティまたは方法を設定または呼び出すときに、 @キーワードの後に​​ドットをスキップできます。

メソッドに賢明な名前を付けることで、彼らが何をしているのかについての公正な考えがあります：

<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span>  <span>clear: both;
</span><span>}</span>

setPlayerNamesデータオブジェクトに入力に入力したユーザーが入力した値を保存します。

Retirevestatsは、プレイヤーの統計をLocalStorageから取得し、データオブジェクトに設定します。

assorlolesは、誰がXを再生し、誰がOをプレイしているかを決定します。

準備ボードはフォームを隠し、通知を削除し、ボードを空にし、9つの空の正方形で満たします。

• updateNotificationsは、Xをプレイしている人と誰がOをプレイしているか、プレーヤーの統計についての情報でUIを更新します。
• addListenersはイベントリスナーを添付して、動きをするプレイヤーに応答できるようにします。
• ダイビングが深く
• これらの方法のいくつかをもっと詳細に見てみましょう。
ここでは、9回繰り返し、空のボードに正方形のクラスを備えた9回のdivを追加して追加します。これは、coffeeScriptを使用すると、条件自体を書き込む前に1行ループを書き、ループの本体を宣言する方法を示しています。

coffeeScriptは、読みやすさを向上させ、複雑さとコードの長さを減らす文字列補間を可能にします。任意の文字列内に＃{}を追加し、ブレース内の関数呼び出しから変数または返品値を挿入できます。

addNotificationメソッドは、coffeescriptのパラメーターを定義する方法を例示しています。矢印（ - >）：

の前に書き込みます

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> class<span>="wrapper"</span>>
  <span><span><span><header> class<span>="text-center"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tic Tac Toe<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><div> id<span>="board"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="alerts welcome"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="notifications"</span>><span><span></span></span>
</div></span>></span>
</span>
  <span><span><span><form> action<span>=""</span> method<span>="POST"</span>></form></span>
</span>    ...
  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><script> src<span >="jquery.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="logic/app.js"</script></span>></span><span><span></span>></span></span>

デフォルトのパラメーターを持つ関数がコンパイルされると、次のように変換されます。

<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span>  <span>clear: both;
</span><span>}</span>

最後に、addListenersメソッド：

に目を向けましょう

<span><span>.square.x</span> {
</span>  <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span>  <span>color: #3997ff;
</span><span>}</span>

ここでは、Coffeescriptが追加のキーワードを提供して、No、はい、オフとオンなどのTruthyとfalsy Valuesを表すことができます。さらに、！==、===、&&、！ ISNT、IS、およびそれに応じて使用して表現できます。

if ... then ... else ... syntax。

を使用して、読み取り可能なシングルライン条件を作成できます。

ゲームのメカニズム

Workhorse Method CheckEndは、プレイヤーが移動するたびに勝者がいるかどうかをチェックします。これは、ボードを反復し、XとOに属する正方形をカウントすることによって行います。最初に斜めの軸をチェックし、次に垂直、次に水平をチェックします。

ご覧のとおり、これは別の便利なコーヒースクリプト機能であるレンジを使用します。

$ <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]
<p>チェックフィールドの方法が行うことは、クリックされた正方形のクラス名に応じて、xまたはoプロパティの適切な軸に追加することです。ユーザーがAddListenersメソッドの空のボードスクエアをクリックすると、クラス名が追加されます。
</p>これにより、プレイヤーの1人がゲームに勝ったかどうかを確認するために使用されます。

<pre class="brush:php;toolbar:false"><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));</p></span>

ローカルストレージは常に文字列を保存するため、オブジェクトまたは配列を保存する場合は、json.stringifyを使用する必要があります。

addtoscoreメソッドは、この事実を利用しています：

<span><span><span><div> class<span>="wrapper"</span>>
  <span><span><span><header> class<span>="text-center"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Tic Tac Toe<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><div> id<span>="board"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="alerts welcome"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="notifications"</span>><span><span></span></span>
</div></span>></span>
</span>
  <span><span><span><form> action<span>=""</span> method<span>="POST"</span>></form></span>
</span>    ...
  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><script> src<span >="jquery.min.js"</script></span>></span><span><span></span>></span>
</span><span><span><span><script> src<span >="logic/app.js"</script></span>></span><span><span></span>></span></span>

また、coffeescript（json.stringify）で括弧を省略する方法も示しますが、最も外側の関数呼び出しのみに推奨されます。

次に、いくつかのユーティリティメソッドがあります。 emptystoragevarを使用して、特定の水平列または対角線の内容をクリアします。これは、ボードに2つの対角線があり、Chekendメソッド内には両方の対角線に同じデータプロパティを使用するため、これが必要です。したがって、2番目の対角線をチェックする前に、プロパティをクリアする必要があります。水平行についても同じことが言えます

プレーヤー名を取得

<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span>  <span>clear: both;
</span><span>}</span>

ゲームの開始時にプレイヤーの名前が付いたフォームが送信されると、デフォルトのアクションを防ぎ、JavaScriptを使用して送信を処理できます。空の名前があるかどうか、または両方の名前が同じかどうかを確認し、その場合はフレンドリーなアラートを表示します。それ以外の場合は、tic.initialize（）。

を呼び出してゲームを開始します

最終行は、イベント委任を使用して、クラスのプレイアゲインをクリックすることで応答します。 この要素は、ゲームが終了したらページにのみ追加されるため、イベント委任が必要です。 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からこのチュートリアルからコードをダウンロードできます。 $ <span>-> </span> <span>Tic = </span> <span>data: </span> <span>turns: 0 </span> <span>x: {} </span> <span>o: {} </span> <span>gameOver: false</span>結論

このチュートリアルがCoffeescriptの知識を固め、JQueryとCoffeescriptがどのように連携できるかを示していることを願っています。ゲームを改善するためにできることはたくさんあります。たとえば、ボードを標準の3×3次元とは異なるものにするオプションを追加できます。プレイヤーがマシンと対戦できるように、いくつかの単純なAIを実装するか、ゲームに爆弾を実装できるようにすることができます。プレイヤーが栄光のために戦っている間、ランダムなゲームの動きにランダムXまたはOを追加することにより。

CoffeescriptとTic Tac Toeゲームに関するよくある質問（FAQ）

tic tac toeゲームを作成するためのcoffeescriptから始めるにはどうすればよいですか？

Coffeescriptから始めるには、Tic Tac Toeゲームを作成するには、まずCoffeeScriptを基本的に理解する必要があります。 Coffeescriptは、JavaScriptにコンパイルする小さな言語です。 JavaScriptの風変わりな部分を回避するより良い構文を提供し、言語の柔軟性と美しさをまだ保持しています。公式Webサイトまたは他のオンラインリソースからCoffeescriptの基本を学ぶことから始めることができます。基本的な理解ができたら、TIC TAC TOEゲームのコーディングを開始できます。任意のテキストエディターを使用してコードを作成し、Coffeescriptコンパイラを使用してJavaScriptにコンパイルします。 CoffeescriptのTic Tac Toeゲームのゲームは、他のプログラミング言語に似ています。ゲームボード、プレーヤー、ゲームロジックが含まれます。ゲームボードは、プレイヤーがマークを配置する3×3グリッドです。プレイヤーは通常2人で、順番にゲームボードにマークを付けます。ゲームロジックには、プレイヤーが勝つ方法、ゲームが引き分けになったときに何が起こるかなど、ゲームのルールが含まれています。

coffeescriptでtic tac toeのゲームボードを作成するには、3×3マトリックスを定義します。これは、配列の配列を使用して実行できます。各内側配列はゲームボード上の行を表し、内部配列内の各要素はゲームボード上のセルを表します。最初は、すべてのセルが空です。プレーヤーが移動すると、マトリックス内の対応するセルがプレーヤーのマークで更新されます。ボードとゲームが勝ったかどうかを確認します。プレイヤーが移動するとき、ゲームボードの対応するセルをプレーヤーのマークで更新する必要があります。次に、プレイヤーがゲームに勝ったかどうかを確認する必要があります。これは、可能なすべての勝利のセルの組み合わせをチェックすることで実行できます。

プレーヤーがcoffeescriptでゲームに勝ったかどうかを確認できますか？セルのすべての勝利の組み合わせを確認します。 3行、3列、2つの対角線の8つの勝利の組み合わせがあります。各組み合わせを確認して、組み合わせのすべてのセルが同じマークを持っているかどうかを確認できます。これは現在のプレーヤーのマークです。もしそうなら、プレーヤーはゲームに勝ちました。

coffeescriptのドローを処理するにはどうすればよいですか？

​​

coffeescriptのドローを処理するには、ゲームボード上のすべてのセルがマークされているかどうかを確認することが含まれます。プレイヤーはゲームに勝ちました。すべてのセルがマークされていて、プレーヤーが勝っていない場合、ゲームは引き分けです。各プレーヤーの移動後にこれを確認できます。

coffeescriptコードをjavascriptにコンパイルするにはどうすればよいですか？

coffeescriptコンパイラを使用してcoffeescriptコードをJavascriptにコンパイルすることができます。 node.jsパッケージマネージャーであるNPMを使用してコンパイラをインストールできます。インストールしたら、コーヒーコマンドを使用してcoffeescriptコードをJavaScriptにコンパイルし、次に-Cオプションとcoffeescriptファイルの名前を使用できます。 jqueryをcoffeescriptで使用できます。 coffeescriptはJavaScriptにコンパイルされるため、JQueryを含むJavaScriptライブラリを使用できます。 jQueryを使用してDOMを操作したり、イベントを処理したり、アニメーションを作成したり、コーヒースクリプトコードをデバッグするにはどうすればよいですか？ JavaScriptをデバッグするために使用します。ほとんどの最新のブラウザには、JavaScriptデバッガーを含む組み込み開発者ツールが付属しています。このデバッガーを使用して、コードを介して、変数を検査します。元のcoffeeScriptコードではなく、コンパイルされたJavaScriptコードをデバッグすることに注意してください。

Coffeescriptの詳細については、公式WebサイトからCoffeeScriptの詳細について詳しく知ることができます。詳細なガイド、言語構文への参照、および例。また、Codecademy、Udemy、CourseraなどのWebサイトで利用できるオンラインチュートリアルやコースもたくさんあります。さらに、GitHubで多くのオープンソースコーヒースクリプトプロジェクトを見つけることができ、実際のコードから学習します。