Tic Tac Toe

在这里&＃xff0c;我们进行了九次迭代&＃xff0c;并将九个带有一类square div添加到空板上以填充它。 这演示了CoffeeScript如何让您编写单行循环并在编写条件本身之前声明循环的主体。

updateNotifications: ->$(".notifications").empty().show()&＃64;.addNotification "#{&＃64;data.player1} is playing #{&＃64;data.rolep1}"...

CoffeeScript允许进行字符串内插&＃xff0c;从而增加了可读性并减少了复杂性和代码长度。 您可以在任何字符串中添加#{} &＃xff0c;并在括号内插入任何变量或函数调用的返回值。

addNotification: (msg) ->$(".notifications").append($("

", text: msg));

addNotification方法示例了如何在CoffeeScript中定义参数。 您将它们写在箭头&＃xff08; -> &＃xff09;之前&＃xff1a;

您可以为类似于PHP的参数提供默认值&＃xff1a;

addNotification: (msg &＃61; "I am a message") ->

编译具有默认参数的函数时&＃xff0c;它将转换为&＃xff1a;

if (msg &＃61;&＃61; null) { msg &＃61; "I am a message"; }

最后&＃xff0c;让我们转到addListeners方法&＃xff1a;

addListeners: ->$(".square").click ->if Tic.data.gameOver is no and not $(&＃64;).text().lengthif Tic.data.turns % 2 is 0 then $(&＃64;).html("X").addClass("x moved")else if Tic.data.turns % 2 isnt 0 then $(&＃64;).html("O").addClass("o moved")...

在这里&＃xff0c;我们看到CoffeeScript提供了其他关键字来表示真实值和虚假值&＃xff0c;例如no &＃xff0c; yes &＃xff0c; off和on 。 此外&＃xff0c; !&＃61;&＃61; &＃xff0c; &＃61;&＃61;&＃61; &＃xff0c; && &＃xff0c; ! 可以使用isnt &＃xff0c; is and而not相应地表示。

您可以使用if ... then ... else ...语法制作可读的单行条件。

游戏机制

主力方法checkEnd每次玩家移动时检查是否有赢家。 它通过在板上迭代并计算属于X和O的正方形来实现此目的。它首先检查对角轴&＃xff0c;然后是垂直轴&＃xff0c;然后是水平轴。

checkEnd : ->&＃64;.data.x &＃61; {}&＃64;.data.o &＃61; {}#diagonal checkdiagonals &＃61; [[0,4,8], [2,4,6]]for diagonal in diagonalsfor col in diagonal&＃64;.checkField(col, &＃39;diagonal&＃39;)&＃64;.checkWin()&＃64;.emptyStorageVar(&＃39;diagonal&＃39;)for row in [0..2]start &＃61; row * 3end &＃61; (row * 3) &＃43; 2middle &＃61; (row * 3) &＃43; 1#vertical check&＃64;checkField(start, &＃39;start&＃39;)&＃64;checkField(middle, &＃39;middle&＃39;)&＃64;checkField(end, &＃39;end&＃39;)&＃64;checkWin()#horizontal checkfor column in [start..end]&＃64;checkField(column, &＃39;horizontal&＃39;)&＃64;checkWin()&＃64;emptyStorageVar(&＃39;horizontal&＃39;)

如您所见&＃xff0c;这利用了另一个便捷的CoffeeScript功能-范围。

for row in [0..2]

这将循环三次&＃xff0c;按此顺序将行设置为0、1和2。 或者&＃xff0c; [0...2] &＃xff08;互斥范围&＃xff09;将仅导致两次迭代&＃xff0c;将行设置为0和1。

在水平检查中&＃xff0c;我们再次看到缩进在确定什么是循环的一部分以及什么在循环的外部是至关重要的&＃xff0c;只有checkField调用在内部循环内部。

这是checkField样子&＃xff1a;

checkField: (field, storageVar) ->if $(".square").eq(field).hasClass("x")if &＃64;.data.x[storageVar]? then &＃64;.data.x[storageVar]&＃43;&＃43; else &＃64;.data.x[storageVar] &＃61; 1else if $(".square").eq(field).hasClass("o")if &＃64;.data.o[storageVar]? then &＃64;.data.o[storageVar]&＃43;&＃43; else &＃64;.data.o[storageVar] &＃61; 1

此方法演示了?的用法? 关键字&＃xff0c;当插入到条件变量中时&＃xff0c;可编译为&＃xff1a;

if (typeof someVariable !&＃61;&＃61; "undefined" && someVariable !&＃61;&＃61; null) {

这显然很方便。

checkField方法的作用是&＃xff0c;根据单击的正方形的类名称&＃xff0c;在x或o属性的相应轴上添加一个。 当用户在addListeners方法中单击空白的addListeners正方形时&＃xff0c;将添加类名称。

这使我们进入checkWin方法&＃xff0c;该方法用于检查其中一名玩家是否赢得了比赛&＃xff1a;

checkWin: ->for key,value of &＃64;.data.xif value >&＃61; 3localStorage.x&＃43;&＃43;&＃64;showAlert "#{&＃64;.getPlayerName("X")} wins"&＃64;data.gameOver &＃61; true&＃64;addToScore("X")for key,value of &＃64;.data.oif value >&＃61; 3localStorage.o&＃43;&＃43;&＃64;showAlert "#{&＃64;.getPlayerName("O")} wins"&＃64;data.gameOver &＃61; true&＃64;addToScore("O")

在CoffeeScript中&＃xff0c;您可以使用for ... in array来遍历数组值&＃xff0c;并for key,value of object遍历for key,value of object的属性。 checkWin利用它来检查x和o对象内部的所有属性。 如果其中任何一个的数字大于或等于3&＃xff0c;那么我们就有赢家&＃xff0c;比赛应该结束。 在这种情况下&＃xff0c;我们调用addToScore方法&＃xff0c;该方法通过localStorage保留播放器的结果。

关于本地存储的一句话

LocalStorage是Web Storage规范的一部分&＃xff0c;具有很好的浏览器支持 。 它允许您将数据&＃xff08;类似于COOKIE&＃xff09;存储在用户的计算机上&＃xff0c;并在需要时随时访问。

您可以通过多种方式访问​​API&＃xff0c;例如&＃xff0c;就像访问常规对象的属性一样&＃xff1a;

//fetch item
localStorage.myProperty // set item
localStorage.myProperty &＃61; 123

本地存储总是保存字符串&＃xff0c;因此&＃xff0c;如果要存储对象或数组&＃xff0c; JSON.stringify在存储数组/对象时必须使用JSON.stringify &＃xff0c;而在检索数组/对象时必须使用JSON.parse 。

我们的addToScore方法利用了以下事实&＃xff1a;

addToScore: (winningParty) ->...if winningParty is "none"&＃64;.showAlert "The game was a tie"else...localStorage[&＃64;data.player1] &＃61; JSON.stringify &＃64;data.p1stats

它还说明了如何在CoffeeScript&＃xff08; JSON.stringify &＃xff09;中省略括号&＃xff0c;尽管仅建议最JSON.stringify的函数调用使用。

接下来&＃xff0c;我们有两种实用方法。 我们使用emptyStorageVar清除特定水平行或对角线的内容。 这是必要的&＃xff0c;因为板上有两个对角线&＃xff0c;并且在我们的chekEnd方法内部&＃xff0c;我们对两个对角线使用相同的data属性。 因此&＃xff0c;我们必须在检查第二个对角线之前清除该属性。 水平行也是如此。

emptyStorageVar: (storageVar) ->&＃64;.data.x[storageVar] &＃61; null&＃64;.data.o[storageVar] &＃61; null

获取玩家名称

在游戏开始时提交带有球员姓名的表格时&＃xff0c;我们可以阻止其默认操作并使用Javascript处理提交。 我们检查名称是否为空或两个名称是否相同&＃xff0c;如果相同&＃xff0c;则显示友好的警报。 否则&＃xff0c;我们通过调用Tic.initialize()开始游戏。

$("form").on "submit", (evt) ->evt.preventDefault()$inputs &＃61; $("input[type&＃61;&＃39;text&＃39;]")namesNotEntered &＃61; $inputs.filter(->return &＃64;.value.trim() isnt "").length isnt 2namesIndentical &＃61; $inputs[0].value is $inputs[1].valueif namesNotEntered then Tic.showAlert("Player names cannot be empty")else if namesIndentical then Tic.showAlert("Player names cannot be identical")else Tic.initialize()

最后一行使用事件委托使类play-again任何元素响应单击。 必须进行事件委托&＃xff0c;因为只有在游戏结束后才将此元素添加到页面。 首次渲染DOM时不存在。

$("body").on("click", ".play-again", -> Tic.initialize())

全部放在一起

就是这样。 在少于150行的CoffeeScript中&＃xff0c;我们有一个有效的游戏。 别忘了&＃xff0c;您可以从GitHub下载本教程中的代码。

请参阅CodePen上的SitePoint &＃xff08; &＃64;SitePoint &＃xff09;的笔井字游戏 。

结论

我希望本教程能够巩固您对CoffeeScript的了解&＃xff0c;并向您展示jQuery和CoffeeScript如何协同工作。 您可以做很多事情来改善游戏。 例如&＃xff0c;您可以添加一个选项以使电路板不同于其标准的3×3尺寸。 您可以实现一些简单的AI&＃xff0c;以便玩家可以在机器上玩游戏&＃xff0c;也可以在游戏中实现炸弹&＃xff0c;例如&＃xff0c;在玩家为荣耀而战时&＃xff0c;在随机的游戏动作中添加随机的X或O。

From: https://www.sitepoint.com/practical-coffeescript-tic-tac-toe/