Практический CoffeeScript: создание игры в крестики-нолики

В горизонтальной проверке мы снова видим, как отступ имеет решающее значение для определения того, что является частью цикла, а что находится вне цикла — только checkField вызов checkField находится внутри внутреннего цикла.

Вот как выглядит checkField :

 checkField: (field, storageVar) -> if $(".square").eq(field).hasClass("x") if @.data.x[storageVar]? then @.data.x[storageVar]++ else @.data.x[storageVar] = 1 else if $(".square").eq(field).hasClass("o") if @.data.o[storageVar]? then @.data.o[storageVar]++ else @.data.o[storageVar] = 1 

Этот метод демонстрирует использование ? ключевое слово, которое при вставке рядом с переменной в условном выражении компилируется в:

 if (typeof someVariable !== "undefined" && someVariable !== null) { 

Что, очевидно, очень удобно.

Метод checkField добавляет единицу к соответствующей оси свойства x или o зависимости от имени класса квадрата, по которому щелкнули. Имя класса добавляется, когда пользователь нажимает на пустой квадрат доски в методе addListeners .

Это подводит нас к методу checkWin , который используется для проверки, выиграл ли кто-либо из игроков:

 checkWin: -> for key,value of @.data.x if value >= 3 localStorage.x++ @showAlert "#{@.getPlayerName("X")} wins" @data.gameOver = true @addToScore("X") for key,value of @.data.o if value >= 3 localStorage.o++ @showAlert "#{@.getPlayerName("O")} wins" @data.gameOver = true @addToScore("O") 

В CoffeeScript вы можете использовать for ... in array для циклического перебора значений массива, а for key,value of object для циклического перебора свойств объекта. checkWin использует это для проверки всех свойств внутри объектов x и o . Если кто-либо из них имеет число, большее или равное трем, у нас есть победитель, и игра должна закончиться. В таком случае мы вызываем метод addToScore который сохраняет результаты игроков через localStorage .

Слово о локальном хранилище

LocalStorage является частью спецификации веб-хранилища и имеет довольно хорошую поддержку браузера . Он позволяет вам хранить данные (аналогичные файлам cookie) на компьютере пользователя и получать к ним доступ в любое время.

Вы можете получить доступ к API несколькими способами, например, так же, как и к свойствам обычного объекта:

 //fetch item localStorage.myProperty // set item localStorage.myProperty = 123 

Локальное хранилище всегда сохраняет строки, поэтому, если вы хотите сохранить объект или массив, вам придется использовать JSON.stringify при хранении массива / объекта и JSON.parse при его получении.

Наш метод addToScore использует этот факт:

 addToScore: (winningParty) -> ... if winningParty is "none" @.showAlert "The game was a tie" else ... localStorage[@data.player1] = JSON.stringify @data.p1stats 

В нем также показано, как можно опустить скобки в CoffeeScript ( JSON.stringify ), хотя это рекомендуется только для самых внешних вызовов функций.

Далее у нас есть пара полезных методов. Мы используем emptyStorageVar чтобы очистить содержимое определенной горизонтальной строки или диагонали. Это необходимо, потому что на плате две диагонали, и внутри нашего метода chekEnd мы используем одно и то же свойство данных для обеих диагоналей. Поэтому мы должны очистить свойство перед проверкой второй диагонали. То же самое касается горизонтальных рядов.

 emptyStorageVar: (storageVar) -> @.data.x[storageVar] = null @.data.o[storageVar] = null 

Получение имен игроков

Когда форма с именами игроков отправляется в начале игры, мы можем предотвратить ее действие по умолчанию и обработать отправку с помощью JavaScript. Мы проверяем, есть ли пустое имя, и совпадают ли оба имени, и отображаем дружеское предупреждение, если это так. В противном случае мы запускаем игру, вызывая Tic.initialize() .

 $("form").on "submit", (evt) -> evt.preventDefault() $inputs = $("input[type='text']") namesNotEntered = $inputs.filter(-> return @.value.trim() isnt "" ).length isnt 2 namesIndentical = $inputs[0].value is $inputs[1].value if 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 реагировал на нажатие. Делегирование событий необходимо, так как этот элемент добавляется на страницу только после завершения игры. Он отсутствует при первом отображении DOM.

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

Собираем все вместе

Вот и все. Менее чем в 150 строках CoffeeScript у нас есть рабочая игра. Не забудьте, вы можете скачать код из этого урока с GitHub .