實用的咖啡網：製作一場TIC-TAC遊戲

coffeescript是一種彙編JavaScript的微小語言。由於您編寫CoffeeScript，將其編譯為JavaScript並將結果的JavaScript文件用於應用程序，因此在運行時沒有解釋。您可以通過將其功能與適當的coffeescript語法一起使用。 Coffeescript既可以用於在前端編寫JavaScript，又可以在後端編寫JavaScript。

鑰匙要點

• 咖啡網效率：咖啡本大大減少了所需的代碼量，與JavaScript相比，字符降低了36％，增強了可讀性和維護。
>
• 快速開發：CoffeeScript的簡潔語法和變量自動範圍範圍可預防常見錯誤並加快開發時間。
• 集成和編譯：庫coffeescript與jQuery等JavaScript庫無縫集成並編譯為JavaScript，允許在前端和後端開發中使用。
>
• 遊戲實施詳細信息：TIC-TAC-TOE遊戲採用板，玩家統計和遊戲狀態更新的清晰結構，所有這些都通過Coffeescript的簡化語法和DOM MANIPULATION進行管理。
• >使用Coffeescript增強功能：利用循環，有條件和本地存儲等功能來管理遊戲狀態，玩家移動和評分，並演示Coffeescript在Web Projects中的實際應用。
>

為什麼Coffeescript？

少量代碼

>根據有關Coffeescript的小書，Coffeescript的語法減少了您要輸入的字符數量，以使JS工作約33％至50％。我將介紹一個使用CoffeeScript創建的簡單的TIC-TAC-TOE遊戲（您可能已經從標題中猜到了），該遊戲以其RAW COFFEESCRIPT格式包含4963個字符，而編譯的JavaScript代碼包含7669個字符。那是2706個字符或36％的區別！

>

>更快的開發時間

>因為您寫的較短，易於錯誤的錯誤（例如，變量是自動竊取的，這意味著您不能通過省略VAR意外覆蓋全球範圍），您可以更快地完成項目。 CoffeeScript的Terse語法還製作了更可讀的代碼，並最終更容易維護代碼。

>

入門

在本文中，我們將與Coffeescript和Jquery一起構建一個簡單的TIC-TAC-TOE遊戲。如果您想在檢查實際情況之前閱讀語法，我建議我在SitePoint上使用CoffeeScript文章加速您的JavaScript開發。這還詳細介紹瞭如何通過NPM（Node Package Manager）安裝CoffeeScript。

>

>一如既往，本教程中的所有代碼都可以在GitHub上獲得，並且在Codepen或教程末尾都可以使用演示。 >>>>>>

您將使用的最常見的coffeescript命令是：

>

>咖啡-c文件名將將CoffeeScript文件編譯到具有相同名稱的文件，但具有.js擴展名（CoffeeScript文件通常具有.foffee Extension）。

>咖啡-CW文件名將注意文件中的更改（每當您保存文件時）並進行編譯。

咖啡-cw foldername/將注意更改文件夾中的所有文件，並在有任何更改時將其編譯為同一目錄。

>最後，將帶有.coffee文件的文件夾編譯到僅包含.js文件的文件夾很方便。

>咖啡-o JS / -CW /咖啡將關注位於咖啡文件夾中的所有Coffee文件中的更改，並將輸出（JavaScript）放在JS文件夾中。 >

如果您不進入終端，則可以使用帶有GUI的工具來處理您的CoffeeScript文件。例如，您可以在免費的無限試用期間嘗試Prepros（儘管如果您喜歡，則必須購買）。 下圖顯示了它提供的一些選項：

>

>您可以看到Prepros為您完成所有工作- 它設置了觀察者，因此您的.foffee文件將被編譯為JS，它允許您使用uglify JS，該JS將縮小/壓縮代碼，它可以自動mangle變量。它支持冰咖啡。 Prepros也可以用於CSS預處理器，例如Jade。

遊戲

讓我們從標記開始：

遊戲的界麵包括以下內容：

>簡要描述遊戲

<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>

的標題

帶有板ID的DIV元素，該元素是3×3正方形的位置

一個帶有一類警報的DIV元素，這將是顯示遊戲狀態

>的地方
• >帶有一類通知的DIV元素，這些元素將顯示誰在玩X和O，以及一般播放器統計信息。
• >僅在遊戲加載並提示玩家輸入其名稱時才顯示的表格。 >
根據最佳實踐，jQuery和使我們的應用程序tick的腳本都被加載到關閉的身體標籤之前。
• 樣式
• 使用CSS，我們可以通過漂浮每個正方形並清除每4個正方形來使涉及的九個正方形出現在3×3網格中。
• >我們還可以根據是否具有X或O類添加其他顏色（使用JavaScript添加）。
>

> Coffeescript在Action 中

供參考，您可以在此處找到主要的Coffeescript文件。

>

>您可以看到我們的TIC-TAC-TOE應用以$ - >開頭，這等同於jQuery函數的速記，該功能在DOM準備就緒時執行代碼：$（function（function（）{.. .}）;。

