Как сделать судоку html css js

Sudoku

The script can also be downloaded from GitHub: https://github.com/DHTMLGoodies/SudokuJS.

License

• Script and PHP code: Apache Free License 2.0
• Sudoku Puzzles: Apache License 2.0 for 80 free puzzles,
  Commercial license(USD99) for 1600 puzzles.

Purchase commercial License

Price: USD99 (The rights to use the 1600 Sudoku Puzzles in the puzzles folder)

Demo

Restart Try another

The dimension(width and height) of the board is dynamic, based on the CSS dimension specified for the

Usage

Take a look at index.html in the zip file, and use it as a template when implementing the Sudoku Script.

Toggle between commercial and non-commercial use

If you have purchased a commercial license, enable it in sudoku-controller.php with this line: Example: $sudokuReader->useCommercial(); When enabled, the script will pick from the 1600 Sudoku Puzzles available in the puzzles folder. Otherwise it will fetch puzzles from the puzzles-free folder(80 puzzles, 10 for each difficulty).

Comments

Hi: I become interested in your software and I have the next questions: 1.- Can I install in a server? 2.- Is there a procedure for install? I use the index.html ans only appears the grid. 3.- Is there any discount in the price? 4.- Do you have a webpage? That´s all for the moment. I´ll wait for your answers. Regards.

Evaristo Romero Dominguez at 04:28AM, 2015/11/02.

Evaristo,Yes, this is a downloadable script which you can put on your server. There’s a download link at the top of the page. It can also be downloaded from GitHub https://github.com/DHTMLGoodies/SudokuJSTo use the script on your website, your server needs to support the PHP language. The install instruction is simply to copy the files to your web server. You cannot use this script using the file system, example: by opening a page from your local computer in your web browser. The address bar in your web browser will typical start with file:: if this is the case. You need to run it from a web server, i.e. with an address starting with http:/.A blank grid/board means that Sudoku’s are not loaded correctly from the server. It’s difficult to know for sure what’s wrong without seeing it live on your site. If you provide a link, I will probably be able to tell you more. But make sure that* Your web server supports the PHP language* The web address in your web browser(Chrome, Firefox etc) starts with http://

DHTMLGoodies at 08:23PM, 2015/11/07.

Are all these sudoku’s testen so that they only have 1 solution?
And that there is no guess work needed?

Kind regards
Roel

Roel at 08:50AM, 2019/05/22.
https://irongamers.ru/sale/key/2733826
JSorry at 02:29PM, 2021/06/19.

Авторитетное сообщение 🙂 , познавательно.

