После наплыва постов про реализацию различных игрушек на JavaScript в 30 строчек, решил тоже внести свой вклад в общее дело «30 строчек». Решил немного отойти от игр и реализовать генерацию судоку на JavaScript, но не уложился в 30 строчек. Надеюсь, что это маленькое недоразумение, не омрачит великое соревнование 30 строчек. Раньше доводилось писать скрипты для Corel Draw, которые генерировали 9 судоку на лист и создавали целый журнал. Оставалось только печатать и раздавать всем желающим.
Возможности:
Для генерации судоку используется подготовленны шаблон, который хранится в виде строки. Раньше я использовал несколько шаблонов, но для данного случая вполне сгодится и один. Немного странным образом организую перемешивание массива с цифрами от 1 до 9. Этот массив потребуется для замены цифр в шаблоне. Далее начинаем формировать таблицу. Используя шаблон и массив для замены цифр формируем ячейки, не забывая создавать текстовые поля для ввода.
Код можно было еще ужать и объединить некоторые строки, но мне кажется такой вариант более удобный для восприятия.
Возможности:
- генерация судоку случайным образом
- ввод чисел (с проверкой на ввод числа) в пустые ячейки
- 13 строчек с учетом html и css
Принцип работы
Для генерации судоку используется подготовленны шаблон, который хранится в виде строки. Раньше я использовал несколько шаблонов, но для данного случая вполне сгодится и один. Немного странным образом организую перемешивание массива с цифрами от 1 до 9. Этот массив потребуется для замены цифр в шаблоне. Далее начинаем формировать таблицу. Используя шаблон и массив для замены цифр формируем ячейки, не забывая создавать текстовые поля для ввода.
Код
Код можно было еще ужать и объединить некоторые строки, но мне кажется такой вариант более удобный для восприятия.
Сам код
<style>#sudoku td{border:1px solid #cdcdcd;background:#f8f8f8;padding: 5px 10px;margin:0;} #sudoku .l {margin:0;padding: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 = '0681594327597283416342671589934157268278936145156842973729318654813465792465729831';
var arr = Array(1,2,3,4,5,6,7,8,9);
for (var j=0;j<9;j++) arr.push(arr.splice((Math.random() * arr.length), 1));
for (var i=1;i<82;i++) {
if (i%9==1) document.write('<tr>');
document.write( (Math.random()*10>5) ? '<td>'+arr[field.substr(i,1)-1] + '</td>' : '<td class="l"><input type="text" size="1" maxlength="1" onkeydown = "javascript: return ((event.keyCode>47)&&(event.keyCode<58))"></td>' );
if (i%9==0) document.write('</tr>');
}
</script>
</table>