>咖啡本不依賴半隆和牙套，而是縮進。 - >告訴CoffeeScript您正在定義一個函數，因此您可以在下一行啟動該功能的主體，並用兩個空格縮進身體。

接下來，我們創建一個名為TIC的對象，該對象本身包含一個稱為數據的對象。您會看到，只要您正確地縮小屬性，就可以在創建對象時進行牙套或逗號。

>。

<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的轉彎。

X和O屬性是對象，將包含與三個軸上X或O的數量有關的數據，這對遊戲很重要：水平，垂直和對角線。他們將通過檢查器方法對每一步進行更新，以表示X和O在板上的分佈。 然後，檢查器方法將調用Checkwin，以確定是否有贏家。

之後

請注意， @的使用將其編譯到JavaScript關鍵字。如初始化的第一個屬性中所示，您可以在設置或調用屬性或方法時跳過 @鍵字的點。

>

通過給出方法明智的名稱，我們對他們在做什麼有一個公平的了解：>

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

> setPlayerNames將用戶在輸入中輸入的值存儲到數據對像中。

>檢索從LocalStorage中檢索播放器的統計信息，並將其設置在數據對像中。

>分配確定誰在玩X，誰在玩O。

>
• 準備板隱藏表格，刪除任何通知，清空板並用九個空的正方形填充。
• > UpdateNotifications更新UI，其中包含有關誰在玩X，誰在玩O以及玩家的統計信息的信息。
• > addListeners附加了事件聽眾，以便我們可以回應運動的球員。
• 深
讓我們更詳細地看一些此類方法。
• >
• >在這裡我們迭代九次，並在空板上添加一類正方形的九個div，以便填充它。這表明了咖啡本如何讓您在編寫條件本身之前編寫一線循環並聲明循環的主體。

CoffeeScript允許字符串插值提高可讀性並降低複雜性和代碼長度。您可以在任何字符串中添加＃{}，並從括號中的函數調用中插入任何變量或返回值。

添加標記方法舉例說明了您在咖啡文中定義參數的方式。您在箭頭（ - >）之前寫下它們：

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

您可以提供類似於PHP的參數的默認值：>

<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方法：>

>在這裡，我們看到Coffeescript提供了代表真實和虛假價值的其他關鍵字，例如否，是，關閉和繼續。另外，！ ==，===，&&，！ 可以使用iss，and and and and and Comency代表。

<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 ...然後... else ...語法。

遊戲的力學

>主力方法檢查器檢查每次球員採取行動時是否都有贏家。它通過在板上迭代併計算屬於X和O的正方形來做到這一點。它首先檢查對角線軸，然後檢查垂直方向，然後檢查水平。

如您所見，這使用了另一個方便的CoffeeScript功能 - 範圍。

這將循環3次，將行設置為以下順序等於0、1和2。另外，[0 ... 2]（一個獨家範圍）將僅導致兩個迭代，將行等於0和1。

$ <span>->
</span>  <span>Tic =
</span>    <span>data:
</span>      <span>turns: 0
</span>      <span>x: {}
</span>      <span>o: {}
</span>      <span>gameOver: false</span>

在水平檢查中，我們再次看到縮進對於確定循環的部分以及循環外部的部分至關重要 - 只有Checkfield調用在內部環內。

這就是Checkfield的樣子：

<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>

此方法演示了使用？關鍵字（在有條件的變量旁邊插入旁邊時）將其編譯為：

顯然很方便。

>

Checkfield方法的作用是將一個添加到X或O屬性的適當軸上，具體取決於單擊的正方形名稱。當用戶單擊AddListeners方法中的空板平方時，添加了類名。

這將我們帶入了Checkwin方法，該方法用於檢查其中一位玩家是否贏得了遊戲：

<span>prepareBoard: ->
</span>  <span>...
</span>  <span>$("<div>", {class: "square"}).appendTo("#board") for square in [0..8]

<p>

</p>>在CoffeeScript中，您可以用於...在數組中循環循環數組值，並且為了鍵，對象的值以對象的屬性為單位。  Checkwin利用它來檢查X和O對象內部的所有屬性。如果他們中的任何一個人的數量大於或等於三個，那麼我們將有一個贏家，遊戲應該結束。在這種情況下，我們調用addtoscore方法，該方法堅持通過localstorage的持續播放器的結果。 <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>

關於本地存儲

的單詞

localStorage是Web存儲規範的一部分，並且具有相當不錯的瀏覽器支持。它允許您將數據（類似於cookie）存儲在用戶的計算機上，並隨時隨地訪問它。

>您可以通過多種方式訪問​​API，例如，就像您對常規對象的屬性一樣：

<span>addNotification: (msg) ->
</span>  <span>$(".notifications").append($("<p>", text: msg));</p></span>

>本地存儲始終保存字符串，因此，如果要存儲一個對像或數組，則必須在存儲數組/對象和JSON.PARSE時使用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），儘管建議僅適用於最外層的函數。

