Я хоть и занимаюсь переводами уроков по SDL, но этот тренд немного задел. В одной прошлых статей я рассказал о том как можно написать крестики-нолики на разрабатываемом фрэймворке, но сегодня в конце рабочего дня захотелось чего-то нового.
Итак, встречайте: Крестики-Нолики на JavaScript
Рассчитано на двух игроков: щелкаем мышкой по клеткам по очереди, при каждом клике крестик меняется на нолик и наоборот.
Думаю что получилось уложиться в лимит, несмотря на то что я подсчитывал и CSS и HTML строки. Вот код:
HTML
<div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> <div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> <div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
CSS
.cell { width: 50px; height: 50px; display: inline-block; border: 1px solid black; font-size: 50px; margin: 4px; padding: 0px; }
JavaScript
(function (d){ player = true; function clsCells(arr) {for(var i = 0, len = arr.length;i < len; i++) { arr[i].innerText = ""};}; d.onclick = function (e) { if ((e.target.className == "cell") && (e.target.innerText == "")) { if (player){ e.target.innerText = "X"; player = false; } else { e.target.innerText = "O"; player = true; } var arr = d.querySelectorAll('.cell'), v = []; for(var i = 0, len = arr.length;i < len; i++) { v[i] = arr[i].innerText }; if ((v[0] == "X" && v[1] == "X" && v[2] == "X") || (v[3] == "X" && v[4] == "X" && v[5] == "X") || (v[6] == "X" && v[7] == "X" && v[8] == "X") || (v[0] == "X" && v[3] == "X" && v[6] == "X") || (v[1] == "X" && v[4] == "X" && v[7] == "X") || (v[2] == "X" && v[5] == "X" && v[8] == "X") || (v[0] == "X" && v[4] == "X" && v[8] == "X") || (v[2] == "X" && v[4] == "X" && v[6] == "X")) {alert("X wins!"); clsCells(arr);} if ((v[0] == "O" && v[1] == "O" && v[2] == "O") || (v[3] == "O" && v[4] == "O" && v[5] == "O") || (v[6] == "O" && v[7] == "O" && v[8] == "O") || (v[0] == "O" && v[3] == "O" && v[6] == "O") || (v[1] == "O" && v[4] == "O" && v[7] == "O") || (v[2] == "O" && v[5] == "O" && v[8] == "O") || (v[0] == "O" && v[4] == "O" && v[8] == "O") || (v[2] == "O" && v[4] == "O" && v[6] == "O")) {alert("O wins!"); clsCells(arr);} } }; })(document);
Выражаю свою благодарность авторам прошлых топиков: творите, друзья! наполняйте вдохновением наши сердца! И буду благодарен за помощь в исправлении ошибок (сам я не особо силен в веб-разработке). Спасибо за внимание!
ссылка на оригинал статьи http://habrahabr.ru/post/202816/
Добавить комментарий