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

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

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

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

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

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

Поделиться
Отправить
20 комментариев
dinoel

Очень круто)

sitnikov.vladimir@gmail.com

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

Евгений Степанищев (bolknote.ru)

Комментарий для sitnikov.vladimir@gmail.com:

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

MiRacLe

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

Станислав

http://bolknote.ru/files/ttt/#-XO-X-%E2%80%8B-%E2%80%8BO-

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

Внутреннее Коралио (kalvado.livejournal.com)

Глюки, воспроизводимо машина ставит не те символы

  1. Первый ход левый нижний угол, второй ход правый верхний. При втором ходе в  клетку куда ткнул ставится 0 вместо крестика, а крестик совсем в другом месте
  1. последовательность ходов: право-низ, лево-верх, право-середка, лево-низ; осталась одна клетка: http://bolknote.ru/files/ttt/#X-OOOXXOX
     Тыкаем в нее, и вместо крестика и ничьей получается нолик и «я выиграла»
    ФФ 7.0.1
Евгений Степанищев (bolknote.ru)

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

Евгений Степанищев (bolknote.ru)

Комментарий для MiRacLe:

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

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

Dead Emotion (deadem.livejournal.com)

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

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

Евгений Степанищев (bolknote.ru)

Комментарий для deadem.livejournal.com:

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

oldTV

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

Евгений Степанищев (bolknote.ru)

Комментарий для oldTV:

Тоже верно :)

Роман Комаров

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

Евгений Степанищев (bolknote.ru)

Комментарий для Роман Комаров:

это не « HTML+CSS only» :)

Могу в dataURI засунуть :)

Евгений Степанищев (bolknote.ru)

Комментарий для Роман Комаров:

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

Nat

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

Евгений Степанищев (bolknote.ru)

Комментарий для Nat:

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

Игорь

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

Игорь

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

Евгений Степанищев (bolknote.ru)

Комментарий для Игорь:

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

Популярное