18 ноя 2013 в 20:19

Крошечные крестики-нолики на JavaScript (30 строк кода)

JavaScript*Ненормальное программирование*

Ожидает приглашения

Неделя минимализма на хабре. Популяция тридцатистрочников удвоилась.

От меня в копилку миниатюрные крестики-нолики:

игрокое поле на div'ах, файл стиля и 2 картинки
engine.js занимает 30 строк

Мой код:

var t = new Array(9);

function ai() {
  var id = Math.floor(Math.random() * 9);
  t[id] ? ai() : move(id, 'ai');
}

function checkEnd() {
  if (t[0]=='ai' && t[1]=='ai' && t[2]=='ai' || t[0]=='player' && t[1]=='player' && t[2]=='player')  return true;
  if (t[3]=='ai' && t[4]=='ai' && t[5]=='ai' || t[3]=='player' && t[4]=='player' && t[5]=='player')  return true;
  if (t[6]=='ai' && t[7]=='ai' && t[8]=='ai' || t[6]=='player' && t[7]=='player' && t[8]=='player')  return true;
  if (t[0]=='ai' && t[3]=='ai' && t[6]=='ai' || t[0]=='player' && t[3]=='player' && t[6]=='player')  return true;
  if (t[1]=='ai' && t[4]=='ai' && t[7]=='ai' || t[1]=='player' && t[4]=='player' && t[7]=='player')  return true;
  if (t[2]=='ai' && t[5]=='ai' && t[8]=='ai' || t[2]=='player' && t[5]=='player' && t[8]=='player')  return true;
  if (t[0]=='ai' && t[4]=='ai' && t[8]=='ai' || t[0]=='player' && t[4]=='player' && t[8]=='player')  return true;
  if (t[2]=='ai' && t[4]=='ai' && t[6]=='ai' || t[2]=='player' && t[4]=='player' && t[6]=='player')  return true;
  if(t[0] && t[1] && t[2] && t[3] && t[4] && t[5] && t[6] && t[7] && t[8]) return true;
}

function move(id, role) {
  if(t[id]) return false;
  t[id] = role;
  document.getElementById(id).className = 'cell ' + role;
  !checkEnd() ? (role == 'player') ? ai() : null : reset()
}

function reset() {
  alert("Игра окончена!");
  location.reload();
}

Изначально хотелось сделать проверку на окончание игры с помощью рекурсии и пары условий.
Но, если играть честно (не набивать в одну строку десяток), то такой алгоритм не влезет в отведенные для него 9 строк. К тому же, я хотел сохранить переносы строк между функциями для сохранения читабельности кода.
В итоге сделал проверку через простой перебор всех вариантов (8 условий для победы/поражения, 1 для ничьи). Условие проверки получилось длинное, да и запихнул каждый блок if'а в 1 строку.
Ну и сжульничал немного, в html добавил 9 onclick'ов — по одному к каждой клетке.

Ссылки:
Fiddle, Github

Хабы: