Архитектурный шаблон "Мрак в моделях" на нескольких языках и платформах
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
1.4KB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Память | Memory</title>
  5. </head>
  6. <body>
  7. </body>
  8. <script>
  9. function memorySide() {
  10. return 50
  11. }
  12. function memorySpace() {
  13. return 20
  14. }
  15. function memoryGap() {
  16. return memorySide() + memorySpace()
  17. }
  18. function memoryItemPositions(M) {
  19. var pos = [];
  20. for (var i = 0; i < M.itemsCount; i++) {
  21. let row = Math.floor(i / 4)
  22. let x = memoryGap() + (i - row * 4) * memoryGap()
  23. let y = memoryGap() + row * memoryGap()
  24. pos.push([x, y])
  25. }
  26. return pos
  27. }
  28. </script>
  29. <script>
  30. var items = []
  31. // Section16Buttons.
  32. for (var i = 0; i < 16; i++) {
  33. let item = document.createElement("div")
  34. document.body.appendChild(item)
  35. items.push(item)
  36. item.id = `${i}`
  37. }
  38. // SectionGrid.
  39. var M = {
  40. itemsCount: items.length
  41. };
  42. let positions = memoryItemPositions(M);
  43. for (var id in positions) {
  44. var p = positions[id]
  45. var item = items[id];
  46. item.style.left = `${p[0]}px`
  47. item.style.top = `${p[1]}px`
  48. item.style.width = `${memorySide()}px`
  49. item.style.height = `${memorySide()}px`
  50. item.style.position = "absolute"
  51. item.style.background = "blue"
  52. }
  53. // SectionSelection.
  54. for (let id in items) {
  55. var item = items[id]
  56. item.onclick = function() {
  57. console.log("ИГР select id:", id)
  58. }
  59. }
  60. </script>
  61. </html>