Шелдон Купер из сериала «Теория большого взрыва»
Сегодня мы научимся быстро создавать простой угадыватель мыслей, используя язык JavaScript, а также минимальный набор HTML и CSS. Это будет простая html-страничка, которая будет функционировать без перезагрузки. Основываться всё будет на простых математический вычислениях. Вот, собственно сам угадыватель, чтобы Вы четко понимали, чем мы будем заниматься под катом.
1. Приступаем к теоретической части
Допустим, у нас есть число, которое больше чем 9 и меньше чем 100, то есть это двузначное число.
Если брать любое двузначное число и вычитать из него его составляющие, то мы всегда будем получать число, которое делиться на число 9. Например:
10 – 1 – 0 = 9
23 – 2 – 3 = 18
56 – 5 – 6 = 45
Как видно из примера, все три результата 9, 18, 45 делятся на число 9. То есть какое бы двузначное число не загадал юзер, мы всегда будем знать, что это число делимо на число 9. Можно назвать это некой закономерностью. На этом и будет основываться угадывание.
Сделав, простое деление наибольшего двузначного числа 99 на число 9 мы узнаем, сколько всего в нашем случае цифр делимых на девять:
99 / 9 = 11
Это значит, что наши числа это:
9
9 + 9
9 + 9 + 9
...
И так 11-ть раз.
Теперь создадим таблицу с числами от 9 до 99 и наглядно покажем, какие из них мы будем знать.
9<- 17 25 33 41 49 57 65 73 81<- 89 97
10 18<- 26 34 42 50 58 66 74 82 90<- 98
11 19 27<- 35 43 51 59 67 75 83 91 99<-
12 20 28 36<- 44 52 60 68 76 84 92
13 21 29 37 45<- 53 61 69 77 85 93
14 22 30 38 46 54<- 62 70 78 86 94
15 23 31 39 47 55 63<- 71 79 87 95
16 24 32 40 48 56 64 72<- 80 88 96
Если напротив каждого числа, мы будем проставлять букву английского алфавита, а напротив числа которое делится на число 9, мы будем проставлять одну и туже букву английского алфавита, тогда у нас получится:
9 A<- 17 J 25 Q 33 X 41 F 49 M 57 T 65 A 73 H 81 A<- 89 W 97 D
10 B 18 A<- 26 R 34 Y 42 G 50 N 58 U 66 B 74 I 82 P 90 A<- 98 E
11 C 19 K 27 A<- 35 Z 43 H 51 O 59 V 67 C 75 J 83 Q 91 X 99 A<-
12 D 20 L 28 S 36 A<- 44 I 52 P 60 W 68 D 76 K 84 R 92 Y
13 F 21 M 29 T 37 B 45 A<- 53 Q 61 X 69 E 77 L 85 S 93 Z
14 G 22 N 30 U 38 C 46 J 54 A<- 62 Y 70 F 78 M 86 T 94 A
15 H 23 O 31 V 39 D 47 K 55 R 63 A<- 71 G 79 N 87 U 95 B
16 I 24 P 32 W 40 E 48 L 56 S 64 Z 72 A<- 80 O 88 V 96 C
Соответственно если мы предложим юзеру проделать следующие шаги:
- 1-й шаг: Загадать любое двузначное число (например, 71);
- 2-й шаг: Вычесть из него составляющие его цифры (например, 71 – 7 – 1 = 63);
- 3-й шаг: Найти число в таблице выше и букву, которой оно соответствует.
Получается, что какое бы двузначное число юзер не загадал, проделав эти три шага, в результате получится число, напротив которого всегда будет буква А. Это хорошо видно в таблице выше.
На этом с теоретической частью можно закончить и перейти к практике.
2. Приступаем к написанию угадывателя
Программная часть будет состоять всего из двух функций на JavaScript.
Первая функция «tableCreate» будет создавать нашу таблицу с числами и буквами. В ней мы выполним следующее:
- создадим массив, элементами которого будут 26 букв английского алфавита в верхнем регистре;
- сгенерируем произвольное число от 0 до 25, которое будем использовать, как индекс для выборки из массива букв только для чисел, которые делятся на 9;
- создаём цикл, в котором будут происходить 100 итераций. При каждой итерации будет проверка, если число итерации делится на 9, тогда мы берём наш сгенерированный индекс и выбираем с помощью него нашу букву в созданном массиве, иначе генерируем заново произвольное число от 0 до 25 и выбираем с помощью него букву в массиве. Таким образом в цикле будет формироваться наша таблица с числами и буквами.
function tableCreate() {
alphaArray = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
ax = Math.round(Math.random()*25);
var table = '<table border="0" cellspacing="1" cellpadding="1" width="100%"><tr>';
var j = 1;
for (i = 1; i < 101 ; i++) {
var a = Math.round(Math.random()*25);
if (i%9 == 0 && i < 100) {
a = ax;
table += '<td class="numbers">'+i+'</td><td class="letters">'+alphaArray[a]+'</td>';
} else {
table += '<td class="numbers">'+i+'</td><td class="letters">'+alphaArray[a]+'</td>';
}
if (j%10 == 0) {
table += '</tr><tr>';
}
j++;
}
table += '</table>';
sym.innerHTML = table;
sh.innerHTML = '';
}
Вторая функция «letterShow» будет отвечать за вывод на экран буквы, которую мы якобы угадали. В ней мы выполним следующее:
- удаляем таблицу с цифрами и буквами;
- выводим на экран якобы угаданную букву;
- выводим на экран ссылку с предложением попробовать ещё, при клике на которую сработает событие и запуститься первая функция.
function letterShow() {
sh.innerHTML = alphaArray[ax];
sym.innerHTML = '<h1><a href="javascript:tableCreate()">Попробовать Ещё!</a></h1>';
}
Как Вы уже поняли из описания функций, для конспирации будем генерировать таблицу чисел от 1 до 100, а буквы английского алфавита будем генерировать в произвольном порядке. А также добавим еще один шаг для действий юзера:
- 4-й шаг: Мысленно вообразите себе эту букву и щёлкнете по квадрату. В нём появится Ваша буква.
В результате вот так будет выглядеть наша страничка:
Также исходный код Вы можете посмотреть на github.
3. Послесловие
На этом у меня всё, если у Вас возникнут вопросы, замечания и пожелания, буду рад выслушать.
Ссылки по теме:
ru.akinator.com/
arbuz.uz/puzzle.php
www.babyblog.ru/user/mamayanislava/48023
Автор: IgorZh