接下來，我們有幾個實用程序方法。我們使用空storagevar清除特定水平行或對角線的內容。這是必要的，因為板上有兩個對角線，在我們的Chekend方法中，我們為兩個對角線使用相同的數據屬性。因此，我們必須在檢查第二個對角線之前清除該屬性。水平行也是如此。

>

<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>

>

將它們全部放在一起

$ <span>->
</span>  <span>Tic =
</span>    <span>data:
</span>      <span>turns: 0
</span>      <span>x: {}
</span>      <span>o: {}
</span>      <span>gameOver: false</span>

就是這樣。在不到150行的Coffeescript中，我們有一個工作遊戲。別忘了，您可以從GitHub下載本教程的代碼。

>

請參閱codepen上的sitepoint（@sitepoint）的筆tic-tac。

結論

我希望本教程鞏固了您對CoffeeScript的了解，並向您展示了JQuery和CoffeeScript如何共同努力。您可以做很多事情來改進遊戲。例如，您可以添加一個選項，使板與標準3×3尺寸不同。您可以實現一些簡單的AI，以便玩家可以與機器對抗，也可以在遊戲中實施炸彈，例如通過在玩家爭奪榮耀的同時，在隨機的遊戲移動中添加隨機X或O

經常詢問有關Coffeescript和TIC TAC TOE遊戲的問題（常見問題解答）

>我如何從CoffeeScript開始創建TIC TAC TOE遊戲？

從Coffeescript開始創建TIC TAC TOE遊戲，您首先需要對Coffeescript有基本的了解。 CoffeeScript是一種編譯為JavaScript的小語言。它提供了更好的語法，避免了JavaScript的古怪部分，但仍保留語言的靈活性和美麗。您可以從官方網站或其他在線資源中學習CoffeeScript的基礎知識開始。一旦有了基本的理解，就可以開始編碼TIC TAC TOE遊戲。您可以使用任何文本編輯器來編寫代碼，然後使用Coffeescript編譯器將其編譯為JavaScript。

>在Coffeescript中tic tac Toe遊戲的基本組件是什麼？ CoffeeScript中的TIC TAC TOE遊戲與任何其他編程語言相似。它們包括遊戲板，玩家和遊戲邏輯。遊戲板是一個3×3的網格，玩家在其中放置了自己的印記。球員通常是兩個，他們輪流將自己的痕跡放在遊戲板上。遊戲邏輯包括遊戲的規則，例如玩家如何獲勝，遊戲是抽獎時會發生什麼。

在Coffeescript中為TIC TAC TOE創建遊戲板涉及定義3×3矩陣。這可以使用數組數組來完成。每個內部陣列代表遊戲板上的一行，內部數組中的每個元素代表遊戲板上的單元格。最初，所有細胞都是空的。當玩家採取行動時，矩陣中的相應單元格會在玩家的標記中更新。

我如何處理coffeescript中的播放器移動？

處理玩家在Coffeescript中移動涉及更新遊戲董事會並檢查遊戲是否贏得了。當玩家採取行動時，您需要使用玩家的標記更新遊戲板中的相應單元格。然後，您需要檢查玩家是否贏得了比賽。這可以通過檢查細胞的所有可能獲勝組合來完成。

>我如何檢查玩家是否在Coffeescript中贏得了遊戲？檢查細胞的所有可能獲勝組合。有8種可能的獲勝組合：3行，3列和2個對角線。您可以檢查每個組合，以查看組合中的所有單元格是否具有相同的標記，這是當前播放器的標記。如果是這樣，玩家已經贏得了比賽。

>我如何處理coffeescript？

>

>在Coffeescript中處理抽獎活動涉及檢查遊戲板上的所有細胞是否已標記並且沒有標記玩家贏得了比賽。如果所有細胞都被標記了，沒有玩家贏得冠軍，那麼遊戲就是吸引人。您可以在每個玩家的移動後檢查一下。

>如何使用Coffeescript編譯器將Coffeescript代碼編譯到JavaScript？您可以使用NPM，NODE.JS軟件包管理器安裝編譯器。安裝後，您可以使用咖啡命令將CoffeeScript代碼編譯到JavaScript中，然後使用-c選項和coffeescript文件的名稱。

>我可以將jquery與coffeescript使用jquery？您可以將jQuery與Coffeescript一起使用。 Coffeescript將其編譯到JavaScript中，因此您可以使用任何JavaScript庫，包括jQuery。您可以使用jQuery來操縱DOM，處理事件，創建動畫等。

>如何調試我的咖啡本代碼？

>

>可以使用與相同的工具來調試庫存訂閱代碼用於調試JavaScript。大多數現代瀏覽器都帶有內置開發人員工具，其中包括JavaScript調試器。您可以使用此調試器逐步瀏覽代碼，檢查變量等等。請注意，您將調試編譯的JavaScript代碼，而不是原始的Coffeescript代碼。

>我在哪裡可以了解有關Coffeescript的更多信息？詳細的指南，對語言語法的引用和示例。在Codecademy，Udemy和Coursera等網站上也有許多在線教程和課程。此外，您可以在GitHub上找到許多開源的咖啡網絡項目，以從現實世界代碼中學習。

>