- PVSM.RU - https://www.pvsm.ru -
Сегодня мы научимся быстро создавать простой угадыватель мыслей, используя язык 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
Соответственно если мы предложим юзеру проделать следующие шаги:
Получается, что какое бы двузначное число юзер не загадал, проделав эти три шага, в результате получится число, напротив которого всегда будет буква А. Это хорошо видно в таблице выше.
На этом с теоретической частью можно закончить и перейти к практике.
Программная часть будет состоять всего из двух функций на JavaScript.
Первая функция «tableCreate» будет создавать нашу таблицу с числами и буквами. В ней мы выполним следующее:
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, а буквы английского алфавита будем генерировать в произвольном порядке. А также добавим еще один шаг для действий юзера:
В результате вот так будет выглядеть наша страничка:
Также исходный код Вы можете посмотреть на github. [2]
На этом у меня всё, если у Вас возникнут вопросы, замечания и пожелания, буду рад выслушать.
Ссылки по теме:
ru.akinator.com/ [3]
arbuz.uz/puzzle.php [4]
www.babyblog.ru/user/mamayanislava/48023 [5]
Автор: IgorZh
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/24742
Ссылки в тексте:
[1] угадыватель: http://work.yomu.ru/minder.html
[2] Также исходный код Вы можете посмотреть на github.: https://github.com/Nytla/minder
[3] ru.akinator.com/: http://ru.akinator.com/
[4] arbuz.uz/puzzle.php: http://arbuz.uz/puzzle.php
[5] www.babyblog.ru/user/mamayanislava/48023: http://www.babyblog.ru/user/mamayanislava/48023
[6] Источник: http://habrahabr.ru/post/165717/
Нажмите здесь для печати.