БлогNot. Календарь на три фигурки

Fvt помощь ¿ поиск ≡ статистика Вниз ⌂ домой

Календарь на три фигурки

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

Для разложения на простые множители чисел 64, 365 и 366 (2*2*2*2*2*2=64, 5*73=365, 2*3*61=366) никакой шахматно-календарной идеи как в часах хаоса извлечь вчера не удалось, а вот сочетания и размещения для выборки по K элементов из N помочь могут, правда, там тоже ничего не равно 365, но есть Ar26 = 64 (только что это будут за размещения из шести фигур всего двух видов? По сути, получится номер дня в году в двоичной системе счисления, ноль - белая пешка, один - чёрная) и C143 = Cr123 = 364, попробуем воспользоваться последним соотношением, поскольку 29 февраля можно сделать равным 28-му, а 31-е декабря 30-му (всё равно уже никто разницы не увидит) и тогда останется ровно 364 сочетания с повторением для двенадцати фигур, которые вполне могут оказаться шахматными.

Ниже показан скрипт в работе и полный исходник, конечно, можно вставить теги <style>, внешний <div> и <script> + <noscript> в любой документ HTML, как сделано здесь.

Скрипт будет сам обновляться раз в минуту, поэтому смену даты отловит с такой погрешностью. 

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="utf-8">
 <title>3 Pieces Calendar</title>
 <style>
  .wrapper_3pi {
   margin-left: auto;
   margin-right: auto;
   width:240px;
  }
  .board_3pi {
   padding: 0;
   border: 0;
   margin: 0;
   overflow:hidden;
   height:80px;
   white-space: nowrap;
  }
  .field_3pi {
   padding: 0;
   border: 0;
   margin: 0;
   width: 80px;
   height: 80px;
   display: inline-block;
  }
  .white_3pi {
   background-color: #f0d9b5;
   color: #b58863;
  }
  .black_3pi {
   background-color: #b58863;
   color: #f0d9b5;
  }
  .info_3pi {
   font-size: 0.8rem;
   font-family: monospace;
  }
 </style>

</head><body>

<div id="picturebox_3pi" style="display: none;"></div>
<div class="wrapper_3pi">
 <div class="board_3pi">
  <!-- ниже форматировать именно так, чтобы не было разрывов  -->
  <div id="data_3pi1" class="field_3pi black_3pi"
  ></div><div id="data_3pi2" class="field_3pi white_3pi"
  ></div><div id="data_3pi3" class="field_3pi black_3pi"></div>
 </div>
 <span id="info_3pi" class="info_3pi"></span>
