«Крестики-нолики» на HTML и CSS

Давно хотел попробовать сделать «крестики-нолики» только на HTML и CSS, без использования скриптов, вот — сделал.

HTML+CSS only tic-tac-toe (24.29КиБ)

Играет на уровне мастера, то есть пытается либо выиграть, либо свести к ничьей. Вычисления позиций проводил через реализацию «крестиков-ноликов» Стефена Остермиллера. Там на ДжаваСкрипте, я написал обвязку для перебора и запускал через «Ви8». Поскольку мне хотелось придать игре налёт винтажности, добавил лёгкий фон конца девяностых, шрифт курсивом и тень. Всё как в старые добрые девяностые, возможно только анимированного ГИФа какого-нибудь нехватает.

Кстати, несмотря на всю винтажность, от браузера требуется поддержка CSS3, включая трансформации.

Я сильно не тестировал, спать уже надо ложиться. Если будут ошибки, пишите, постараюсь поправить, если только они не относятся к недостаткам алгоритма Остермиллера. Всё-таки это скорее концепт, чем полноценная игра.

программированиеcsshtml

Читайте также

Крестики-нолики на HTML CSS и прокрастинация
Крестики-нолики (38.95КиБ) Есть такое понятие — прокрастинация, это про «никогда не откладывай на завтра то, что можно сделать послезавтра».
2011
«Крестики-нолики» и printf
Очень люблю так называемое ненормальное программирование (нормального мне и на работе хватает), когда программируют ради преодоления каких-то препятствий, а не ради практического результата. С удовольствием занимаюсь им сам и очень люблю находить такие примеры у других.
2023
Pure HTML+CSS tic-tac-toe
«Крестики-нолики» на чистом CSS и HTML (без языка программирования) HTML+CSS only tic-tac-toe game master by Evgeny Stepanischev (http://bolknote.ru)
2011

Комментарии 20

sitnikov.vladimir@gmail.com № 2
Я правильно понимаю, что там баг?
https://bolknote.ru/files/ttt/#XXOOO-X-%E2 … -%E2%80%8B
Нажимаем в правую среднюю клетку и туда ставится нолик, хотя играем мы крестиками.
Ответить
MiRacLe № 4
а при попытке поиграть ещё раз — не видно поля (по меньшей мере в chrome 14)
Ответить
Евгений Степанищев (bolknote.ru) автор № 8
а при попытке поиграть ещё раз — не видно поля (по меньшей мере в

chrome 14)
Для Хрома это нормально — глючить на сложных селекторах. Увы, Хром только формально понимает CSS3, на практике — масса глюков.

Ответить
Внутреннее Коралио (kalvado.livejournal.com) № 6
Глюки, воспроизводимо машина ставит не те символы
1. Первый ход левый нижний угол, второй ход правый верхний. При втором ходе в клетку куда ткнул ставится 0 вместо крестика, а крестик совсем в другом месте

2. последовательность ходов: право-низ, лево-верх, право-середка, лево-низ; осталась одна клетка: https://bolknote.ru/files/ttt/#X-OOOXXOX
Тыкаем в нее, и вместо крестика и ничьей получается нолик и «я выиграла»
ФФ 7.0.1
Ответить
Роман Комаров № 13
bg.jpg — это не « HTML+CSS only» :) Можно попробовать повторить ту же текстуру (ну только без шумов) через градиенты а ля http://leaverou.me/css3patterns/
Ответить
Евгений Степанищев (bolknote.ru) автор № 15
Посмотрел, хорошая идея, спасибо! Исправлю баги, переделаю под такой фон. Только сегодня времени нет, может в самолёте завтра.
Ответить
Игорь № 19
ахаха, я понял в чем фишка. Комп не думает, у него просто на каждый ход пользователя уже подготовлен (заведомо запрограмирован) ответный шаг. Такой принцип «игры» подходит только в крестиках-ноликах и не может быть осуществлен в более сложных играх, типа шашек карт или шахмат. Уважаемый, програмист, сделайте мозги компьютеру, а то так не честно ).
Ответить