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

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

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

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

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

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

dinoel (инкогнито)
23 октября 2011, 22:37

Очень круто)

sitnikov.vladimir@gmail.com (инкогнито)
23 октября 2011, 22:54

Я правильно понимаю, что там баг?
http://bolknote.ru/files/ttt/#XXOOO-X--
Нажимаем в правую среднюю клетку и туда ставится нолик, хотя играем мы крестиками.

bolk (bolknote.ru)
23 октября 2011, 23:06, ответ предназначен sitnikov.vladimir@gmail.com

Да, видимо баг, спасибо! Завтра вечером посмотрю в чём дело.

MiRacLe (инкогнито)
23 октября 2011, 23:14

а при попытке поиграть ещё раз - не видно поля (по меньшей мере в chrome 14)

Станислав (инкогнито)
23 октября 2011, 23:41

http://bolknote.ru/files/ttt/#-XO-X--O-

После этого шага ставится нолик.

Внутреннее Коралио (kalvado.livejournal.com)
24 октября 2011, 04:44

Глюки, воспроизводимо машина ставит не те символы
1. Первый ход левый нижний угол, второй ход правый верхний. При втором ходе в клетку куда ткнул ставится 0 вместо крестика, а крестик совсем в другом месте

2. последовательность ходов: право-низ, лево-верх, право-середка, лево-низ; осталась одна клетка: http://bolknote.ru/files/ttt/#X-OOOXXOX
 Тыкаем в нее, и вместо крестика и ничьей получается нолик и "я выиграла"
ФФ 7.0.1

bolk (bolknote.ru)
24 октября 2011, 07:41

Видимо, какой-то общий баг, что ставится не тот знак. Посмотрю с чем это связано.

bolk (bolknote.ru)
24 октября 2011, 07:45, ответ предназначен MiRacLe

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

Dead Emotion (deadem.livejournal.com)
24 октября 2011, 09:24

Казалось бы, ничья. Ан нет:

http://bolknote.ru/files/ttt/#OXOXXOXO-

bolk (bolknote.ru)
24 октября 2011, 09:43, ответ предназначен Dead Emotion (deadem.livejournal.com):

Ну, это один и тот же баг, очевидно :) Посмотрю в чём там дело.

oldTV (инкогнито)
24 октября 2011, 12:15

кнопку "Новая игра" надо делать :)

bolk (bolknote.ru)
24 октября 2011, 13:36, ответ предназначен oldTV

Тоже верно :)

Роман Комаров (инкогнито)
24 октября 2011, 21:39

bg.jpg — это не « HTML+CSS only» :) Можно попробовать повторить ту же текстуру (ну только без шумов) через градиенты а ля http://leaverou.me/css3patterns/

bolk (bolknote.ru)
24 октября 2011, 21:53, ответ предназначен Роману Комарову

это не « HTML+CSS only» :)
Могу в dataURI засунуть :)

bolk (bolknote.ru)
24 октября 2011, 22:45, ответ предназначен Роману Комарову

Посмотрел, хорошая идея, спасибо! Исправлю баги, переделаю под такой фон. Только сегодня времени нет, может в самолёте завтра.

Nat (инкогнито)
7 июня 2013, 19:57

А можно мне код проги скинуть? для учебы надо

Евгений Степанищев (bolknote.ru)
7 июня 2013, 21:15, ответ предназначен Nat

Какой проги вам надо скинуть код? Вы о чём вообще?

Игорь (инкогнито)
4 августа 2014, 15:31

Круто, я крестики-нолики только на VBS умею делать ), до HTML еще не дорос.

Игорь (инкогнито)
4 августа 2014, 15:51

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

Евгений Степанищев (bolknote.ru)
4 августа 2014, 20:05, ответ предназначен Игорю

HTML и CSS это не языки программирования, так что иначе никак.

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)