</div>

 <script>
  let url = 'http://scripts.kislenko.net/MyChessPGNPlayer/img/';
  let imgSources = [ 
   "bP.png", "wP.png", "bN.png", "wN.png", "bB.png", "wB.png", 
   "bR.png", "wR.png", "bQ.png", "wQ.png", "bK.png", "wK.png"
  ];
  let imagesDiv = document.getElementById('picturebox_3pi');
  let comb = [];
  
  let comb_with_repetitions = function (N, K) {
   //Сочетания с повторением Cr(n,k) = (n+k-1)! / (k! * (n-1)!)
   let d = Array(N).fill(0).map(function(val,index){return index;});
   N--;
   let v = Array(K+1).fill(0);
   let comb = [];
   while (true) {
    for (var i = 0; i < K; i++) {
     if (v[i] > N) {
      v[i + 1] += 1;
      for (var k = i; k >= 0; k--) v[k] = v[i + 1];
     }
    }
    if (v[K] > 0) break;
    let item = [];
    for (var i = K - 1; i > -1; i--) {
     item.push (d[v[i]]+1);
    }
    comb.push (item);
    v[0]++;
   }
   return comb;
  }

  let getLeapYear = function (year) {
   return (year % 4 == 0 && year % 100 !=0 || year % 400 == 0 ? 1 : 0);
  }

  let getFormattedDate  = function (dt) {
   let wds = ['Вс', 'Пн','Вт','Ср','Чт','Пт','Сб'];
   let wms = ['янв', 'фев', 'мар', 'апр', 'мая', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'];
   let d = String(dt.getDate()).padStart(2,'0'), 
       m = dt.getMonth(), wd = dt.getDay(), 
       y = String(dt.getFullYear()%100).padStart(2,'0');
   return wds[wd] + ', ' + d + ' ' + wms[m] + ' ' + y;
  }

  let numberOfDay = function () { //номер дня в году с единицы, 29.02 = 60-й день в високосном
   let now = new Date();
   let start = new Date(now.getFullYear(), 0, 0);
   let diff = (now - start) + ((start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000);
   let oneDay = 1000 * 60 * 60 * 24;
   let day = Math.floor(diff / oneDay);
   let leap = getLeapYear (now.getFullYear());
   return [ day, leap, getFormattedDate(now) ];
  }   
  
  let startGame = function () {
   let [nday, leap, str] = numberOfDay ();
   let index = nday - 1;
   if (leap && nday > 59) index--; //29.02 как 28.02
   if (index > comb.length - 1) index = comb.length - 1; //31.12 как 30.12
   let combStr = '';
   for (let i = 1; i <= 3; i++) {
    let div = document.getElementById('data_3pi'+i);
    while (div.firstChild) div.removeChild (div.firstChild);
    let j = comb[index][i-1]-1;
    let img = document.getElementById('img_3pi'+j);
    div.appendChild (img.cloneNode());
    combStr += String(comb[index][i-1]).padStart(2,'0') + (i < 3 ? ',' : '');
   }
   document.getElementById('info_3pi').innerHTML =  
    '&lt;' + combStr + '&gt; ' + str + ', # '+String(nday).padStart(3,'0');
  }
   
  let checkImgLoaded = function () { 
   let width_1 = 80;
   let widthSum = 0;
   for (let i = 0; i < imgSources.length; i++) {
    let img = document.createElement('img');
    img.src = url + imgSources[i];
    widthSum += img.width;
   }
   if (widthSum == imgSources.length * width_1) {
    comb = comb_with_repetitions (12,3); //364 комбинации
    startGame();  
    setInterval (startGame,1000*60); //обновлять раз в минуту
   }
   else {
    alert ("Ошибка, картинки испорчены или не загружены");
   }
  }
  
  window.addEventListener ('load', function (e) {
   let counter = 0;
   let imgArray = Array(imgSources.length).fill('');
   let onLoadGame = function () {
    counter++;
    if (counter == imgSources.length) checkImgLoaded();
   }
   for (let i = 0; i < imgSources.length; i++) {
    imgArray[i] = document.createElement('img');
    imgArray[i].onload = imgArray.onerror = onLoadGame;
    imgArray[i].setAttribute('id', 'img_3pi'+i);
    imgArray[i].src = url + imgSources[i];
   }
   for (let i = 0; i < imgSources.length; i++) imagesDiv.appendChild (imgArray[i]);  
  }, false);
 </script>
 <noscript>
  <p>Включите Javascript в браузере для работы приложения.</p>
 </noscript>
 
</body></html>

Картинки подгружаются из папки автоплеера. Можно было обойтись и без их предзагрузки с последующим копированием из скрытого раздела в разделы с id="img_3pi1", ..., img_3pi3, но шаблон с предзагрузкой попался под руку первым.

Кроме этого приёма "клонирования" картинки ещё могут пригодиться методы:

  • comb_with_repetitions - сочетания с повторением Cr(n,k) = (n+k-1)! / (k! * (n-1)!);
  • numberOfDay - номер дня в году начиная с единицы.
Вот последовательности выбора номеров фигур для дней 1, 2, ..., 364 (клик).
  1. 1, 1, 1
  2. 1, 1, 2
  3. 1, 1, 3
  4. 1, 1, 4
  5. 1, 1, 5
  6. 1, 1, 6
  7. 1, 1, 7
  8. 1, 1, 8
  9. 1, 1, 9
  10. 1, 1, 10
  11. 1, 1, 11
  12. 1, 1, 12
  13. 1, 2, 2
  14. 1, 2, 3
  15. 1, 2, 4
  16. 1, 2, 5
  17. 1, 2, 6
  18. 1, 2, 7
  19. 1, 2, 8
  20. 1, 2, 9
  21. 1, 2, 10
  22. 1, 2, 11
  23. 1, 2, 12
  24. 1, 3, 3
  25. 1, 3, 4
  26. 1, 3, 5
  27. 1, 3, 6
  28. 1, 3, 7
  29. 1, 3, 8
  30. 1, 3, 9
  31. 1, 3, 10
  32. 1, 3, 11
  33. 1, 3, 12
  34. 1, 4, 4
  35. 1, 4, 5
  36. 1, 4, 6
  37. 1, 4, 7
  38. 1, 4, 8
  39. 1, 4, 9
  40. 1, 4, 10
  41. 1, 4, 11
  42. 1, 4, 12
  43. 1, 5, 5
  44. 1, 5, 6
  45. 1, 5, 7
  46. 1, 5, 8
  47. 1, 5, 9
  48. 1, 5, 10
  49. 1, 5, 11
  50. 1, 5, 12
  51. 1, 6, 6
  52. 1, 6, 7
  53. 1, 6, 8
  54. 1, 6, 9
  55. 1, 6, 10
  56. 1, 6, 11
  57. 1, 6, 12
  58. 1, 7, 7
  59. 1, 7, 8
  60. 1, 7, 9
  61. 1, 7, 10
  62. 1, 7, 11
  63. 1, 7, 12
  64. 1, 8, 8
  65. 1, 8, 9
  66. 1, 8, 10
  67. 1, 8, 11
  68. 1, 8, 12
  69. 1, 9, 9
  70. 1, 9, 10
  71. 1, 9, 11
  72. 1, 9, 12
  73. 1, 10, 10
  74. 1, 10, 11
  75. 1, 10, 12
  76. 1, 11, 11
  77. 1, 11, 12
  78. 1, 12, 12
  79. 2, 2, 2
  80. 2, 2, 3
  81. 2, 2, 4
  82. 2, 2, 5
  83. 2, 2, 6
  84. 2, 2, 7
  85. 2, 2, 8
  86. 2, 2, 9
  87. 2, 2, 10
  88. 2, 2, 11
  89. 2, 2, 12
  90. 2, 3, 3
  91. 2, 3, 4
  92. 2, 3, 5
  93. 2, 3, 6
  94. 2, 3, 7
  95. 2, 3, 8
  96. 2, 3, 9
  97. 2, 3, 10
  98. 2, 3, 11
  99. 2, 3, 12
  100. 2, 4, 4
  101. 2, 4, 5
  102. 2, 4, 6
  103. 2, 4, 7
  104. 2, 4, 8
  105. 2, 4, 9
  106. 2, 4, 10
  107. 2, 4, 11
  108. 2, 4, 12
  109. 2, 5, 5
  110. 2, 5, 6
  111. 2, 5, 7
  112. 2, 5, 8
  113. 2, 5, 9
  114. 2, 5, 10
  115. 2, 5, 11
  116. 2, 5, 12
  117. 2, 6, 6
  118. 2, 6, 7
  119. 2, 6, 8
  120. 2, 6, 9
  121. 2, 6, 10
  122. 2, 6, 11
  123. 2, 6, 12
  124. 2, 7, 7
  125. 2, 7, 8
  126. 2, 7, 9
  127. 2, 7, 10
  128. 2, 7, 11
  129. 2, 7, 12
  130. 2, 8, 8
  131. 2, 8, 9
  132. 2, 8, 10
  133. 2, 8, 11
  134. 2, 8, 12
  135. 2, 9, 9
  136. 2, 9, 10
  137. 2, 9, 11
  138. 2, 9, 12
  139. 2, 10, 10
  140. 2, 10, 11
  141. 2, 10, 12
  142. 2, 11, 11
  143. 2, 11, 12
  144. 2, 12, 12
  145. 3, 3, 3
  146. 3, 3, 4
  147. 3, 3, 5
  148. 3, 3, 6
  149. 3, 3, 7
  150. 3, 3, 8
  151. 3, 3, 9
  152. 3, 3, 10
  153. 3, 3, 11
  154. 3, 3, 12
  155. 3, 4, 4
  156. 3, 4, 5
  157. 3, 4, 6
  158. 3, 4, 7
  159. 3, 4, 8
  160. 3, 4, 9
  161. 3, 4, 10
  162. 3, 4, 11
  163. 3, 4, 12
  164. 3, 5, 5
  165. 3, 5, 6
  166. 3, 5, 7
  167. 3, 5, 8
  168. 3, 5, 9
  169. 3, 5, 10
  170. 3, 5, 11
  171. 3, 5, 12
  172. 3, 6, 6
  173. 3, 6, 7
  174. 3, 6, 8
  175. 3, 6, 9
  176. 3, 6, 10
  177. 3, 6, 11
  178. 3, 6, 12
  179. 3, 7, 7
  180. 3, 7, 8
  181. 3, 7, 9
  182. 3, 7, 10
  183. 3, 7, 11
  184. 3, 7, 12
  185. 3, 8, 8
  186. 3, 8, 9
  187. 3, 8, 10
  188. 3, 8, 11
  189. 3, 8, 12
  190. 3, 9, 9
  191. 3, 9, 10
  192. 3, 9, 11
  193. 3, 9, 12
  194. 3, 10, 10
  195. 3, 10, 11
  196. 3, 10, 12
  197. 3, 11, 11
  198. 3, 11, 12
  199. 3, 12, 12
  200. 4, 4, 4
  201. 4, 4, 5
  202. 4, 4, 6
  203. 4, 4, 7
  204. 4, 4, 8
  205. 4, 4, 9
  206. 4, 4, 10
  207. 4, 4, 11
  208. 4, 4, 12
  209. 4, 5, 5
  210. 4, 5, 6
  211. 4, 5, 7
  212. 4, 5, 8
  213. 4, 5, 9
  214. 4, 5, 10
  215. 4, 5, 11
  216. 4, 5, 12
  217. 4, 6, 6
  218. 4, 6, 7
  219. 4, 6, 8
  220. 4, 6, 9
  221. 4, 6, 10
  222. 4, 6, 11
  223. 4, 6, 12
  224. 4, 7, 7
  225. 4, 7, 8
  226. 4, 7, 9
  227. 4, 7, 10
  228. 4, 7, 11
  229. 4, 7, 12
  230. 4, 8, 8
  231. 4, 8, 9
  232. 4, 8, 10
  233. 4, 8, 11
  234. 4, 8, 12
  235. 4, 9, 9
  236. 4, 9, 10
  237. 4, 9, 11
  238. 4, 9, 12
  239. 4, 10, 10
  240. 4, 10, 11
  241. 4, 10, 12
  242. 4, 11, 11
  243. 4, 11, 12
  244. 4, 12, 12
  245. 5, 5, 5
  246. 5, 5, 6
  247. 5, 5, 7
  248. 5, 5, 8
  249. 5, 5, 9
  250. 5, 5, 10
  251. 5, 5, 11
  252. 5, 5, 12
  253. 5, 6, 6
  254. 5, 6, 7
  255. 5, 6, 8
  256. 5, 6, 9
  257. 5, 6, 10
  258. 5, 6, 11
  259. 5, 6, 12
  260. 5, 7, 7
  261. 5, 7, 8
  262. 5, 7, 9
  263. 5, 7, 10
  264. 5, 7, 11
  265. 5, 7, 12
  266. 5, 8, 8
  267. 5, 8, 9
  268. 5, 8, 10
  269. 5, 8, 11
  270. 5, 8, 12
  271. 5, 9, 9
  272. 5, 9, 10
  273. 5, 9, 11
  274. 5, 9, 12
  275. 5, 10, 10
  276. 5, 10, 11
  277. 5, 10, 12
  278. 5, 11, 11
  279. 5, 11, 12
  280. 5, 12, 12
  281. 6, 6, 6
  282. 6, 6, 7
  283. 6, 6, 8
  284. 6, 6, 9
  285. 6, 6, 10
  286. 6, 6, 11
  287. 6, 6, 12
  288. 6, 7, 7
  289. 6, 7, 8
  290. 6, 7, 9
  291. 6, 7, 10
  292. 6, 7, 11
  293. 6, 7, 12
  294. 6, 8, 8
  295. 6, 8, 9
  296. 6, 8, 10
  297. 6, 8, 11
  298. 6, 8, 12
  299. 6, 9, 9
  300. 6, 9, 10
  301. 6, 9, 11
  302. 6, 9, 12
  303. 6, 10, 10
  304. 6, 10, 11
  305. 6, 10, 12
  306. 6, 11, 11
  307. 6, 11, 12
  308. 6, 12, 12
  309. 7, 7, 7
  310. 7, 7, 8
  311. 7, 7, 9
  312. 7, 7, 10
  313. 7, 7, 11
  314. 7, 7, 12
  315. 7, 8, 8
  316. 7, 8, 9
  317. 7, 8, 10
  318. 7, 8, 11
  319. 7, 8, 12
  320. 7, 9, 9
  321. 7, 9, 10
  322. 7, 9, 11
  323. 7, 9, 12
  324. 7, 10, 10
  325. 7, 10, 11
  326. 7, 10, 12
  327. 7, 11, 11
  328. 7, 11, 12
  329. 7, 12, 12
  330. 8, 8, 8
  331. 8, 8, 9
  332. 8, 8, 10
  333. 8, 8, 11
  334. 8, 8, 12
  335. 8, 9, 9
  336. 8, 9, 10
  337. 8, 9, 11
  338. 8, 9, 12
  339. 8, 10, 10
  340. 8, 10, 11
  341. 8, 10, 12
  342. 8, 11, 11
  343. 8, 11, 12
  344. 8, 12, 12
  345. 9, 9, 9
  346. 9, 9, 10
  347. 9, 9, 11
  348. 9, 9, 12
  349. 9, 10, 10
  350. 9, 10, 11
  351. 9, 10, 12
  352. 9, 11, 11
  353. 9, 11, 12
  354. 9, 12, 12
  355. 10, 10, 10
  356. 10, 10, 11
  357. 10, 10, 12
  358. 10, 11, 11
  359. 10, 11, 12
  360. 10, 12, 12
  361. 11, 11, 11
  362. 11, 11, 12
  363. 11, 12, 12
  364. 12, 12, 12

Порядок фигур виден из кода - это порядок их стандартных названий в массиве imgSources.

16.04.2023, 12:20 [302 просмотра]

теги: javascript дата картинка шахматы числа

К этой статье пока нет комментариев, Ваш будет первым