Игра Маджонг | Mahjong game
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

2019-09-17.js 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. мж.создатьЭкран = function()
  2. {
  3. var экран = document.createElement("div");
  4. экран.style.cssText = `
  5. position: absolute;
  6. left: 0;
  7. right: 0;
  8. top: 0;
  9. bottom: 0;
  10. pointer-events: none;
  11. `;
  12. return экран;
  13. };
  14. мж.показалиНазвание = new Уведомитель();
  15. мж.скрываемНазвание = new Уведомитель();
  16. мж.показатьНазвание = function()
  17. {
  18. var html = `
  19. <div id="bg" class="fade-out-3">
  20. <div class="center">
  21. <center>
  22. <h1 class="begin-transparent fade-in-1">Маджонг</h1>
  23. <p class="nowrap begin-transparent fade-in-2">открытая игра</p>
  24. </center>
  25. </div>
  26. </div>
  27. `;
  28. var css = `
  29. #bg
  30. {
  31. position: absolute;
  32. top: 0;
  33. left: 0;
  34. right: 0;
  35. bottom: 0;
  36. background-color: white;
  37. }
  38. .begin-transparent
  39. {
  40. opacity: 0;
  41. }
  42. .center
  43. {
  44. position: absolute;
  45. top: 50%;
  46. left: 50%;
  47. transform: translateX(-50%) translateY(-50%);
  48. }
  49. .fade-in-1
  50. {
  51. animation: fadeIn 2.5s ease;
  52. animation-delay: 0.5s;
  53. animation-fill-mode: forwards;
  54. }
  55. .fade-in-2
  56. {
  57. animation: fadeIn 1s ease;
  58. animation-delay: 1.5s;
  59. animation-fill-mode: forwards;
  60. }
  61. @keyframes fadeIn
  62. {
  63. from
  64. {
  65. opacity: 0;
  66. }
  67. to
  68. {
  69. opacity: 1;
  70. }
  71. }
  72. .fade-out-3
  73. {
  74. animation: fadeOut 1s ease;
  75. animation-delay: 3s;
  76. animation-fill-mode: forwards;
  77. }
  78. @keyframes fadeOut
  79. {
  80. from
  81. {
  82. opacity: 1;
  83. }
  84. to
  85. {
  86. opacity: 0;
  87. }
  88. }
  89. `;
  90. var заставка = мж.создатьЭкран();
  91. заставка.innerHTML = html;
  92. мж.стиль.innerHTML += css;
  93. document.body.appendChild(заставка);
  94. var фон = document.getElementById("bg");
  95. var колво = 0;
  96. фон.addEventListener(
  97. "animationend",
  98. function()
  99. {
  100. ++колво;
  101. if (колво == 2)
  102. {
  103. мж.скрываемНазвание.уведомить();
  104. }
  105. else if (колво == 3)
  106. {
  107. мж.показалиНазвание.уведомить();
  108. document.body.removeChild(заставка);
  109. }
  110. }
  111. );
  112. };