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

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

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

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

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

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

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

var field = '0681594327597283416342671589934157268278936145156842973729318654813465792465729831';

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

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

var arr = Array(1,2,3,4,5,6,7,8,9).sort(function() {return 0.75 - Math.random()});

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

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

var st = (Math.random()*10>6) ? '<td>'+arr[field.substr(i,1)-1] + '</td>' : '<td style="padding:0;"><input type="text" size="1" maxlength="1" onkeydown="javascript: return ((event.keyCode>47)&&(event.keyCode<58))"></td>';

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

<style>
#sudoku td{border:1px solid #cdcdcd;background:#f8f8f8;padding:5px 10px;margin:0;}
#sudoku input{height:30px;width:30px;border:0 none;text-align:center;}</style>

<table id="sudoku" cellspacing="0">
<script type="text/javascript">
var field = '068159432759728341634267158993415726' + '8278936145156842973729318654813465792465729831';
var arr = Array(1,2,2,4,6,7,5,8,9).sort(function() {return 0.75 - Math.random()});
for (var i=1;i<82;i++) {
var st = (Math.random()*10>6) ? '<td>'+arr[field.substr(i,1)-1] + '</td>' : '<td style="padding:0;"><input type="text" size="1" maxlength="1" onkeydown="javascript: return ((event.keyCode>47)&&(event.keyCode<58))"></td>';
document.write( (i%9!=1) ? (i%9==0) ? st + '</tr>' : st : '<tr>'+st);
}
</script>
</table>

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

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

4 комментария

  1. 1. можете написать данный алгоритм на php? без html
    обычно генераторы возвращают сроку вида
    032100005454000000003453453000045455000350005454 🙂

    2. я принцип вашего алгоритма не совсем понял. откуда взялся шаблон ? почему ноль впереди ? можете объяснить пожалуйста подробнее ?

  2. 1. Могу. Вам необходимо это применить где-то конкретно?
    2. Шаблон сгенерировал руками просто для примера. Ноль впереди для использовал для совпадения счетчика цикла с номером символа «вырезаемого» из строки шаблона. Цикл для удобства пустил с единицы, что бы удобно работало вот это условие
    document.write( (i%9!=1) ? (i%9==0) ? st + '' : st : ''+st);

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *