«Крестики-нолики» на HTML и CSS
Давно хотел попробовать сделать «крестики-нолики» только на HTML и CSS, без использования скриптов, вот — сделал.
 |
Играет на уровне мастера, то есть пытается либо выиграть, либо свести к ничьей. Вычисления позиций проводил через реализацию «крестиков-ноликов» Стефена Остермиллера. Там на ДжаваСкрипте, я написал обвязку для перебора и запускал через «Ви8». Поскольку мне хотелось придать игре налёт винтажности, добавил лёгкий фон конца девяностых, шрифт курсивом и тень. Всё как в старые добрые девяностые, возможно только анимированного ГИФа какого-нибудь нехватает.
Кстати, несмотря на всю винтажность, от браузера требуется поддержка CSS3, включая трансформации.
Я сильно не тестировал, спать уже надо ложиться. Если будут ошибки, пишите, постараюсь поправить, если только они не относятся к недостаткам алгоритма Остермиллера. Всё-таки это скорее концепт, чем полноценная игра.
Очень круто)
Я правильно понимаю, что там баг?
http://bolknote.ru/files/ttt/#XXOOO-X-%E2%80%8B-%E2%80%8B
Нажимаем в правую среднюю клетку и туда ставится нолик, хотя играем мы крестиками.
Комментарий для sitnikov.vladimir@gmail.com:
Да, видимо баг, спасибо! Завтра вечером посмотрю в чём дело.
а при попытке поиграть ещё раз — не видно поля (по меньшей мере в chrome 14)
http://bolknote.ru/files/ttt/#-XO-X-%E2%80%8B-%E2%80%8BO-
После этого шага ставится нолик.
Глюки, воспроизводимо машина ставит не те символы
Тыкаем в нее, и вместо крестика и ничьей получается нолик и «я выиграла»
ФФ 7.0.1
Видимо, какой-то общий баг, что ставится не тот знак. Посмотрю с чем это связано.
Комментарий для MiRacLe:
chrome 14)
Для Хрома это нормально — глючить на сложных селекторах. Увы, Хром только формально понимает CSS3, на практике — масса глюков.
Казалось бы, ничья. Ан нет:
http://bolknote.ru/files/ttt/#OXOXXOXO-
Комментарий для deadem.livejournal.com:
Ну, это один и тот же баг, очевидно :) Посмотрю в чём там дело.
кнопку «Новая игра» надо делать :)
Комментарий для oldTV:
Тоже верно :)
bg.jpg — это не « HTML+CSS only» :) Можно попробовать повторить ту же текстуру (ну только без шумов) через градиенты а ля http://leaverou.me/css3patterns/
Комментарий для Роман Комаров:
Могу в dataURI засунуть :)
Комментарий для Роман Комаров:
Посмотрел, хорошая идея, спасибо! Исправлю баги, переделаю под такой фон. Только сегодня времени нет, может в самолёте завтра.
А можно мне код проги скинуть? для учебы надо
Комментарий для Nat:
Какой проги вам надо скинуть код? Вы о чём вообще?
Круто, я крестики-нолики только на VBS умею делать ), до HTML еще не дорос.
ахаха, я понял в чем фишка. Комп не думает, у него просто на каждый ход пользователя уже подготовлен (заведомо запрограмирован) ответный шаг. Такой принцип «игры» подходит только в крестиках-ноликах и не может быть осуществлен в более сложных играх, типа шашек карт или шахмат. Уважаемый, програмист, сделайте мозги компьютеру, а то так не честно ).
Комментарий для Игорь:
HTML и CSS это не языки программирования, так что иначе никак.