index.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  5. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
  6. <script type="text/javascript" src="../js/jquery.min.js" crossorigin="anonymous"></script>
  7. <link rel="stylesheet" href="../css/bootstrap.min.css" crossorigin="anonymous">
  8. <script type="text/javascript" src="../js/bootstrap.min.js" crossorigin="anonymous"></script>
  9. <link rel="stylesheet" href="../css/style.css">
  10. <link rel="preconnect" href="https://fonts.gstatic.com">
  11. <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  12. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  13. <title>五子</title>
  14. <meta charset="UTF-8">
  15. <style>
  16. * {
  17. padding: 0;
  18. margin: 0;
  19. }
  20. html,
  21. body,
  22. #five {
  23. background: #ccc;
  24. height: 100%;
  25. }
  26. .controls {
  27. /* position: absolute; */
  28. top: 20px;
  29. margin: 5px;
  30. }
  31. #game {
  32. width: 580px;
  33. height: 580px;
  34. /* box-shadow: 2px 2px 5px #333333; */
  35. /* text-align: center; */
  36. padding: 10px;
  37. background: rgba(0, 0, 0, 0.2);
  38. }
  39. table {
  40. width: 560px;
  41. border-collapse: collapse;
  42. border-spacing: 0;
  43. }
  44. td {
  45. width: 35px;
  46. height: 35px;
  47. text-align: center;
  48. }
  49. span {
  50. transition-duration: 100ms;
  51. display: inline-block;
  52. border-radius: 50%;
  53. width: 28px;
  54. height: 28px;
  55. vertical-align: middle;
  56. cursor: pointer;
  57. }
  58. .led {
  59. transition-duration: 100ms;
  60. display: inline-block;
  61. border: 5px double grey;
  62. border-radius: 50%;
  63. width: 18px;
  64. height: 18px;
  65. z-index: 10;
  66. vertical-align: middle;
  67. }
  68. .word {
  69. background: radial-gradient(transparent, rgb(15 15 15 / 25%));
  70. transition-duration: 100ms;
  71. display: inline-block;
  72. padding: 3px 6px;
  73. border: 5px double grey;
  74. z-index: 10;
  75. vertical-align: middle;
  76. }
  77. .red {
  78. filter: drop-shadow(0 0 2px red);
  79. }
  80. span::after {
  81. content: "";
  82. height: 0;
  83. display: inline-block;
  84. vertical-align: middle;
  85. }
  86. .black {
  87. box-shadow: 1px 1px 2px rgba(115, 115, 115, 0.7);
  88. background: #000;
  89. cursor: default;
  90. }
  91. .white {
  92. box-shadow: 1px 1px 2px rgba(115, 115, 115, 0.7);
  93. background: #fff;
  94. cursor: default;
  95. }
  96. .highlight.black {
  97. filter: drop-shadow(0 0 5px black);
  98. }
  99. .highlight.white {
  100. filter: drop-shadow(0 0 5px white);
  101. }
  102. .red:active {
  103. background: radial-gradient(transparent, rgb(15 15 15 / 25%));
  104. }
  105. .word:focus:not(:focus-visible) {
  106. background: radial-gradient(transparent, rgb(15 15 15 / 25%));
  107. outline: 0;
  108. }
  109. .tables {
  110. top: 0;
  111. left: 0;
  112. z-index: 3;
  113. }
  114. #xq-tips {
  115. position: absolute;
  116. top: 20%;
  117. left: 0;
  118. width: 100%;
  119. height: 150px;
  120. background: rgba(0, 0, 0, 0);
  121. display: none;
  122. z-index: 4;
  123. backdrop-filter: blur(5px);
  124. }
  125. .xq-txt {
  126. position: relative;
  127. height: 150px;
  128. background: rgba(35, 35, 35, 0.5);
  129. top: 0;
  130. bottom: 0;
  131. right: 0;
  132. left: 0;
  133. margin: auto;
  134. color: #fff;
  135. font-size: 40px;
  136. text-align: center;
  137. line-height: 150px;
  138. }
  139. #agin {
  140. display: none;
  141. }
  142. #regret {
  143. display: none;
  144. }
  145. .pointer {
  146. display: none;
  147. transition-duration: 100ms;
  148. pointer-events: none;
  149. position: absolute;
  150. opacity: 50%;
  151. left: 0;
  152. top: 0;
  153. z-index: 10;
  154. }
  155. .btn {
  156. text-shadow: rgb(85, 85, 85) 3px 2px 4px;
  157. }
  158. .noshadow {
  159. text-shadow: none;
  160. }
  161. input {
  162. outline-style: none;
  163. text-shadow: rgb(85, 85, 85) 3px 2px 4px;
  164. border: 1px solid #ccc;
  165. border-radius: 2px;
  166. background: rgb(215 215 215 / 50%);
  167. }
  168. input:hover {
  169. outline-style: none;
  170. text-shadow: rgb(85, 85, 85) 3px 2px 4px;
  171. border: 1px solid #ccc;
  172. border-radius: 2px;
  173. background: rgb(215 215 215 / 40%);
  174. }
  175. </style>
  176. <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  177. <title>Document</title>
  178. </head>
  179. <body>
  180. <div id="five">
  181. <div class="controls">
  182. <a class="btn btn-info" href="/"><i class="glyphicon glyphicon-home" aria-hidden="true"></i>&nbsp;返回</a>
  183. <button class="btn btn-primary" id="begin"><i class=" glyphicon glyphicon-ban-circle"
  184. aria-hidden="true"></i>&nbsp;开始游戏</button>
  185. <div class="btn-group">
  186. <button class="btn btn-primary" id="agin"><i class=" glyphicon glyphicon-repeat"
  187. aria-hidden="true"></i>&nbsp;重新游戏</button>
  188. <button class="btn btn-warning" id="regret"><i class=" glyphicon glyphicon-backward"
  189. aria-hidden="true"></i>&nbsp;悔棋</button>
  190. <button class="btn btn-info" id="check"><i class=" glyphicon glyphicon-exclamation-sign"
  191. aria-hidden="true"></i>&nbsp;下哪了</button>
  192. </div>
  193. <button class="btn btn-default noshadow" id="help"
  194. onclick="alert('说明:普通五子棋,需双人对战,同一设备只能使用一种颜色。\n(找不到同伴可以自己用两个设备玩)\n右侧按钮可用于发送信号,但请勿频繁点击。\n两个指示灯分别表示自身颜色和当前颜色,两者相同时说明该你了')"><i
  195. class="glyphicon glyphicon-question-sign" aria-hidden="true"></i></button>
  196. <div class="led mylight"></div>
  197. <div class="led light"></div>
  198. <button class="btn btn-danger word message1">快</button>
  199. <button class="btn btn-danger word message2">再想想?</button>
  200. <button class="btn btn-danger word message3">拜拜</button>
  201. <button class="btn btn-danger word message4"><input id="messageText"></button>
  202. </div>
  203. <div id="game" class="center-block">
  204. <span class="black pointer"></span>
  205. </div>
  206. <div style="display:inline-block">在线人数:<il id="messageServer"></il>
  207. </div>
  208. </div>
  209. </div>
  210. <script src="../js/chess.js"></script>
  211. </body>
  212. </html>