2048 enhancer

enhances 2048 game (the page) [previous update: a1.0.9]

  1. // ==UserScript==
  2. // @name 2048 enhancer
  3. // @namespace http://tampermonkey.net/
  4. // @version a1.1.0
  5. // @description enhances 2048 game (the page) [previous update: a1.0.9]
  6. // @author CSS8
  7. // @match https://gabrielecirulli.github.io/2048/
  8. // @grant none
  9. // @icon https://gabrielecirulli.github.io/2048/favicon.ico
  10. // ==/UserScript==
  11.  
  12. function addGlobalStyle(css) {
  13. var head, style;
  14. head = document.getElementsByTagName('head')[0];
  15. if (!head) { return; }
  16. style = document.createElement('style');
  17. style.type = 'text/css';
  18. style.innerHTML = css;
  19. head.appendChild(style);
  20. }
  21.  
  22. // Base for .title
  23.  
  24. addGlobalStyle('.title { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; cursor: default; border: none; font: normal normal bold 70px/normal "Bad Script", Helvetica, sans-serif; color: rgba(0, 0, 0, 0); text-align: center; -o-text-overflow: clip; text-overflow: clip; text-shadow: 3px 0 0 rgb(217,31,38) , 6px 0 0 rgb(226,91,14) , 9px 0 0 rgb(245,221,8) , 12px 0 0 rgb(5,148,68) , 15px 0 0 rgb(2,135,206) , 18px 0 0 rgb(4,77,145) , 21px 0 0 rgb(42,21,113) ; -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);');
  25. // Enable for hover effect
  26. /* addGlobalStyle('.title:hover { text-shadow: -3px 0 0 rgb(217,31,38) , -6px 0 0 rgb(226,91,14) , -9px 0 0 rgb(245,221,8) , -12px 0 0 rgb(5,148,68) , -15px 0 0 rgb(2,135,206) , -18px 0 0 rgb(4,77,145) , -21px 0 0 rgb(42,21,113) ; -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);');*/
  27.  
  28.  
  29. // begin new-game button
  30.  
  31. addGlobalStyle('.restart-button { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: relative; cursor: default; border: 4px solid rgb(255,255,255); color: rgb(255, 255, 255); text-align: center; -o-text-overflow: clip; text-overflow: clip; background: #FFAE00; !important; }');
  32. addGlobalStyle('.restart-button:hover { color: #ffffff; background: #bbada0; !iportant}');
  33. addGlobalStyle('a.restart-button a:after { content: '>'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; };');
  34. addGlobalStyle('a.restart-button:hover a:after { opacity: 1; right: 0; };');
  35.  
  36. // end restart-button
  37.  
  38. // begin background animation
  39.  
  40. addGlobalStyle('body { animation-name: body; animation-duration: 4s;};');
  41. addGlobalStyle('@keyframes body { 0% {background-color:grey;}; 25% {background-color:blue;}; 75% {background-color:green;}; 100% {background-color:red;} };');
  42.  
  43. // end body
  44.  
  45. // begin grid animation
  46.  
  47. addGlobalStyle('.grid-cell { animation: gridcell 5s infinite; };');
  48. addGlobalStyle('@keyframes gridcell { 50% {background-color: grey;} };');
  49.  
  50. // end grid animation
  51.  
  52. // begin text styling
  53.  
  54. // how-to-play section
  55.  
  56. addGlobalStyle('.important { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; cursor: default; border: none; font: normal normal bold 18px/normal "Bad Script", Helvetica, sans-serif; color: rgba(0, 0, 0, 0); text-align: center; -o-text-overflow: clip; text-overflow: clip; text-shadow: 2px 0 0 rgba(255,0,0,1) , 5px 0 0 rgba(189,86,86,1) ; -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) };');
  57.  
  58. // a
  59.  
  60. /*addGlobalStyle('a { animation: a 5s infinite; };');
  61. addGlobalStyle('@keyframes a { 50% {color: blue;}};');*/
  62. addGlobalStyle('a { cursor: default; };');
  63.  
  64. // donate button
  65.  
  66. addGlobalStyle('#submit { animation: submit 10s infinite; };');
  67. addGlobalStyle('@keyframes submit { 50% {background-color: pink;} };');
  68.  
  69. // (wip) tile animations
  70.  
  71. addGlobalStyle(' .enjoy-css { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 150px; height: 100px; border: none; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-shadow: 3px 3px 18px 3px rgba(0,150,255,0.91); box-shadow: 3px 3px 18px 3px rgba(0,150,255,0.91) ; }');
  72.  
  73. // end animations
  74.  
  75. // begin ect(s)
  76.  
  77. addGlobalStyle('');
  78.  
  79. // end script
  80.  
  81. // begin "full screen"
  82.  
  83.  
  84.  
  85. var newHTML = document.createElement ('div');
  86. newHTML.innerHTML = ' \
  87. <div id="happyText"> \
  88. Script by: \
  89. </div> \
  90. ';
  91.  
  92. document.body.appendChild (newHTML);
  93.  
  94. var newHTML = document.createElement ('div');
  95. newHTML.innerHTML = ' \
  96. <div id="happyText2"> \
  97. CSS8 \
  98. </div> \
  99. ';
  100.  
  101. document.body.appendChild (newHTML);
  102.  
  103. addGlobalStyle('#happyText2 { color: red; position: fixed; top: 25px; left: 5px; font-weight: 900; };');
  104. addGlobalStyle('#happyText { color: red; position: fixed; top: 5px; left: 5px; font-weight: 900; };');
  105.  
  106. // game outline
  107.  
  108. addGlobalStyle('.game-container { \
  109. -webkit-box-sizing: content-box; \
  110. -moz-box-sizing: content-box; \
  111. box-sizing: content-box; \
  112. border: none; \
  113. text-align: center; \
  114. -o-text-overflow: ellipsis; \
  115. text-overflow: ellipsis; \
  116. -webkit-box-shadow: 3px 3px 18px 3px #93918e; \
  117. box-shadow: 3px 3px 18px 3px #93918e ; }; \
  118. ');
  119. /* addGlobalStyle('#happyText2 { \
  120. -webkit-box-sizing: content-box; \
  121. -moz-box-sizing: content-box; \
  122. box-sizing: content-box; \
  123. border: none; \
  124. text-align: center; \
  125. -o-text-overflow: ellipsis; \
  126. text-overflow: ellipsis; \
  127. -webkit-box-shadow: 3px 3px 18px 3px #93918e; \
  128. box-shadow: 3px 3px 18px 3px #93918e ; }; \
  129. '); */
  130.  
  131. // begin tile animation
  132.  
  133. addGlobalStyle('.tile .tile-inner { \
  134. -webkit-box-sizing: content-box; \
  135. -moz-box-sizing: content-box; \
  136. box-sizing: content-box; \
  137. border: none; \
  138. text-align: center; \
  139. -o-text-overflow: ellipsis; \
  140. text-overflow: ellipsis; \
  141. -webkit-box-shadow: 3px 3px 18px 3px rgba(0,150,255,0.91); \
  142. box-shadow: 3px 3px 18px 3px rgba(0,150,255,0.91) ; }; \
  143. ');
  144.  
  145. /* addGlobalStyle('.tile .tile-8 { \
  146. -webkit-box-sizing: content-box; \
  147. -moz-box-sizing: content-box; \
  148. box-sizing: content-box; \
  149. border: none; \
  150. text-align: center; \
  151. -o-text-overflow: ellipsis; \
  152. text-overflow: ellipsis; \
  153. -webkit-box-shadow: 3px 3px 18px 3px rgba(0,150,255,0.91); \
  154. box-shadow: 3px 3px 18px 3px rgba(0,150,255,0.91) ; }; \
  155. '); */
  156.  
  157. // score shadow
  158.  
  159. addGlobalStyle('.score-container { text-shadow: 4px 4px 6px #cdc0b4; };');
  160. addGlobalStyle('.best-container { text-shadow: 4px 4px 6px #cdc0b4; };');

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址