实用的咖啡网：制作一场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上找到许多开源的咖啡网络项目，以从现实世界代码中学习。

>