——
[url=https://global-smm.com/]как сделать ссылку в вк на инстаграм[/url]

Авторитетное сообщение 🙂 , любопытно.

——
[url=https://kriodetal.ru/zapchasti-k-vru/ehkspander-kk-2326-01-003.html]Экспандер КК 2326.01.003[/url]

Авторитетное сообщение 🙂 , заманчиво.

——
[url=https://top-sirop74.ru/siropy/]сироп для молочных коктейлей купить[/url]

А есть похожий аналог?

——
[url=https://mosgor-balkon.ru/price/finishing/]отделка лоджий цена в москве[/url]

А что-нибудь аналогичное есть?

Есть что-нибудь похожее?

Есть что-нибудь аналогичное?

Интересно, а аналог есть?

Любопытно, а аналог есть?

Генератор судоку на JavaScript (13 строчек)

После наплыва постов про реализацию различных игрушек на JavaScript в 30 строчек, решил тоже внести свой вклад в общее дело «30 строчек». Решил немного отойти от игр и реализовать генерацию судоку на JavaScript, но не уложился в 30 строчек. Надеюсь, что это маленькое недоразумение, не омрачит великое соревнование 30 строчек. Раньше доводилось писать скрипты для Corel Draw, которые генерировали 9 судоку на лист и создавали целый журнал. Оставалось только печатать и раздавать всем желающим.

• генерация судоку случайным образом
• ввод чисел (с проверкой на ввод числа) в пустые ячейки
• 13 строчек с учетом html и css

Принцип работы

Для генерации судоку используется подготовленны шаблон, который хранится в виде строки. Раньше я использовал несколько шаблонов, но для данного случая вполне сгодится и один. Немного странным образом организую перемешивание массива с цифрами от 1 до 9. Этот массив потребуется для замены цифр в шаблоне. Далее начинаем формировать таблицу. Используя шаблон и массив для замены цифр формируем ячейки, не забывая создавать текстовые поля для ввода.

Код

Код можно было еще ужать и объединить некоторые строки, но мне кажется такой вариант более удобный для восприятия.

Сам код

#sudoku td #sudoku .l #sudoku input  

Генератор судоку на JavaScript (6 строк)

На этой недели Хабрахабр будоражили различные поделки в 30 строчек на JavaScript. Чего только не было. Выкладывали гонки, аркады, космические стрелялки, змейки, тетрис, пианино и многое другое. И если сказать честно, то продолжаю публиковать в песочницу до сих пор. Я слишком поздно предложил свою поделку и она не попала в список тех, которые увидят многие. Может оно и к лучшему, т.к. я смог еще лучше оптимизировать код.

Особенностью реализации является:

• небольшой код (6 строк)
• 2 строчки HTML-кода
• 2 строчки CSS
• возможность разгадывать судоку вводя цифры в свободные поля
• реализована проверка вводимых данных и фильтрация разрешающая вносить только цифры

Выглядит это вот так:

Пример работы скрипта «Генератор судоку на JavaScript (6 строк)»

Генерация основывается на задействовании уже составленного шаблона и замещении его элемента случайными числами. Шаблон задаеся так:

var field = ‘0681594327597283416342671589934157268278936145156842973729318654813465792465729831’;

Ноль в начале шаблона необходим специально для удобства. Кто не поймет зачем это нужно, может задать вопрос в комментариях ниже.

Числа для замещения хранятся в массиве, который формируется следующим образом:

var arr = Array(1,2,3,4,5,6,7,8,9).sort(function() );

К сожалению в javaScript нет php функции и поэтому пришлось реализовать перемешивание подобным образом. Можно было использовать другой вариант, тогда случайность была бы более случайной (См. javascript shuffle array). Но для данного примера решил ограничиться такой реализацией.

Случайным образом формирую строку для вывода используя за основу известную цифру или ячейку для ввода.

var st = (Math.random()*10>6) ? ‘

‘ : ‘

Приведу весь код целиком:

#sudoku td
#sudoku input

А вот и рабочий вариант: судоку

Если возникнут вопросы, то с удовольствием отвечу на них в комментариях.

Разработка Судоку

Разработка — создание программного продукта с помощью информационных технологий (IT). В современном мире востребованы разные направления разработки: разработка систем искусственного интеллекта (AI), разработка виртуальной реальности (VR), разработка дополненной реальности (AR), разработка игр (Game Dev), разработка мобильных приложений для Android и iOS (Mobile), разработка веб-приложений для сайтов (Web)… Но начинающим джунам (от англ. Junior), мечтающим связать свою жизнь с высокими технологиями и стать успешными разрабами, прежде чем осваивать полюбившийся многим Python, резонно постичь основы веб-программирования, заложив прочный фундамент технического бэкграунда. Поскольку веб-направление относительно легко освоить, и при этом не нужно искать и устанавливать дополнительное программное обеспечение (ПО). Достаточно наличия простенького компьютера с браузером в операционной системе! Для успешного взаимодействия с кодом разработчикам полезно прокачивать память, логику и образное мышление. Осуществлять это можно посредством регулярной практики кодинга (написания кода), решения логических задач, участия в развивающих играх, проведения мыслительных экспериментов, знакомства с кейсами опытных разработчиков, чтения тематической литературы, просмотра образовательных видеоматериалов, прохождения курсов повышения квалификации и других способов саморазвития… Как говорят мудрецы: «Проживайте дни так, словно завтра вам умирать, стараясь успеть сделать как можно больше! Учитесь так, словно вы собираетесь жить вечно, стараясь познать себя и окружающий мир как можно лучше!» Незнакомые языки программирования эффективней всего изучать на конкретных примерах, стараясь сразу реализовывать на практике приобретённые теоритические знания и оттачивать своё мастерство (подобно филигранному преобразованию алмаза в огранённый бриллиант). В психологии существует теория о том, что информация наилучшим образом воспринимается и запоминается мозгом в моменты, когда испытываются сильные эмоции. И игровые примеры, как потенциальный источник ярких впечатлений, можно считать весьма эффективным обучающим инструментом. Таким образом, чтобы знакомство с особенностями веб-разработки не было утомительно скучным, прокачивать мозг, осваивая новый скилл, резонно именно в игровой форме! К тому же, в разработанную собственными силами игру потом можно будет поиграть! В качестве такого наглядного игрового примера можно использовать Судоку — популярную японскую игру-головоломку, способствующую формированию внимательности, развитию логического мышления и тренировке памяти у детей и взрослых людей! Программирование, по своей сути, является процессом записи идей с помощью специальных служебных слов выбранных языков программирования. Освоить синтаксис незнакомых языков возможно за несколько недель, причём некоторые отличительные особенности построения служебных конструкций могут запомниться после просмотра первого же примера с кодом! В частности, это касается особенностей использования цикла for и условного оператора if, с помощью которых можно реализовывать множество разных задумок. Но при этом важно чётко представлять в голове архитектуру будущего программного продукта и научиться придумывать эффективные алгоритмы (определённые последовательности действий, приводимые к желаемому результату), которые должны быть реализованы средствами языков программирования. Например, для реализации игровой логики Судоку как минимум понадобятся пользовательский интерфейс, обработчики событий для взаимодействия с пользователем и переменные для хранения массива данных.

Мысленные эксперименты

1. Вначале М должен перевезти на другой берег козу (тогда на первом берегу останутся капуста и волк, равнодушный к вегетарианству).
2. После этого М должен вернуться один к исходному (первому) берегу.
3. Затем М должен перевезти на другой берег волка.
4. М должен вынужденно вернуться с козой на первый берег (чтобы волк не съел козу).
5. Далее М должен перевезти на другой берег капусту.
6. М должен вернуться на первый берег за козой (оставив на другом берегу волка с капустой).
7. М должен перевезти на другой берег козу.
8. Успешно преодолев препятствие благодаря пониманию основ алгоритмизации, М должен продолжить путь на конкурс!

В данном случае очерёдность 3 и 5 пунктов не имеет значения (М может перевезти вместо волка капусту, тем не менее, после этого М всё равно придётся вернуться с козой, чтобы она не съела капусту, а затем М придётся перевезти волка). Но остальные пункты должны выполняться строго в указанном порядке. Подобные задачи можно использовать в качестве тренинга для развития мышления.

Также помимо умения придумывать и реализовывать эффективные алгоритмы программисту важно знать технический английский язык. Поскольку служебные слова, используемые в языках программирования, как правило, имеют английское написание. Убедиться в этом можно на примере синтаксиса гармонично дополняющего друг друга трио: HTML, JavaScript и CSS!

HTML (HyperText Markup Language)

HTML — язык разметки гипертекста, с помощью которого можно создавать специальные инструкции для обработки контента веб-документов. В рамках разработки собственного веб-приложения в первую очередь резонно создать на компьютере отдельную тематическую папку с символическим именем GameDev. Внутри папки следует создать пустой текстовый документ с именем sudoku и расширением .html (для установки расширения файла может потребоваться изменить настройки операционной системы, указав, чтобы в папках отображались расширения для зарегистрированных типов файлов). Затем необходимо открыть файл с помощью встроенного в операционную систему текстового редактора. И скопипастить (от англ. Copy+Paste) код из листинга-1.

Листинг-1. Структура HTML-документа

Заголовок первого уровня


Блок информации (дивизион), где может содержаться самостоятельный контент или сгруппированные секции с разным контентом, например: 
Заголовки второго уровня




Списки, нумерованные буквами 
римскими числами 
или арабскими числами 
 




Списки с маркером-кругом 
маркером-окружностью 
или маркером-квадратом 
 













Таблицы
с одной
двумя
или большим числом ячеек

Заголовки третьего уровня

Формы 
с 
и 

Абзацы (параграфы) с текстовым контентом, включая жирный, курсивный или подчёркнутый текст

Ссылки и прочие объекты… 

После этого следует сохранить файл (например, в кодировке UTF-8 с помощью команды «Сохранить как…») и открыть обновлённый текстовый документ через браузер, чтобы посмотреть, как HTML-код будет отображаться в программе для просмотра интернет-контента. Для удобства, чтобы не приходилось постоянно переключаться между окнами, окно браузера можно свернуть на половину экрана и расположить его в левой части, а окно текстового редактора с кодом — в правой половине. С таким положением окон можно будет смотреть на визуальный пользовательский интерфейс и параллельно редактировать код.

В данном случае в окне браузера можно заметить, что название вкладки содержит текст из тайтла «Титульное название страницы». А в самом окне находятся большой «Заголовок первого уровня» с полужирным начертанием шрифта, после которого сразу следует блок информации. При этом скрытый текст комментария не отображается (также должно отсутствовать изображение picture.jpg, поскольку этого файла нет в текущей папке GameDev).

Этот простейший пример наглядно иллюстрирует типичную структуру веб-документа. В начале документа принято указывать его тип. Указание подобных инструкций осуществляется с помощью специальных служебных слов, заключённых в угловые скобки (символы «меньше» и «больше»). Такую запись принято называть дескриптором или тегом. Чаще всего HTML-теги представлены в виде парного контейнера: открывающего и закрывающего тегов. Но некоторые теги могут быть одиночными, как специальный тег с объявлением типа документа , отличием которого также является наличие восклицательного знака после первой скобки.

Следом за доктайпом указываются признак начала документа в виде открывающего тега , внутри которого можно определить используемый в документе язык lang=»ru», и признак конца документа в виде закрывающего тега со слэшем (косой чертой). Между ними находятся теги …, предназначенные для служебных заголовков, и тело документа … для указания видимого пользователю контента. В разделе заголовков традиционно указывают название документа между тегами и специальные мета-теги со служебными спецификациями. В теле документа располагается HTML-код c указанием обрабатываемого контента, представляющего предполагаемую ценность для пользователя.

В случаях, когда в документах оказывается много данных для обработки, допустимо добавлять скрытые комментарии с вспомогательными подсказками, облегчающими код-ревью (просмотр) или редактирование кода спустя несколько месяцев с момента разработки. HTML-комментарии пишутся подобно тегам в угловых скобках с добавлением двойных дефисов (минусов) по краям и восклицательного знака после первой скобки . Но для экономии времени и места комментарии можно заменять говорящими идентификаторами (id) внутри тегов. Например, в HTML-коде можно использовать блок

с атрибутом . Такой id (подобно комментарию) способен указать на игровую тематику блока. Кроме того, id позволяет получить доступ к HTML-элементу и считать или изменить его содержимое с помощью JavaScript-сценария!

Листинг-2. HTML-заготовка для игры

 
 
 
 
 



 
Судоку
 
Загрузка…

В листинге-2 представлена сырая (предварительная) заготовка для будущей игры, которую следует скопипастить в HTML-документ вместо примера из листинга-1. В начале HTML-кода в разделе заголовков помимо тайтла добавлены три мета-тега с указанием кодировки документа, параметров отображения документа на мобильных устройствах и краткого описания содержимого документа. А также добавлен признак подключения внешнего JavaScript-сценария. Далее внутри тега с помощью обработчика события onLoad браузеру сообщается о потребности в автозапуске JavaScript-функции с именем GUI() сразу при открытии веб-документа. В самом теле документа указываются заголовок первого уровня с текстом «Судоку» и игровой блок с текстом-заглушкой «Загрузка…», который будет отображаться до момента загрузки внешнего сценария и запуска JS-функции GUI() для внедрения в блок пользовательского интерфейса приложения.

JS (JavaScript)

JavaScript — объектно-ориентированный язык программирования (с адаптированным синтаксисом языка C++), который можно использовать в frontend-разработке интерактивных веб-приложений, выполняющихся в клиентском браузере пользователя. JS-код небольшого объёма допустимо располагать в произвольном месте документа между тегами . Но для удобочитаемости код сценариев традиционно выносят в отдельные текстовые файлы, которые подключают к нужным документам (лучше в разделе заголовков после мета-тегов), как показано в примере из листинга-2. Для этого в папке GameDev необходимо создать новый текстовый документ с именем script и расширением .js, который также следует открыть с помощью текстового редактора (и расположить открывшееся окно в правой части экрана). Затем можно приступить к программированию, начав с создания функции для формирования пользовательского интерфейса.

Листинг-3. Графический пользовательский интерфейс

function GUI() var ui=''; 
for(i=1;i <10;i++)ui+=''; 
for(j=1;j <10;j++)ui+=' ' 
> 
ui+='' 
> 
ui+=''; 
document.getElementById('game').innerHTML=ui
>
/* Фрагмент внедрённого HTML-кода













… 

 */

В листинге-3 приведён пример внедрения HTML-кода в блок с из JS-функции с символическим именем GUI (от англ. Graphical User Interface), объявленной в начале кода с помощью предшествующего служебного ключевого слова function. Как и в случае с id, имена JS-функций и всех используемых переменных резонно подбирать таким образом, чтобы они чётко соответствовали своему назначению и были понятны даже сторонним кодерам при просмотре кода.

После функции GUI() представлен JS-комментарий с примером того, как браузер будет воспринимать содержимое обновлённого контейнера

в документе после выполнения операторов функции и внедрения фрагмента HTML-кода. Данный пример показывает, что написание всего нескольких строк JS-кода может сэкономить байтовое пространство (объём), позволяя быстрее загружать документ с лёгким весом и, следовательно, быстрее начинать выполнение кода, а также время разработчика, избавляя от рутинного ввода большого объёма информации. Иными словами, JS-сценарии можно использовать не только для чистого программирования, но и для редактирования исходного HTML-кода.

В приведённом примере текст закомментирован с помощью одиночных косых черт и звёздочек /*…*/. Такую конструкцию принято использовать для многострочных комментариев, но для небольшого однострочного текста допустимо использовать парные слэши // перед комментарием. В отличие от HTML-комментариев, без которых можно обойтись, в тело функций уместно добавлять JS-комментарии, поясняющие отдельные фрагменты выполняемого кода (поскольку в некоторых случаях легко понять, ЧТО делает конкретная строчка кода, но сложно понять, ЗАЧЕМ она это делает). Также в ряде случаев может возникнуть необходимость закомментировать неиспользуемые фрагменты кода (например, при отладке сценария). Но в данном случае комментарий приводится в качестве наглядного примера, демонстрирующего, как несколько строчек JS-кода могут заменить большой HTML-фрагмент!

После формирования игровой таблицы резонно предусмотреть ограничения на ввод чисел в текстовые поля. По правилам Судоку в ячейках должны находиться только натуральные числа от 1 до 9. Поэтому в функции GUI() для полей ввода логично указать максимальную длину в 1 символ с помощью атрибута maxLength=1 в теге . Дополнительно можно добавить проверку на соответствие вводимых символов правилам игры, чтобы удалять все некорректные символы. Для реализации такой проверки достаточно прописать всего одну строчку JS-кода!

Листинг-4. Проверка вводимых символов

function InpChk(el) /* Если значение не число или 0, тогда очистить поле */ 
if(isNaN(el.value) || el.value==0)
>

В листинге-4 приведён пример функции с аргументом — специальным параметром для передачи дополнительных значений. В данном примере для хранения такого параметра используется переменная el, которой будет передаваться ссылка на проверяемый элемент при вызове этой функции в обработчике события. Несмотря на краткость, название переменной el (от англ. Element) и название самой функции InpChk (от англ. Input+Check) чётко отражают назначение кода!

Для запуска функции InpChk() необходим триггер — наступление особого события, инициируемого пользователем. Учитывая назначение функции, подходящим событием является ввод символа с клавиатуры в любое текстовое поле. Поэтому для вызова функции InpChk() внутрь каждого тега из листинга-3 следует добавить обработчик события onKeyUp=»InpChk(this)», через который с помощью служебного слова this функции в качестве параметра будет передаваться ссылка на активный элемент.

В теле функции для считывания содержимого элемента используется свойство value, связанное с аргументом el через точку. Проверка значения активного текстового поля осуществляется в условном операторе if. В данном случае с помощью служебной JS-функции isNaN (от англ. is Not a Number), логического «или» || и оператора сравнения == (читается «равно») выполняется проверка одновременно двух условий: если значение не является числительным или равняется 0, текстовому полю присваивается новое значение в виде пустой строки.

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

Учитывая размер игрового поля, для хранения и обработки данных из ячеек 9×9-таблицы потребуется 81 переменная. Такое количество переменных удобно представить в формате массива вида НазваниеМассива[индекс] или в формате двумерного массива вида НазваниеМассива[индекс1][индекс2]. Для этого в коде сценария необходимо объявить глобальную переменную с именем A (от англ. Array), указав, что она будет использоваться для хранения массива данных.

Листинг-5. Создание двумерного массива

/* i — номер строки,
j — номер столбца */
var A=new Array();
for(i=1;i <10;i++)<
A[i]=new Array(); 
//for(j=1;j<10;j++)
>
A[1][1]=3;A[1][2]=6;A[1][3]=7;A[1][4]=5;A[1][5]=4;A[1][6]=2;A[1][7]=1;A[1][8]=8;A[1][9]=9;
A[2][1]=1;A[2][2]=4;A[2][3]=5;A[2][4]=3;A[2][5]=9;A[2][6]=8;A[2][7]=7;A[2][8]=2;A[2][9]=6;
A[3][1]=2;A[3][2]=9;A[3][3]=8;A[3][4]=6;A[3][5]=7;A[3][6]=1;A[3][7]=4;A[3][8]=3;A[3][9]=5;
A[4][1]=6;A[4][2]=5;A[4][3]=4;A[4][4]=1;A[4][5]=2;A[4][6]=7;A[4][7]=8;A[4][8]=9;A[4][9]=3;
A[5][1]=8;A[5][2]=3;A[5][3]=9;A[5][4]=4;A[5][5]=5;A[5][6]=6;A[5][7]=2;A[5][8]=7;A[5][9]=1;
A[6][1]=7;A[6][2]=1;A[6][3]=2;A[6][4]=9;A[6][5]=8;A[6][6]=3;A[6][7]=6;A[6][8]=5;A[6][9]=4;
A[7][1]=4;A[7][2]=7;A[7][3]=6;A[7][4]=8;A[7][5]=3;A[7][6]=5;A[7][7]=9;A[7][8]=1;A[7][9]=2;
A[8][1]=9;A[8][2]=8;A[8][3]=3;A[8][4]=2;A[8][5]=1;A[8][6]=4;A[8][7]=5;A[8][8]=6;A[8][9]=7;
A[9][1]=5;A[9][2]=2;A[9][3]=1;A[9][4]=7;A[9][5]=6;A[9][6]=9;A[9][7]=3;A[9][8]=4;A[9][9]=8;

В листинге-5 представлен фрагмент JS-кода с созданием массива A, содержащего 81 переменную с числовыми значениями. В JS глобальные переменные можно объявлять в произвольном месте кода по мере необходимости (например, перед функциями, в которых они должны использоваться). Но для экономии места резонно перечислять все глобальные переменные через запятую в самом начале сценария!

В начале кода приведён пример двухстрочного комментария внутри конструкции /*…*/. Затем с помощью служебных слов var и new Array() объявляется пустой массив с именем A. При помощи цикла for с шагом i++ (краткая запись i++ соответствует записи i=i+1 и увеличивает счётчик на 1) создаётся 9 элементов массива с индексами от 1 до 9, каждый из которых также становится массивом. Таким образом, массив A[i] преобразовывается в двумерный (двойной) массив вида A[i][j], в котором первый индекс [i] соответствует табличной строке, а второй индекс [j] — табличному столбцу. Строчка кода for(j=1;j <10;j++)с присваиванием элементам массива изначальных нулевых значений во втором (внутреннем) цикле for является избыточной, поскольку после первого (внешнего) цикла for всем элементам массива присваиваются новые значения (поэтому она представлена в виде однострочного комментария, демонстрирующего, как можно обращаться к элементам массива по их индексам).

После формирования массива данных можно приступить к выводу его значений на экран. Для этого некоторым изначально пустым текстовым полям нужно присвоить числовые значения переменных, хранящихся в массиве. При этом резонно внедрить в код генератор случайных чисел, помогающий подбирать разные текстовые поля при каждом запуске игры (чтобы игра не получилась скучной).

Листинг-6. Генератор случайных чисел

function rnd(hi) var r=Math.floor(Math.random()*hi)+1; 
return r
>

В листинге-6 приведён пример функции с возвращаемым значением. В теле функции создаётся локальная переменная r (от англ. Random) для хранения случайного числа. С помощью метода random() объекта Math, применяемого в JS при математических операциях, генерируется случайное число с плавающей точкой в диапазоне от 0 до 1. Затем число умножается на аргумент функции hi (от англ. High), представляющий собой верхнюю границу генерируемого числа. При помощи метода floor() объекта Math от результата умножения отсекается дробная часть после запятой. И к полученному целому числу прибавляется 1, символизирующая нижнюю границу генерируемого числа. Итоговый результат присваивается переменной r и возвращается в качестве значения функции с помощью служебного слова return. Для использования полученного генератора и заполнения полей необходимо усовершенствовать код функции GUI().

Листинг-7. Пользовательский интерфейс 2.0

function GUI() var n,ui=''; 
for(i=1;i<10;i++)'; 
for(j=1;j <10;j++)// Генерация случайных чисел 
if(j==1) 
if(j==4) 
if(j==7) 
ui+='' 
> 
ui+='' 
> 
ui+='
 if(j==n) 
else 
ui+='>
'; 
document.getElementById('game').innerHTML=ui
>

В листинге-7 представлен обновлённый вариант функции GUI() с добавленной переменной n для хранения случайных чисел. В начале второго цикла for были добавлены три условных оператора if для генерации чисел с помощью функции rnd() при первой, четвёртой и седьмой итерациях (чтобы выбрать номер открытой ячейки в каждой из трёх малых 3×3-квадратных секций). В конце второго цикла for добавлен ещё один if, проверяющий, совпадает ли номер столбца ячейки со случайным числом. Если условие выполняется, к переменной ui внутрь тега с помощью атрибута value добавляется значение из массива данных A[i][j] и признак недоступности с помощью атрибута disabled. Если условие не выполняется, внутрь тега добавляется обработчик события со ссылкой на функцию для проверки вводимых символов.

После внесённых изменений в код функции GUI() получился полноценный игровой уровень. При каждом запуске полученной игры изначально будут открываться ячейки с разными номерами. Но, учитывая, что значения берутся из одного массива A, числа в каждой из 81 ячейки всегда будут одинаковыми. Чтобы этого избежать, можно создать базу данных из 10 или 100 разных массивов. Тогда при запуске новой игры загружались бы разные массивы. Но и в этом случае количество уровней всё равно было бы ограничено количеством массивов. Поэтому вместо создания альтернативных массивов для новых уровней резонно перемешивать числа в единственном массиве A.

Судоку по сути представляет собой квадратную алгебраическую матрицу, в которой можно менять местами строки и столбы. Главное, чтобы в строках, в столбцах и в 3×3-секциях Судоку не было повторяющихся чисел. С точки зрения разработчика это означает, что сумма чисел от 1 до 9 в каждой строке, в каждом столбце и в каждой секции должна равняться 45 (1+2+3+4+5+6+7+8+9=45). А, как известно из школьного курса элементарной математики, от перестановки мест слагаемых сумма не меняется! Следовательно, в соседних горизонтальных и вертикальных малых 3×3-квадратах можно поменять местами строки или столбцы. Например, в первой строке первой секции первый, второй и третий столбцы можно поставить шестью разными способами: , , , , или . То же касается и расположения первых трёх строк в первом столбце, и расположения самих 3×3-секций. Иными словами, можно создать специальную функцию, которая бы перемешивала значения трёх сгруппированных элементов.

Листинг-8. Триады

function tri() var sw=rnd(6),t=new Array(); 
switch(sw) case 1:t[1]=1;t[2]=3;t[3]=2;break; 
case 2:t[1]=2;t[2]=1;t[3]=3;break; 
case 3:t[1]=2;t[2]=3;t[3]=1;break; 
case 5:t[1]=3;t[2]=2;t[3]=1;break; 
default:t[1]=3;t[2]=1;t[3]=2 
> 
return t
>

В листинге-8 приведён пример функции tri(), которая возвращает массив данных из трёх чисел от 1 до 3, представленных в произвольном порядке. В теле функции объявляются локальная переменная sw (от англ. Switch), которой с помощью функции rnd() присваивается случайное число в диапазоне от 1 до 6, и пустой массив t (от англ. Triad). Затем вместо привычного условного оператора if используется оператор переключения switch, который сравнивает значение sw с числовыми вариантами, указанными после служебного слова case, и включает выполнение соответствующих действий (расположенных между двоеточием и служебным словом break). При этом, если переменная sw будет равна 4 или 6, выполнятся действия, указанные после служебного слова default. Таким образом, после выполнения оператора switch в массиве t окажутся три числа в произвольном порядке. Для перемешивания сгруппированных троек можно создать отдельную функцию или дополнить код в начале функции GUI().

Листинг-9. Обмен данных массива

function mix() var col,m=new Array(),row; 
for(i=0;i <7;i+=3)// Генерация столбцов 
col=tri(); 
for(j=1;j <10;j++)// Считывание столбцов 
m[1]=A[j][1+i]; 
m[2]=A[j][2+i]; 
m[3]=A[j][3+i]; 
// Перемешивание столбцов 
A[j][1+i]=m[col[1]]; 
A[j][2+i]=m[col[2]]; 
A[j][3+i]=m[col[3]] 
> 
// Генерация строк 
row=tri(); 
for(j=1;j <10;j++)// Считывание строк 
for(l=1;l<4;l++) 
// Перемешивание строк 
for(l=1;l<4;l++)>>>

В листинге-9 представлен пример использования функции tri() для перемешивания столбцов и строк игровой таблицы. В начале кода объявляются локальные переменные col (от англ. Column) для хранения массива номеров перемешиваемых столбцов, m (от англ. Mixer) для временного хранилища обновляемых данных и row (от англ. Row) для хранения массива номеров перемешиваемых строк. Затем внутри первого цикла for с шагом i+=3 (i=i+3) переменой col с помощью функции tri() присваивается массив из трёх чисел, причём по задумке при каждой итерации цикла порядок чисел должен меняться. Во втором цикле for с привычным шагом j++ (j=j+1) создаются три элемента массива m, которым присваиваются значения из глобального массива A. Далее данные выбранной тройки элементов глобального массива A обновляются на новые значения из временного хранилища m в порядке, определяемом тройкой перемешанных чисел из массива col (например, если при вызове функции tri() будет сформирован порядок , вместо первого столбца должен оказаться второй, вместо второго — третий, а вместо третьего — первый). Аналогичным образом перемешиваются тройки строк, но в данном примере в третьем цикле for для считывания и обмена данных между массивами m и A создаются дополнительные вложенные циклы for с шагом l++ (l=l+1), позволяющие сделать запись более компактной и сэкономить объём документа. Для активации перемешивания чисел в начало функции GUI() следует добавить вызов созданной функции mix() либо скопипастить туда весь код.

После внесённых изменений при каждом запуске функции GUI() должен формироваться новый уровень со случайными числами-подсказками. Но при этом сами уровни будут весьма сложными (особенно для новичков), поскольку в коде функции GUI() для каждой игры изначально предусмотрено открытие лишь 27 ячеек из 81. Упростить игровой процесс для начинающих игроков можно с помощью внедрения дополнительной опции с подсказками, открывающими закрытые ячейки. Реализовать это можно, придерживаясь разной логики: открыть все угловые ячейки, полностью открыть одну из строк, полностью открыть столбец, открыть одну из 3×3 секций, открыть ячейку, выбранную пользователем. Но для поддержания эффекта неожиданности резонно вновь воспользоваться генератором случайных чисел!

Листинг-10. Игровые подсказки

var HN=0;
function hint() /* Если счётчик меньше 15, выполнить код */ 
if(HN <15)var col=new Array(),n=0,row=new Array(); 
for(i=1;i <10;i++)for(j=1;j <10;j++)if(document.getElementById('i'+i+j).value=='') 
>> 
if(n>0) if(n>1) 
document.getElementById('i'+row[n]+col[n]).value=A[row[n]][col[n]]; 
document.getElementById('i'+row[n]+col[n]).disabled=1 
>else
>>

В листинге-10 приведён пример реализации игровых подсказок, которыми можно воспользоваться до 15 раз. Перед использованием функции необходимо объявить глобальную переменную HN (от англ. Hint+Number) для отслеживания количества запрошенных подсказок, значение которой проверяется в начале кода. Если при вызове функции значение HN будет меньше 15, счётчик увеличивается на 1. Далее внутри if объявляются параллельные массивы col и row для хранения номеров столбцов и строк ячеек и переменная n для хранения количества элементов этих массивов. Внутри двух циклов for с помощью if проверяются значения всех текстовых полей из игровой таблицы. Если проверяемая ячейка оказывается пустой, счётчик n увеличивается на 1, а в массивы row и col записываются номера строки и столбца пустой ячейки.

После выполнения циклов for в if проверяется значение счётчика n. Если была зафиксирована хотя бы одна пустая ячейка, во вложенном if уточняется количество таких ячеек. Если количество пустых ячеек окажется больше 1, при помощи функции rnd() генерируется случайное число в диапазоне от 1 до n, и это число присваивается переменной n, перезаписывая её старое значение. Затем в пустое текстовое поле записывается значение из глобального массива A с индексами row[n] и col[n]. А само поле становится заблокированным для изменений с помощью активации свойства disabled, значение которого меняется на 1 (булеву истину).

Внедрение в код алгоритма с подсказками позволит дополнительно открыть 15 чисел-подсказок в начале каждой игры (и останется заполнить меньше половины ячеек), что должно помочь начинающим игрокам в поисках успешного решения Судоку! А, чтобы игрок мог убедиться в правильности решения Судоку, необходимо добавить финальную проверку всех введённых данных.

Листинг-11. Проверка по массиву

function chk() var err=0; 
for(i=1;i <10;i++)for(j=1;j <10;j++)if(document.getElementById('i'+i+j).value!=A[i][j]) 
>> 
/* if(err>0)else */ 
err=(err>0)?'Количество ошибок: '+err:'Судоку решена!'; 
alert(err)
>

В листинге-11 представлена реализация самой простой проверки решения Судоку — сравнение значений ячеек игровой таблицы со значениями данных из глобального массива A. В начале функции с именем chk (от англ. Check) объявляется локальная переменная err (от англ. Error) для мониторинга ошибок. Внутри двух циклов for с помощью if и оператора сравнения != (читается «не равно») проверяются значения текстовых полей. Если значение проверяемой ячейки не совпадает со значением элемента массива A с теми же индексами i и j, счётчик err увеличивается на 1. Далее err присваивается строковое значение с помощью сокращённой формы условного оператора if…else (для наглядности привычная форма записи представлена в комментарии). Если в ходе проверки была зафиксирована хотя бы одна ошибка, err присваивается строка «Количество ошибок:» с добавлением старого значения счётчика err. Иначе err присваивается строка «Судоку решена!». В конце функции при помощи служебной функции alert() вызывается всплывающее диалоговое окно с текстовым сообщением из обновлённой переменной err, передаваемым в качестве параметра.

Такая проверка проста в реализации, но она может принять правильное решение за ошибочное, если порядок введённых чисел не будет в точности соответствовать значениям массива A. А это совсем не комильфо и даже полный моветон, поскольку, как известно, некоторые задачи могут иметь несколько решений! В ряде случаев в строках/столбцах из соседних секций Судоку встречаются симметричные ячейки, которые можно заполнить, например, числами и либо и . И оба таких решения будут верным, но проверка по массиву засчитает лишь тот вариант, который будет совпадать со значениями из массива. Поэтому алгоритм проверки решения Судоку резонно реализовать в соответствии с иной логикой, сравнивая суммы чисел из строк, столбцов и малых 3×3-квадратов с 45 (1+2+3+4+5+6+7+8+9=45). Также, чтобы не раздражать пользователя, вынуждая совершать дополнительные действия, закрывая диалоговые окна после каждой проверки, в качестве альтернативы можно внедрить в пользовательский интерфейс дисплей для отображения сообщений!

Листинг-12. Универсальная проверка

function chk() var col=0,err=0,row=0,s9=0,sc,sr; 
for(i=1;i <10;i++)for(j=1;j <10;j++)// Сумма в строках 
sr+=1*document.getElementById('i'+i+j).value; 
// Сумма в столбцах 
sc+=1*document.getElementById('i'+j+i).value 
> 
if(sc!=45||sr!=45) 
> 
// Сумма в 3x3-секциях 
if(!err) for(i=1;i <4;i++)for(j=1;j<4;j++) 
if(i==3) if(s9!=45) 
s9=0;col+=3; 
if(col>6) 
if(row<7) 
>>> 
// Формирование сообщения 
document.getElementById('scr').innerHTML=(err)?'Эпик-фэйл!':'Судоку решена!'; 
// Цвет текста сообщения 
document.getElementById('scr').style.color=(err==1)?'#bb0000':'#009900'
>

В листинге-12 приведён пример реализации универсальной проверки, учитывающей все возможные варианты решения Судоку. В начале усовершенствованной функции chk() помимо переменной err объявляются локальные переменные col для перехода между столбцами 3×3-секций, row для перехода между строками 3×3-секций, s9 (от англ. Sum+9) для вычисления суммы чисел в каждой из девяти 3×3-секций, sc (от англ. Sum+Column) для вычисления суммы чисел в столбцах и sr (от англ. Sum+Row) для вычисления суммы чисел в строках. Внутри двух циклов for одновременно вычисляются суммы чисел в строках и столбцах. Для этого в первом цикле for переменным sc и sr присваиваются 0. Затем во втором цикле for к значениям sc и sr прибавляются значения текстовых полей, умноженные на 1, с разными комбинациями индексов (i и j, j и i).

По умолчанию значения текстовых полей относятся к строковому типу данных String. А умножение значений на 1 переводит строковый тип в числовой Number. И если забыть изменить тип данных, при сложении двух строковых значений вместо суммы чисел получится строка из двух элементов (например, ‘1’+’2’=’12’, но ‘1’*1+’2’*1=1+2=3).

После завершения итераций второго цикла for в if проверяются суммы строк и столбцов. Если одна или обе суммы будут отличны от 45, переменной err присвоится 1, а выполнение циклов for досрочно прервётся служебным словом break. После вычисления сумм всех строк и столбцов в if проверяется истинность переменной err.

В JS числовые значения 0 и 1 соответствуют булевым false и true. Поэтому в случаях, когда переменные в условии if равняются только 0 или 1, допустимо относить их числовые значения к условному типу Boolean. При этом, если в условии такие значения должны быть равны true, можно не указывать оператор сравнения и использовать краткую запись. В примере краткая запись в условии !err соответствует записи !err==true (читается «не err истина»). Но чтобы не запутаться, можно использовать привычное условие err==0.

Таким образом, если проверка строк и столбцов не выявит ошибок и в переменной err останется 0 (булева ложь), будут выполнены вложенные циклы for для проверки суммы чисел в девяти 3×3-секциях. Для этого во внутреннем цикле for с шагом j++ к переменной s9 добавляются значения текстовых полей с индексами [i+row] и [j+col], умноженные на 1. Далее в if производится перехват третьей итерации внешнего цикла for (при i==3). С помощью вложенного if проверяется сумма чисел первой 3×3-секции. Если эта сумма будет отлична от 45, переменной err присвоится 1, а выполнение циклов for досрочно прервётся служебным словом break. Иначе переменная s9 обнулится, а к переменной col прибавится 3 для горизонтального перехода к соседней группе 3×3-секций. Затем в if проверяется значение col. Если это значение окажется больше 6, переменная col обнулится, а переменная row увеличится на 3 для вертикального перехода к соседней группе 3×3-секций. После этого в if проверяется значение row. Если это значение окажется меньше 7, произойдёт обнуление счётчика i внешнего цикла for, и итерации циклов повторятся ещё несколько раз (до тех пор, пока переменная row не окажется больше или равна 7 либо сумма s9 не станет отличной от 45).

В конце функции с помощью краткой записи условия (err) формируется сообщение, которое записывается в элемент с (от англ. Screen), выступающий в роли дисплея. Если в переменной err находится булева истина (err==1), на дисплей выводится забавная строка «Эпик-фэйл!» (от англ. Epic+Fail). Иначе, если ошибок зафиксировано не было (err==0), на дисплей выводится строка «Судоку решена!». Затем для дисплея указывается шестнадцатеричный номер цвета текста (в диапазоне от 0 до 255). Причём во втором случае используется привычная форма записи условия (err==1), но можно опустить указание оператора сравнения == и использовать краткую запись (err). Если при проверке были выявлены ошибки и в переменной err находится 1, с помощью объекта style и свойства color переопределяется настройка стиля оформления элемента с , меняя цвет шрифта текста на #bb0000 (оттенок красного). Иначе, если ошибок выявлено не было (err==0), цвет шрифта меняется на #009900 (оттенок зелёного).

Для активации функций chk() и hint() нужно усовершенствовать код функции GUI(), добавив в пользовательский интерфейс дисплей для вывода оповещений и кнопки с обработчиками событий для вызова этих функций. Также для разнообразия в интерфейс можно добавить секундомер или часы!

Листинг-13. Пользовательский интерфейс 3.0

function GUI() var n,ui=''; 
// Внедрение дисплея 
ui+=''; 
HN=0; // Обнуление счётчика подсказок 
mix(); // Перемешивание массива A 
… 
// Внедрение кнопок 
ui+='
Обыграй ИИ
!
►
✓
'; 
// Отображение пользовательского интерфейса 
document.getElementById('game').innerHTML=ui; 
// Переопределение цвета шрифта на дисплее 
document.getElementById('scr').style.color='#ffffff'
>

Учитывая, что на кнопках представлены символьные обозначения, после игровой таблицы резонно добавить краткое описание приложения.

Листинг-14. Обновлённое тело HTML-документа

…

 
Судоку
 


Загрузка…

 
Описание приложения
 
! — запрос подсказки;
 
► — новая игра;
 
✓ — проверка решения.
 
Веб-приложение для игры и обучения детей и взрослых людей!


© Мазаяки

В листинге-14 приведён пример описания игрового приложения. В теле документа в блоке с , имитирующим компьютерную панель управления, указываются заголовок первого уровня с названием игры и вложенный блок с , служащий заготовкой для будущих часов. Далее представлен знакомый блок с . Следом указывается блок с (от англ. Description), содержащий четыре абзаца

. В первых трёх абзацах

описаны кнопки, в данном случае представленные с помощью тегов , использующиеся для выделения небольших фрагментов контента. В четвёртом абзаце

указано краткое описание игрового приложения. В конце тела документа указан пятый абзац

с (от англ. Copyright), служащий для отображения сведений об авторе приложения!

Для вывода на веб-страницу текущего времени потребуется создание отдельной JS-функции с таймером (благодаря которой также можно модернизировать вывод оповещений на дисплей, представив их в формате телетайпа).

Листинг-15. Телетайп

var TC,TL=1,Txt='Обыграй ИИ';
function txt() document.getElementById('scr').innerHTML=Txt.substr(0,TL); 
document.getElementById('scr').style.color='#'+TC; 
TL=(TL>

В листинге-15 представлен вариант вывода оповещений, имитируя посимвольную печать текста от лица искусственного интеллекта (ИИ)! Перед использованием функции необходимо объявить глобальные переменные Txt (от англ. Text) для хранения текста сообщения, TL (от англ. Text+Length) для мониторинга длины выводимого текста и TC (от англ. Text+Color) для хранения шестнадцатеричного номера цвета текста сообщения. В начале функции txt() с помощью служебной JS-функции substr() из Txt извлекается подстрока в диапазоне от начального (нулевого) символа до значения TL, и эта подстрока записывается в элемент с , выступающий в роли дисплея. Затем для этого элемента с с помощью объекта style и свойства color меняется стиль цвета текста на значение из TC. В конце функции с помощью свойства length проверяется значение глобальной переменной TL. Если TL меньше количества символов Txt, счётчик увеличивается на 1. Иначе счётчик TL обнуляется. Для активации опции телетайпа при создании функции с таймером необходимо указать ссылку на функцию txt().

Листинг-16. Таймер

var Dy;
function timer() var dt=new Date(),dh=dt.getHours(),dm=dt.getMinutes(),sp=':'; 
Dy=dt.getFullYear(); 
if(dh<10) 
if(dm<10) 
if(dt.getSeconds()%2==0)'+sp+''> 
document.getElementById('clock').innerHTML=dh+sp+dm; 
if(TL>0)
>

В листинге-16 приведён пример работы с объектом Date(), отвечающего в JS за дату и время. Перед использованием функции необходимо объявить глобальную переменную Dy (от англ. Date+Year) для хранения текущего года, которая может пригодиться для использования в других функциях. В теле функции timer() с помощью объекта Date() в объявленную локальную переменную dt (от англ. Date) записывается информация о текущих дате и времени, которая будет обновляться при каждом вызове функции. Следом объявляются локальные переменные dh (от англ. Date+Hours) и dm (от англ. Date+Minutes), в которые записывается текущее время, извлечённое из dt с помощью методов getHours() и getMinutes(). А также локальная переменная sp (от англ. Span) для хранения строки с двоеточием, разделяющим часы и минуты. Далее обновляется значение глобальной переменной Dy, в которую записывается текущий год, извлекаемый из dt методом getFullYear().

Методы getHours() и getMinutes() возвращают числовые значения в диапазонах 0–23 и 0–59, поэтому для отображения времени в формате 09:06 необходима проверка значений dh и dm. Если в ходе проверки в if часы (dh) или минуты (dm) окажутся меньше 10, к соответствующей переменной добавится префикс-строка ‘0’, преобразовывая значение в двузначный формат. Для создания эффекта мигающего двоеточия, разделяющего часы от минут, в третьем if осуществляется проверка на чётность текущих секунд с помощью метода getSeconds() и оператора модального деления %, используемого для определения наличия остатка от деления двух чисел. Если секунды делятся на 2 без остатка (являются чётным числом), разделитель из sp помещается в контейнер … с добавлением атрибута style и указанием свойства visibility со значением hidden, делая двоеточие невидимым. Далее в элемент с записывается текущее время, сформированное из часов (dh), разделителя (sp) и минут (dm). В конце кода в if проверяется значение глобальной переменной TL, чтобы вызывать функцию txt() до тех пор, пока этот счётчик не обнулится.

Для установки параметров таймера можно создать отдельную функцию starter(), которая будет вызываться при открытии веб-страницы вместо функции GUI().

Листинг-17. Стартёр

В листинге-17 представлена специальная функция для автозапуска, позволяющая задать временной интервал для повторного выполнения команд из тела функции timer(). Перед использованием функции необходимо объявить глобальную переменную Tmr (от англ. Timer) для хранения метки-идентификатора. В начале кода вызываются функции GUI() для прорисовки пользовательского интерфейса и timer() для вывода текущего времени, а также для активации телетайпа. Далее с помощью метода setInterval() для функции timer() задаётся интервал в 1000 миллисекунд (что соответствует 1 секунде). Затем в глобальную переменную Tmr записывается сгенерированная метка-идентификатор, с помощью которой при необходимости можно убрать интервал методом clearInterval(Tmr), снизив загруженность памяти. В конце кода происходит перезапись содержимого элемента с с добавлением текущего года из глобальной переменной Dy и гиперссылки, ведущей на сайт автора приложения с помощью тега , внутри которого указаны атрибуты href с адресом сайта, target с признаком открытия сайта в новой вкладке и title с подсказкой, всплывающей при наведении курсора.

Для автозапуска функции starter() при открытии веб-страницы следует изменить HTML-документ, указав её имя вместо функции GUI() в обработчике события onLoad внутри тега из листинга-14. Таким образом, после открытия веб-страницы функция timer() должна повторно запускаться каждую секунду. Но для вывода оповещений на дисплей в формате телетайпа необходимо внести изменения в концовки функций chk() и GUI(), указав значения глобальных переменных TC, TL и Txt.

Листинг-18. Активация телетайпа

function chk() … 
Txt=(err)?'Эпик-фэйл!':'Судоку решена!'; 
TC=(err==1)?'bb0000':'009900';TL=1
>
function GUI() … 
Txt='Обыграй ИИ'; 
TC='ffffff';TL=1
>

В листинге-18 приведены фрагменты кода изменённых функций chk() и GUI(). В обоих случаях в глобальную переменную Txt перезаписывается текст сообщения. Затем переопределяется цвет текста в глобальной переменной TC, а счётчику TL присваивается 1, выполняя условие для запуска функции txt().

После внесённых изменений все выводимые на дисплей оповещения должны печататься со скоростью 1 символ в секунду, оживляя пользовательский интерфейс имитацией взаимодействия с ИИ. Также для разнообразия можно добавить всплывающее меню с опциями отключения дисплея и управления цветовой схемы оформления. Но для реализации этой задумки вначале резонно объявить правила оформления контента…

CSS (Cascading Style Sheets)

CSS — каскадные таблицы стилей, содержащие правила оформления HTML-элементов веб-документов вида селектор . CSS-селекторы сообщают браузеру, к каким именно элементам документа следует применять объявленные правила, а свойства и значения помогают управлять оформлением этих элементов. Как и в случае с JS-сценариями, CSS-код небольшого объёма может находиться в текущем документе внутри контейнера

. Но для удобочитаемости кода стили оформления резонно вынести в отдельный файл, создав в папке GameDev новый текстовый документ с именем style и расширением .css, который также следует открыть с помощью текстового редактора (и расположить открывшееся окно в правой части экрана). Для подключения CSS-правил из внешнего файла в HTML-документе в разделе заголовков после мета-тегов необходимо указать ссылку на стилевой файл внутри одиночного тега с добавлением служебных атрибутов: . После этого, вернувшись к CSS-окну, можно приступить к модернизации дизайна интерфейса игрового приложения.

Процесс создания правил оформления контента подобен форматированию текста в текстовом редакторе: для контента можно указать цвет заднего фона (background-color), установить фоновый рисунок (background-image), определить границы элементов (border), оформить шрифт текста (font), задать межстрочный интервал (line-height), добавить внешние и внутренние поля-отступы (margin; padding), выбрать способ выравнивания контента (text-align) и т.д. Учитывая, что Судоку представляет собой таблицу с 81 ячейкой, в первую очередь резонно объявить правила для элементов в игровой таблице, указав параметры дисплея, текстовых полей для ввода чисел, кнопок, ячеек и самой таблицы. При этом важно помнить, что для лучшего восприятия информации следует отделять разные смысловые блоки интерфейса с помощью цвета заднего фона, больших отступов или прорисованных линий.

Листинг-19. Объявление CSS-правила

/* Параметры дисплея */
.scr background-color:#aaa; 
background-image:linear-gradient(#eee,transparent); 
background-image:-webkit-linear-gradient(#eee,transparent); 
border-radius:5px; 
color:#fff; 
cursor:default; 
margin:0 5px 5px; 
padding:6px 9px 9px; 
text-align:left; 
text-shadow:-1px -1px 1px #fff, 1px 1px 1px #000; 
transition:2s; 
-webkit-transition:2s
>

В листинге-19 объявлено правило отображения элемента с атрибутом (выполняющего функцию дисплея), на что указывает селектор класса .scr, записываемый с префиксом в виде точки перед именем. Как видно из примера, при необходимости в CSS-код также можно добавлять пояснительные комментарии, которые записываются подобно длинным JS-комментариям в конструкции из косых черт и звёздочек /*…*/. А правила записываются аналогично функциям или операторам JS между начальной и конечной фигурными скобками . Но в CSS вместо привычного оператора присваивания = значения свойств указываются через двоеточие. При этом, если для одного селектора требуется указать несколько свойств, эти записи разделяются точкой с запятой.

В начале CSS-кода с помощью свойства background-color указывается цвет заднего фона дисплея с оттенком серого #aaa. Цветовая схема в веб-дизайне традиционно задаётся в формате RGB (от англ. Red+Green+Blue) тремя числами, регулирующими соотношение красного, зелёного и синего. Эти числа можно указывать в шестнадцатеричной системе счисления от 00 до ff, в десятичном виде от 0 до 255 и в процентом соотношении от 0% до 100%. Причём, если в группах шестнадцатеричного номера цвета используются одинаковые цифры вида #1199ff, их допустимо записывать в сокращённой форме #19f. Таким образом, номер цвета #aaa может указываться в полном шестнадцатеричном виде #aaaaaa, а также с помощью служебной функции rgb() в десятичном виде rgb(170,170,170) либо в процентах rgb(66%,66%,66%). Но сокращённый формат записи позволяет сэкономить объём документа и время, затраченное на указание таких значений!

Далее с помощью свойства background-image устанавливается фоновый рисунок в виде полупрозрачного линейного градиента linear-gradient() с начальным значением цвета #eee (светло-серый) и служебным словом transparent вместо конечного цвета заливки. Значение transparent сообщаемого браузеру о том, что в качестве конечного цвета градиента следует выбрать цвет заднего фона (то есть ранее объявленное значение #aaa). Такая заливка градиента поможет с внедрением опции для изменения цветовой схемы дисплея. Для разработки кросс-браузерных приложений некоторые свойства и значения правил требуется дублировать, указывая разные служебные слова, поддерживаемые разными браузерами. В данном случае дублируется значение linear-gradient() с добавлением префикса -webkit- для совместимости с разными версиями браузеров.

После этого с помощью свойства border-radius задаются закруглённые края с радиусом в 5 пикселей (px). Затем с помощью свойства color указывается цвет текста дисплея со значением #fff (белый). Следом с помощью свойства cursor переопределяется вид курсора мыши на значение по умолчанию (default), чтобы при наведении на дисплей курсор отображался в виде стрелочки (при запуске веб-приложения на смартфоне правило будет проигнорировано из-за отсутствия мыши). Далее задаются внешние и внутренние поля дисплея с помощью свойств margin и padding, которым присваиваются тройные значения, перечисленные через пробел. Для внешних полей указываются нулевой верхний отступ (перед дисплеем) и одинаковые 5-пиксельные боковые (слева и справа от дисплея) и нижний отступы (после дисплея). А для внутренних полей указываются верхний отступ в 6px и одинаковые боковые и нижний отступы в 9px.

Затем с помощью свойства text-align определяется центрированный способ выравнивания контента (center). Следом с помощью свойства text-shadow задаются параметры тени текста дисплея, причём для тени указываются два разных значения, перечисленные через запятую. В первом случае устанавливается тень с 1-пиксельными сдвигами влево по горизонтали и вверх по вертикали, толщиной в 1px и с белым цветом #fff. Во втором случае устанавливается чёрная тень со сдвигами на 1px вправо и вниз. Такой способ с указанием двойных значений создаёт визуальный 3D-эффект объёмного текста!

В конце CSS-правила с помощью свойства transition в интерфейс внедряется визуальный эффект, позволяющий осуществлять плавный переход (в течение 2 секунд) при смене цветовой схемы дисплея. Как и в случае с линейным градиентом, запись со свойством transition дублируется для поддержки разными версиями браузеров, но в данном случае префикс -webkit- добавляется перед свойством, а не перед значением.

В приведённом примере цвет текста элемента указывается с помощью CSS-записи .scr , которая равнозначна HTML-записи

и JS-записи document.getElementById(‘scr’).style.color=’#ffffff’ . Таким образом, управлять оформлением контента веб-страниц можно и в HTML, и в JS, указывая соответствующие параметры для каждого элемента в отдельности. Но в CSS можно не только объявлять правила отображения отдельных элементов, но и создавать правила для родственных элементов одного типа (например, чтобы в браузере отображались одинаково все элементы input), а также формировать групповые классы (например, чтобы одинаково отображались элементы div и p, в которых указан родственный класс ).

Для применения правила объявленного класса необходимо в начале кода JS-функции GUI() внутри тега с добавить атрибут : . Аналогично можно объявлять правила оформления с разными параметрами для разных состояний элементов или для элементов с определёнными атрибутами.

Листинг-20. Параметры игровой таблицы

table background-color:#ccc;
border:2px solid #777;
border-left-color:#fff;
border-top-color:#fff;
border-radius:10px;
border-spacing:0;
box-shadow:2px 2px 3px #777
>
td padding:0;
vertical-align:middle
>
/* Параметры ячейки с дисплеем */
td[colspan=»9″]

В листинге-20 представлен пример использования селекторов элементов и селектора атрибутов. В начале кода для элемента table задаётся серебристый цвет заднего фона #ccc. Затем указываются границы (border) с толщиной в 2px, со сплошным стилем прорисовки solid и с тёмно-серым цветом #777. При этом для создания объёмного 3D-эффекта цвет заливки левой и верхней границ переопределяется на белый #fff. Далее устанавливается радиус закругления углов в 10px. А с помощью свойства border-spacing задаётся нулевой интервал между ячейками таблицы (чтобы игровое поле не было слишком большим). В конце первого правила с помощью свойства box-shadow вокруг границ игровой таблицы устанавливается тень со сдвигом вправо на 1px, вниз на 2px, толщиной в 3px и с тёмно-серым цветом #777.

В CSS правила отображения с селекторами элементов применяются ко всем указанным элементам документа автоматически, не требуя дополнительных манипуляций с кодом. А правила с селекторами атрибутов применяются только к элементам документа с указанными атрибутами.

Листинг-21. Параметры текстовых полей

input border-radius:5px; 
font-family:Tahoma; 
font-size:18px; 
height:28px; 
width:28px
>
input[disabled] border-style:outset; 
color:#555; 
font-weight:bold
>
input[id$="1"],input[id$="4"]
input[id$="6"],input[id$="9"]
input[id^="i4"],input[id^="i7"]
input,td
/* Параметры для устройств с шириной экрана @media(max-width:360px) input height:25px; 
width:25px
>>

В листинге-21 приведён пример с использованием особых CSS-выражений (условий) в квадратных скобках селекторов атрибутов. В первом правиле задаётся радиус закругления границ текстовых полей. Параметры самих границ при этом не указываются, чтобы использовались браузерные значения по умолчанию. Далее с помощью свойств font-family и font-size определяются гарнитура Tahoma и размер шрифта в 18px. Затем с помощью свойств height и width задаются одинаковые высота и ширина текстовых полей в 28px.

Во втором правиле с помощью селектора атрибута input[disabled] элементам input с указанным атрибутом disabled задаются стиль границ (border-style) с имитацией объёмного 3D-эффекта outset, светло-чёрный цвет текста и полужирное начертание шрифта bold (font-weight).

В веб-дизайне для одних и тех же свойств разных элементов могут задаваться одинаковые значения. В таких случаях селекторы допустимо объединять в группы, перечисляя их через запятую, и указывать в фигурных скобках общие значения одинаковых свойств.

В приведённом примере по такому принципу объявляются три однотипных правила, устанавливающие внешние отступы избранных элементов input с помощью селекторов атрибутов, отделяя сгруппированные 3×3-секции. Запись внутри квадратных скобок селектора атрибута input[id$=»1″] означает, что объявленное правило должно применяться ко всем элементам input, чьи id заканчиваются на 1 (то есть текстовые поля из первого столбца таблицы). Аналогично правило с input[id$=»4″] должно применяться ко всем input, чьи id заканчиваются на 4 (текстовые поля из четвёртого столбца). А правило с input[id^=»i4″] должно применяться ко всем input, чьи id начинаются с i4 (текстовые поля из четвёртой строки). Таким образом, для 1 и 4 столбцов задаётся внешний левый, для 6 и 9 столбцов — внешний правый, а для 4 и 7 строк — внешний верхний отступы в 5px. Далее для текстовых полей input и табличных ячеек td объявляется общее правило с центрированным выравниванием контента.

В конце кода с помощью служебного слова @media и свойства max-width объявляется правило, которое будет применяться к элементам input только на небольших пользовательских устройствах с шириной экрана не более 360px. Данное правило уменьшает высоту (height) и ширину (width) текстовых полей до 25px, чтобы игровая таблица не выходила за рамки небольшого экрана мобильного телефона.

В CSS дополнительные ограничения с @media помогают создавать адаптивный дизайн, частично или полностью отображая контент на разных устройствах по-разному. При этом важно помнить, что в нижней части игровой таблицы расположены три кнопки, ширина которых не должна троекратно превышать минимальную ширину ячеек (3*25=75px).

Листинг-22. Оформление кнопок

div[id="bt1"]
#bt2
div#bt3
.btn background-color:#ddd; 
border:1px outset #fff; 
border-radius:50%; 
cursor:pointer; 
display:inline-block; 
font-family:Arial; 
font-weight:bold; 
line-height:1.5; 
text-align:center; 
text-indent:0
>
/* Цвет фона кнопки при наведении курсора */
.btn:hover
div.btn margin:9px auto 6px; 
width:75px
>
span.btn margin:0; 
width:50px
>

В листинге-22 представлены правила отображения кнопок с использованием селекторов идентификаторов и селекторов классов. В начале кода объявляются три однотипных правила, устанавливающих разный цвет текста для трёх кнопок.

Как видно из примера, в CSS при объявлении правил оформления элементов с указанным id можно использовать селекторы атрибутов либо специальные селекторы идентификаторов, записываемые по принципу хэштега с префиксом в виде решётки # перед именем id (при необходимости перед решёткой можно дополнительно указать конкретный элемент). Но для экономии времени и места проще всего использовать краткий вариант записи селекторов идентификаторов (#bt1, #bt2 и #bt3). А селекторы атрибутов резонно использовать лишь в особых случаях, например, когда потребуется объявить правила для большой группы однотипных элементов со схожими значениями атрибутов (как в примере из листинга-21).

Далее для кнопок формируется общий класс .btn (от англ. Button). В начале класса указывается цвет заднего фона. Затем задаются границы с 3D-стилем outset и радиус закругления в 50%. Следом устанавливается вид курсора мыши на pointer (чтобы при наведении на кнопки курсор выглядел так, как при наведении на гиперссылки). После этого с помощью свойства display указывается блочный способ отображения кнопок inline-block. А для шрифта задаются гарнитура Arial с полужирным начертанием bold. В конце класса с помощью свойств line-height, text-align и text-indent для текста кнопок задаются полуторный межстрочный интервал, центрированный способ выравнивания контента и нулевая красная строка.

Помимо объявления правил для элементов в статичных состояниях, в CSS можно управлять оформлением контента с учётом наступления разных событий-триггеров, инициируемых поведением пользователя. В приведённом примере после класса .btn объявляется псевдокласс с добавлением двоеточия и служебного слова hover, отвечающего за движение курсора мыши по кнопке или нажатие пальцем на кнопку на сенсорном экране. При наступлении одного из этих событий у используемой кнопки должен будет измениться цвет фона на более светлый.

В случаях, когда схожим элементам необходимо задать как общие, так и различные параметры, одинаковые значения можно объявлять в общем классе, а для различающихся параметров резонно формировать отдельные правила с указанием конкретных элементов. В конце кода объявляются два однотипных правила с селекторами div.btn и span.btn для отображения разных кнопок, представленных в документе в тегах и . Для элементов div с классом .btn задаются внешние отступы (значение auto означает, что боковые отступы должны определиться браузером автоматически), а также ширина кнопок в 75px. Для элементов span с классом .btn задаются нулевые внешние поля и укороченная ширина в 50px (поскольку в информационном блоке с кратким описанием основной акцент делается на компактности вида). Таким образом, инструментарий CSS позволяет с помощью небольших фрагментов кода управлять оформлением больших веб-документов!

Листинг-23. Дополнительные параметры

/* Цвет текста документа */
*
a border-bottom:1px dashed #00d; 
color:#00d; 
text-decoration:none
>
a:hover border-color:#77f; 
color:#77f
>
#bar background-color:#ddd; 
background-image:linear-gradient(#eee,#ccc); 
background-image:-webkit-linear-gradient(#eee,#ccc); 
border-bottom:double #ddd; 
cursor:default; 
padding:6px 0 9px
>
#bar,#clock,#cop
body background-color:#eee; 
font-family:Verdana; 
font-size:18px; 
text-align:center
>
body,#cop,h1,h2
#clock color:#fff; 
padding-right:15px; 
text-shadow:1px 1px 1px #aaa
>
#clock,#cop
#clock,h1
#cop,#ds
#ds
#game
h1
h1,h2 color:#777; 
font-size:20px; 
text-align:left
>
p line-height:1.5; 
margin:5px 0 0; 
text-align:justify
>

В листинге-23 приведён пример правил оформления для различных элементов документа. В начале кода объявляется правило с универсальным селектором * для установки цвета текста документа с чёрным оттенком #333. Звёздочка * в данном случае обозначает любые элементы документа, для которых не определена другая цветовая схема.

Во втором правиле для гиперссылки задаётся цвет текста и меняется сплошное подчёркивание на штриховое. Для этого устанавливается нижняя граница в виде штрихов (dashed). А свойству text-decoration присваивается обнуляющее значение none.

В третьем правиле с селектором псевдокласса :hover переопределяется цветовая схема гиперссылки, которая будет применяться при движении курсора или при нажатии пальцем. Для этого меняются цвет нижней границы и цвет текста.

Затем объявляется правило с селектором #bar, задающее параметры верхнего блока (содержащего заголовок первого уровня и часы). В начале правила устанавливаются цвет заднего фона и фоновый рисунок в виде линейного градиента. Далее задаётся двойная нижняя граница и переопределяется вид курсора на стрелочку по умолчанию. В конце правила указываются внутренние отступы. После этого формируется общее правило с #bar, #clock и #cop, устанавливающее выравнивание контента по правому краю для верхней панели и блоков с часами и копирайтом.

Далее в правиле для тела документа устанавливаются цвет заднего фона, гарнитура Verdana и размер шрифта в 18px, а также центрированный способ выравнивания контента. Параметры, указанные для элемента body, должны наследоваться вложенными элементами, для которых не определены другие значения. Но при необходимости указать параметры, которые должны быть обязательно применимы ко всем элементам документа, резонно использовать универсальный селектор в виде звёздочки!

Следом формируется общее правило с группой селекторов, задающее телу документа, блоку с копирайтом и заголовкам первого и второго уровня нулевые внешние отступы. Затем объявляется правило с #clock, устанавливающее для блока с часами белый цвет текста, правый внутренний отступ и тень текста. Далее формируется общее правило для блоков с часами и копирайтом, задающее размер шрифта в 17px. Следом формируется общее правило для блока с часами и заголовка первого уровня, устанавливающее свойству display значение inline-block, чтобы эти элементы могли отображаться в браузере небольшими блоками в одной общей строке. После этого формируется общее правило с #cop и #ds, задающее внутренние отступы блокам с копирайтом и кратким описанием.

Затем объявляется правило с #ds, устанавливающее фон белого оттенка. Следом для игрового блока с id #game указываются внешние отступы. Далее объявляются параметры заголовков первого и второго уровня. В правиле для h1 задаётся внутренний левый отступ. А в общем правиле для h1 и h2 устанавливаются тёмно-серый цвет текста заголовков, размер шрифта в 20px и выравнивание по левому краю. В конце кода объявляется правило для p, задающее абзацам документа межстрочный полуторный интервал, внешние отступы, а также способ выравнивания по ширине контента (justify).

После объявления правил оформления элементов документа можно добавить новые правила, которые помогут внедрить в веб-страницу всплывающее меню для персонализации настроек!

Листинг-24. Параметры элементов меню

/* Позиционирование блоков */
#adj,#menu
#adj,#menu,.off
/* RGB-поля */
#b,#g,#r
#b
#g
#r
/* Шаблоны */
.bg0 border:1px outset #fff; 
border-radius:5px; 
opacity:.5
>
.bg0:hover
.bg0,.flg
.bg0,.flg,#swi
.bg0,.flg,#men,#swi
#bg1
#bg2
#bg3
#bg4,.on
#bg5
#bg6
#bg7
/* Блок с переключателем */
#box border-bottom:1px solid #aaa; 
color:#777; 
font-family:Tahoma; 
padding:0 0 5px
>
/* Блок с настройками цветовой схемы */
.clr border-top:1px solid #eee; 
padding:5px 0 0
>
/* Текст без оформления */
.decNon
/* Перечёркивание текста */
.decThr
/* Флажок */
.flg background-image:linear-gradient(#fff,#aaa); 
background-image:-webkit-linear-gradient(#fff,#aaa); 
box-shadow:0px 0px 2px #555
>
.flg,.off
.flg,#swi
/* Выкл. */
.hid
/* Значок меню */
.me0,.me1:hover
.me0:hover,.me1
#men border-right:1px solid #aaa; 
padding-left:12px; 
text-shadow:0 1px 1px #777; 
width:30px
>
#men,#menu
/* Вкл. */
.on
/* Блок с шаблонами */
.pat padding-top:5px; 
text-align:center
>
/* Переключатель */
#swi border:1px solid #aaa; 
transition:1s; 
-webkit-transition:1s; 
vertical-align:middle; 
width:39px
>
/* Всплывающее меню */
.vis background:#ccc; 
border-bottom:double #ddd; 
border-right:double #ddd; 
border-radius:5px; 
color:#777; 
line-height:1; 
padding:5px
>

В листинге-24 представлены правила оформления, позволяющие внедрить в документ всплывающее меню. В начале кода формируется общее правило с #adj (от англ. Adjacent) и #menu, с помощью свойства position задающее абсолютный способ позиционирования блоков, позволяя следующим за ними элементам располагаться в браузере на тех же позициях, где и эти блоки. В первом случае абсолютное позиционирование позволяет блоку с часами отображаться в одной плоскости вместе с верхним левым блоком (со значком меню и заголовком), во втором случае — накладывать контент всплывающего меню поверх секции игровой таблицы. Далее формируется общее правило с #adj, #menu и .off, устанавливающее выравнивание контента по левому краю. Затем объявляются правила с #r, #g и #b, задающие текстовым полям меню ширину в 48px и цвет текста.

После этого объявляется общий класс .bg0 (от англ. Background+0), задающий для шаблонов цветовой схемы в статичном состоянии границы и радиус закругления, а также эффект полупрозрачности (opacity) со значением .5, что соответствует 50%. Следом объявляется правило с псевдоклассом .bg0:hover для переопределения полупрозрачности шаблонов на 1 (100%). Затем формируются общее правило с .bg0 и .flg (от англ. Flag), задающее ширину в 20px, и общее правило с .bg0, .flg и #swi (от англ. Switch), задающее высоту в 20px. Далее формируется общее правило с .bg0, .flg, #men (от англ. Menu) и #swi, устанавливающее свойству display значение inline-block, чтобы эти элементы могли отображаться в браузере небольшими блоками с заданными размерами. После этого объявляются однотипные правила, устанавливающие цвет заднего фона 7 шаблонов с id #bg1–7 и поля переключателя с классом .on (во включённом режиме).

Затем объявляется правило с #box, задающее нижнюю границу, цвет текста, гарнитуру шрифта и внутренний нижний отступ. Следом объявляется класс .clr (от англ. Color), задающий верхнюю границу и внутренний верхний отступ. Указанные в этих правилах границы и внутренние отступы позволяют визуально отделить два блока меню, облегчая восприятие интерфейса!

Далее объявляются два однотипных правила с .decNon (от англ. Decoration+None) и .decThr (от англ. Decoration+Through), управляющие оформлением пояснительного текста. В активном режиме с включённым переключателем к блоку будет применяться класс .decNon без дополнительного оформления. В выключенном режиме — .decThr с оформлением текста перечёркнутой горизонтальной линией.

После этого объявляется класс .flg, устанавливающий флажку-переключателю фоновый рисунок в виде линейного градиента и тень вокруг границ (box-shadow). Затем формируются общее правило с .flg и .off, устанавливающее цвет заднего фона, и общее правило с .flg и #swi, задающее радиус закругления. Далее объявляется класс .hid (от англ. Hidden), используемый для скрытия дисплея и всплывающего меню с помощью значения none для свойства display.

Следом формируются два однотипных правила для значка меню, регулирующие цвет значка в обычном режиме с классом .me0 (от англ. Menu+0) и активированном режиме с .me1 (от англ. Menu+1). В статичном состоянии для значка меню будет применяться цвет с оттенком серого #aaa, а при наведении курсора мыши цвет будет меняться на светло-серый оттенок #eee. В нажатом состоянии — наоборот.

Затем объявляется правило с #men, содержащее параметры значка меню, не зависящие от его состояния. В начале правила задаётся правая граница, помогающая визуально отделить значок от смежного заголовка. Далее указывается левый внутренний отступ и параметры тени значка. В конце правила задаются ширина значка в 30px. После этого формируется общее правило с #men и #menu, устанавливающее курсор-пойнтер.

Далее объявляется класс .on, задающий выравнивание контента по правому краю. Следом объявляется класс .pat (от англ. Pattern), устанавливающий сгруппированному блоку с шаблонами верхний внутренний отступ и центрированный способ выравнивания контента.

После этого объявляется правило с #swi, управляющее оформлением поля с переключателем. В начале правила задаются границы и эффект плавного перехода (transition) между стилями .on и .off при каждом переключении флажка. Затем задаётся центрированный способ выравнивания контента по вертикали и ширина в 39px.

В конце кода объявляется класс .vis (от англ. Visible), используемый для активации видимого режима всплывающего меню. В начале правила устанавливается серебристый цвет заднего фона. Далее задаются двойные нижняя и правая границы и радиус закругления. Затем для текста указываются тёмно-серый цвет и единичный межстрочный интервал. В конце правила задаются внутренние отступы в 5px.

Таким образом, с помощью коллаборации CSS с HTML и JS можно успешно управлять внешним видом контента веб-документа!

Листинг-25. Содержимое файла style.css

*
a
a,#b,#bt3
a,.decNon
a:hover border-color:#77f; 
color:#77f
>
#adj,#menu
#adj,h1,h2,#menu,.off,.scr
#b,#g,#r
#bar background-image:linear-gradient(#eee,#ccc); 
background-image:-webkit-linear-gradient(#eee,#ccc); 
border-bottom:double #ddd; 
padding:6px 0 9px
>
#bar,.btn,.flg,.off
#bar,#clock,#cop,.on
#bar,.scr
.bg0
.bg0:hover
.bg0,.btn
.bg0,.btn,#clock,.flg,h1,#men,#swi
.bg0,.flg
.bg0,.flg,#swi
.bg0,input,.scr,.vis
#bg1
#bg2
#bg3
#bg4,.on
#bg5
#bg6
#bg7
body
body,.btn:hover
body,.btn,input,.pat
body,#cop,h1,h2
body,input
#box border-bottom:1px solid #aaa; 
padding:0 0 5px
>
#box,h1,h2,.vis
#box,input
#bt1,#r
#bt2,#g
.btn border-radius:50%; 
font-family:Arial; 
text-indent:0
>
.btn,input[disabled]
.btn,#men,#menu
.btn,p
#clock padding-right:15px; 
text-shadow:1px 1px 1px #aaa
>
#clock,#cop
#clock,.scr
.clr
.clr,td[colspan="9"]
#cop,#ds
.decThr
div.btn margin:9px auto 6px; 
width:75px
>
#ds
.flg background-image:linear-gradient(#fff,#aaa); 
background-image:-webkit-linear-gradient(#fff,#aaa); 
box-shadow:0px 0px 2px #555
>
.flg,#swi,table
#game
h1
h1,h2
.hid
input height:28px; 
width:28px
>
input[disabled] border-style:outset; 
color:#555
>
input[id$="1"],input[id$="4"]
input[id$="6"],input[id$="9"]
input[id^="i4"],input[id^="i7"]
.me0,.me1:hover
.me0:hover,.me1
#men border-right:1px solid #aaa; 
padding-left:12px; 
text-shadow:0 1px 1px #777; 
width:30px
>
p margin:5px 0 0; 
text-align:justify
>
.pat
.scr background-color:#aaa; 
background-image:linear-gradient(#eee,transparent); 
background-image:-webkit-linear-gradient(#eee,transparent); 
margin:0 5px 5px; 
padding:6px 9px 9px; 
text-shadow:-1px -1px 1px #fff, 1px 1px 1px #000; 
transition:2s; 
-webkit-transition:2s
>
span.btn
#swi border:1px solid #aaa; 
transition:1s; 
-webkit-transition:1s; 
width:39px
>
#swi,td
table background-color:#ccc; 
border:2px solid #777; 
border-left-color:#fff; 
border-top-color:#fff; 
border-spacing:0; 
box-shadow:1px 2px 3px #777
>
td
.vis background:#ccc; 
border-bottom:double #ddd; 
border-right:double #ddd; 
line-height:1; 
padding:5px
>
@media(max-width:360px) input height:25px; 
width:25px
>>

В листинге-25 приведена финальная версия CSS-кода файла style.css с упорядоченными правилами оформления элементов документа. Для применения новых CSS-правил необходимо внести изменения в скрипт и HTML-документ, добавив описанные элементы, а также JS-функции для взаимодействия с ними.

Листинг-26. Содержимое файла sudoku.html

 
 
 
 
 
 


 
 
 
☰ 
Судоку
 
 
 
 
 
Загрузка…
 
 
Описание приложения
 
! — запрос подсказки;
 
► — новая игра;
 
✓ — проверка решения.
 
Веб-приложение для игры и обучения детей и взрослых людей!
 
 
© Мазаяки

В листинге-26 приведена финальная версия HTML-кода файла sudoku.html с новыми элементами, необходимыми для внедрения всплывающего меню.

Листинг-27. Содержимое файла script.js

var A=new Array(),C=new Array(),Cr=0,Dy,HN,Me=2,Swi=1,TC,TL=1,Tmr=0,Txt;
for(i=1;i<10;i++)
A[1][1]=3;A[1][2]=6;A[1][3]=7;A[1][4]=5;A[1][5]=4;A[1][6]=2;A[1][7]=1;A[1][8]=8;A[1][9]=9;
A[2][1]=1;A[2][2]=4;A[2][3]=5;A[2][4]=3;A[2][5]=9;A[2][6]=8;A[2][7]=7;A[2][8]=2;A[2][9]=6;
A[3][1]=2;A[3][2]=9;A[3][3]=8;A[3][4]=6;A[3][5]=7;A[3][6]=1;A[3][7]=4;A[3][8]=3;A[3][9]=5;
A[4][1]=6;A[4][2]=5;A[4][3]=4;A[4][4]=1;A[4][5]=2;A[4][6]=7;A[4][7]=8;A[4][8]=9;A[4][9]=3;
A[5][1]=8;A[5][2]=3;A[5][3]=9;A[5][4]=4;A[5][5]=5;A[5][6]=6;A[5][7]=2;A[5][8]=7;A[5][9]=1;
A[6][1]=7;A[6][2]=1;A[6][3]=2;A[6][4]=9;A[6][5]=8;A[6][6]=3;A[6][7]=6;A[6][8]=5;A[6][9]=4;
A[7][1]=4;A[7][2]=7;A[7][3]=6;A[7][4]=8;A[7][5]=3;A[7][6]=5;A[7][7]=9;A[7][8]=1;A[7][9]=2;
A[8][1]=9;A[8][2]=8;A[8][3]=3;A[8][4]=2;A[8][5]=1;A[8][6]=4;A[8][7]=5;A[8][8]=6;A[8][9]=7;
A[9][1]=5;A[9][2]=2;A[9][3]=1;A[9][4]=7;A[9][5]=6;A[9][6]=9;A[9][7]=3;A[9][8]=4;A[9][9]=8;
C['r']=170;C['g']=170;C['b']=170;
function cbx() Swi=(Swi==1)?0:1; 
document.getElementById('scr').className=(Swi==0)?'hid':'scr'; 
document.getElementById('swi').className=(Swi==0)?'off':'on'; 
document.getElementById('box').className=(Swi==0)?'decThr':'decNon'
>
function chk() var err=0,row=0,col=0,s9=0,sc,sr; 
for(i=1;i <10;i++)sc=0;sr=0; 
for(j=1;j <10;j++)sr+=1*document.getElementById('i'+i+j).value; 
sc+=1*document.getElementById('i'+j+i).value 
> 
if(sc!=45||sr!=45) 
> 
if(err==0) for(i=1;i <4;i++)for(j=1;j <4;j++)s9+=1*document.getElementById('i'+(i+row)+(j+col)).value 
> 
if(i==3) if(s9!=45) 
s9=0;col+=3; 
if(col>6) 
if(row<7) 
>>> 
Txt=(err==1)?'Эпик-фэйл!':'Судоку решена!'; 
TC=(err==1)?'b00':'090';TL=1; 
if(Swi==0)
>
function clr(pt) switch(pt) case 1:C['r']=187;C['g']=0;C['b']=0;break; 
case 2:C['r']=238;C['g']=170;C['b']=0;break; 
case 3:C['r']=221;C['g']=221;C['b']=0;break; 
case 4:C['r']=0;C['g']=99;C['b']=0;break; 
case 5:C['r']=66;C['g']=221;C['b']=221;break; 
case 6:C['r']=0;C['g']=0;C['b']=221;break; 
case 7:C['r']=187;C['g']=0;C['b']=187;break; 
default:C['r']=170;C['g']=170;C['b']=170 
> 
document.getElementById('r').value=C['r']; 
document.getElementById('g').value=C['g']; 
document.getElementById('b').value=C['b']; 
custom()
>
function custom() C['r']=document.getElementById('r').value; 
C['g']=document.getElementById('g').value; 
C['b']=document.getElementById('b').value; 
document.getElementById('scr').style.backgroundColor='rgb('+C['r']+','+C['g']+','+C['b']+')'
>
function GUI() var col,m=new Array(),n,row,ui=''; 
ui+=''; 
HN=0; 
for(i=0;i <7;i+=3)col=tri(); 
for(j=1;j <10;j++)for(l=1;l<4;l++) 
for(l=1;l<4;l++)> 
row=tri(); 
for(j=1;j <10;j++)for(l=1;l<4;l++) 
for(l=1;l<4;l++)>> 
for(i=1;i <10;i++)ui+=''; 
for(j=1;j <10;j++)if(j==1) 
if(j==4) 
if(j==7) 
ui+='' 
> 
ui+='' 
> 
ui+='
О
 if(j==n) 
else 
ui+='>
!
►
✓
'; 
document.getElementById('game').innerHTML=ui; 
TC='ffffff';Txt='Обыграй ИИ';TL=1; 
document.getElementById('scr').style.backgroundColor='rgb('+C['r']+','+C['g']+','+C['b']+')'
>
function hint() if(HN <15)HN++; 
var col=new Array(),n=0,row=new Array(); 
for(i=1;i <10;i++)for(j=1;j <10;j++)if(document.getElementById('i'+i+j).value=='') n++;row[n]=i;col[n]=j 
>>> 
if(n>0) if(n>1) 
document.getElementById('i'+row[n]+col[n]).value=A[row[n]][col[n]]; 
document.getElementById('i'+row[n]+col[n]).disabled=1 
>else
>>
function inp(el) var elv=(el.value).trim(); 
elv=elv.replace(/[^0-9]/g,''); 
elv=(elv=='')?0:elv*1; 
if(elv>255) 
el.value=elv; 
custom()
>
function InpChk(el)>
function menu() if(Me==2) 
Me=(Me==1)?0:1; 
document.getElementById('menu').className=(Me==1)?'vis':'hid'; 
document.getElementById('men').className='me'+Me
>
function mim() var bk='
'; 
bk+=''; 
bk+=' '; 
bk+=' Дисплей вкл.
'; 
bk+='
'; 
bk+=''; 
bk+=''; 
bk+=''; 
bk+='
'; 
for(i=1;i <8;i++)bk+=' ' 
> 
document.getElementById('menu').innerHTML=bk+'
'
>
function mof()>
function rnd(hi)
function starter() GUI();timer(); 
Tmr=setInterval('timer()',1000); 
document.getElementById('cop').innerHTML='© '+Dy+' Мазаяки'
>
function timer() var dt=new Date(),dh=dt.getHours(),dm=dt.getMinutes(),sp=':'; 
Dy=dt.getFullYear(); 
if(dh<10) 
if(dm<10) 
if(dt.getSeconds()%2==0)'+sp+''> 
document.getElementById('clock').innerHTML=dh+sp+dm; 
if(TL>0)
>
function tri() var sw=rnd(6),t=new Array(); 
switch(sw) case 1:t[1]=1;t[2]=3;t[3]=2;break; 
case 2:t[1]=2;t[2]=1;t[3]=3;break; 
case 3:t[1]=2;t[2]=3;t[3]=1;break; 
case 5:t[1]=3;t[2]=2;t[3]=1;break; 
default:t[1]=3;t[2]=1;t[3]=2 
> 
return t
>
function txt() document.getElementById('scr').innerHTML=Txt.substr(0,TL); 
document.getElementById('scr').style.color='#'+TC; 
TL=(TL>

В листинге-27 приведена финальная версия JS-кода файла script.js с упорядоченными переменными и функциями, включая новые cbx(), clr(), custom(), inp(), menu(), mim(), mof(), добавленные для внедрения всплывающего меню. Перед использованием новых функций необходимо объявить глобальные переменные C (от англ. Color) для хранения массива со значениями RGB-полей, Me (от англ. Menu) для отслеживания режимов блока со всплывающим меню, Swi (от англ. Switch) для отслеживания положений переключателя.

Функция с именем cbx (от англ. Checkbox) управляет видимым и скрытым режимами дисплея и видом чекбокса. В начале функции cbx() обновляется значение глобальной переменной Swi (0 или 1). Если до вызова функции переключатель был включён (Swi==1), в переменную Swi записывается 0, иначе — 1. Затем с помощью методов getElementById() и className переопределяются классы элементов с id #scr, #swi и #box, зависящие от нового значения Swi. Если после выполнения функции переключатель должен быть выключен (Swi==0), дисплею указывается класс .hid для активации скрытого режима, чекбоксу (полю с переключателем) — .off, а блоку с чекбоксом и пояснительным текстом — .decThr. Иначе дисплею задаётся класс .scr с видимыми параметрами дисплея, чекбоксу — .on, а блоку с пояснительным текстом — .decNon.

Функция с именем clr (от англ. Color) отвечает за применение шаблонов цветовой схемы. В качестве аргумента pt (от англ. Pattern) функции передаётся порядковый номер шаблона, нажатие по которому спровоцировало вызов функции. В теле функции с помощью switch выбираются подходящие значения глобального массива C, зависящие от аргумента pt. Далее с помощью метода getElementById() и свойства value выбранные значения записываются в RGB-поля. Затем вызывается функция custom() для обновления цветовой схемы дисплея.

Функция custom() управляет цветовой схемой дисплея. В начале функции переопределяются значения элементов массива C, которым присваиваются значения RGB-полей с помощью метода getElementById() и свойства value. В конце функции с помощью свойства backgroundColor объекта style устанавливается цвет заднего фона дисплея, заданный в RGB-формате с указанием значений из массива C.

Функция с именем inp (от англ. Input) помогает взаимодействовать с RGB-полями меню, удаляя недопустимые символы после случайного или умышленного ввода. В теле функции объявляется локальная переменная elv (от англ. Element+Value) для хранения и редактирования значения текстового поля, передаваемого через аргумент el. При объявлении в переменную elv записывается значение текстового поля, очищенное от ненужных пробелов с помощью служебной JS-функции trim(), применяемой для обработки строк (если вместо числа в поле окажутся только пробелы, в elv будет записана пустая строка). Затем с помощью служебной JS-функции replace(), также применяемой для обработки строк, перезаписывается значение elv с заменой недопустимых символов на пустую строку. В качестве первого аргумента функции replace() передаётся регулярное выражение с указанием того, что нужно найти и заменить, а в качестве второго аргумента — чем нужно заменить. Как видно из примера, использование регулярок помогает осуществлять (сложный) поиск с заменой при помощи всего одной строчки кода! Причём в данном случае указанное регулярное выражение способно удалить в том числе и пробелы, поэтому использование функции trim() избыточно (и приводится в ознакомительных целях).

В JS регулярные выражения составляются подобно регуляркам языка Perl. Два слэша открывают и закрывают регулярное выражение. Квадратные скобки указывают на то, что выражение помогает найти заданный набор символов. Запись 0-9 задаёт диапазон числовых символов от 0 до 9. Символ «^» перед набором означает отрицание, указывая, что требуется искать не числа. Модификатор g после закрывающего слэша задаёт глобальный формат поиска (без него в RGB-полях будет заменяться только первый найденный символ).

После выполнения поиска и замены по шаблону, указанному в регулярном выражении, переопределяется значение elv. Если переменная elv содержит пустую строку, её значение заменяется на 0. Иначе в переменную elv записывается её старое значение, умноженное на 1. Такой приём помогает убирать из RGB-полей лишние нули в виде префикса перед числом (если строку ‘007’ умножить на 1, результатом будет число 7). Далее в if проверяется обновлённое значение elv. Если полученное число больше 255, в переменную записывается 255. Затем с помощью свойства value в текстовое поле записывается отредактированное значение elv. Таким образом, в текстовом поле, спровоцировавшем вызов функции, должно оказаться целое число в диапазоне от 0 до 255. В конце функции inp() после проведённой масштабной проверки вызывается функция custom() для обновления цветовой схемы дисплея.

Функция menu() управляет режимами всплывающего меню и видом значка, представленного триграммой «☰». В начале функции в if проверяется значение глобальной переменной Me, которой при объявлении в начале сценария было присвоено число 2. Если функция запускается впервые (Me==2), вызывается вспомогательная функция mim() для прорисовки элементов меню. Далее обновляется значение Me на 0 или 1. Если до вызова функции всплывающее меню находилось в видимом режиме (Me==1), в переменную Me записывается 0, иначе — 1. Затем с помощью методов getElementById() и className переопределяются классы элементов с id #menu и #men, зависящие от нового значения Me. Если к моменту выполнения группы операторов Me содержит 1, к всплывающему меню будет применён класс .vis, а к значку меню — .me1 (всплывающее меню будет отображено на экране). Иначе к всплывающему меню будет применён класс .hid, а к значку — .me0 (всплывающее меню будет скрыто).

Функция с именем mim (от анг. Menu+Item) отвечает за формирование элементов меню. В теле функции mim() объявляется локальная переменная bk (от англ. Block) для формирования строки с HTML-кодом и обновления содержимого блока с . Изначально в bk записывается открывающий тег

, закрывающий блок чекбокса.

После этого к bk добавляется открывающий тег