设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 【HTML】井字棋
返回列表 发新帖
查看: 2656|回复: 6

[作品展示] 【HTML】井字棋

[复制链接]
ckblt
发表于 2022-1-28 20:06:21 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
前几天，我做了个井字棋，今天正好发一下。

（小插曲：由于我不能上传zip文件，为了大家，我把图片换成了SVG……）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>井字棋</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }

  14.       body {
  15.         display: flex;
  16.         justify-content: center;
  17.         align-items: center;
  18.         min-height: 100vh;
  19.         flex-direction: column;
  20.       }

  22.       h1 {
  23.         font-size: 50px;
  24.       }
  25.       p {
  26.         margin-bottom: 50px;
  27.       }

  29.       #main td {
  30.         position: relative;
  31.         width: 100px;
  32.         height: 100px;
  33.         border: 1px solid #000;
  34.         font-size: 50px;
  35.       }
  36.       #main td svg {
  37.         position: absolute;
  38.         top: 50%;
  39.         left: 50%;
  40.         transform: translate(-50%, -50%);
  41.         width: 80%;
  42.         height: auto;
  43.       }

  45.       #p1,
  46.       #p2,
  47.       #draw {
  48.         position: absolute;
  49.         top: 50%;
  50.         left: 50%;
  51.         transform: translate(-50%, -50%);
  52.         font-size: 100px;
  53.         display: none;
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <h1>井字棋</h1>
  59.     <p>By Ckblt</p>
  60.     <table id="main">
  61.       <tr>
  62.         <td></td>
  63.         <td></td>
  64.         <td></td>
  65.       </tr>
  66.       <tr>
  67.         <td></td>
  68.         <td></td>
  69.         <td></td>
  70.       </tr>
  71.       <tr>
  72.         <td></td>
  73.         <td></td>
  74.         <td></td>
  75.       </tr>
  76.     </table>
  77.     <h1 id="draw">Draw!</h1>
  78.     <h1 id="p1">P1 Wins!</h1>
  79.     <h1 id="p2">P2 Wins!</h1>
  80.     <script>
  81.       const STATE = {
  82.         NULL: 0,
  83.         P1: 1,
  84.         P2: 2
  85.       }
  86.       const ticTacToe = [
  87.         STATE.NULL,
  88.         STATE.NULL,
  89.         STATE.NULL,
  90.         STATE.NULL,
  91.         STATE.NULL,
  92.         STATE.NULL,
  93.         STATE.NULL,
  94.         STATE.NULL,
  95.         STATE.NULL
  96.       ]
  97.       const elem = document.getElementById('main')
  98.       let player = 1
  99.       let win = null

  101.       const render = () => {
  102.         elem.querySelectorAll('td').forEach((e, i) => {
  103.           switch (ticTacToe[i]) {
  104.             case STATE.NULL:
  105.               e.innerHTML = ''
  106.               break

  108.             case STATE.P1:
  109.               e.innerHTML =
  110.                 '<svg t="1643371128605" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2199" width="200" height="200"><path d="M512.00337692 223.62507194c-39.07811828 0-76.40824868 7.54812851-112.02349786 22.7966725-35.61524846 15.24854397-66.28448731 35.85361048-92.03419966 61.53711098-25.75633368 25.82254479-46.28194643 56.45205638-61.51062641 92.02757833-15.26178662 35.70794488-22.88274757 72.93213694-22.88274757 112.07646705 0 39.01190645 7.62096168 76.36852217 22.88274757 111.94404411 15.22868071 35.71456621 35.75429346 66.3440778 61.51062641 92.1666226 25.74971235 25.69012185 56.41895047 46.14952278 92.03419966 61.53049039a284.03475437 284.03475437 0 0 0 112.02349786 22.80329382c39.06487635 0 76.39500676-7.69379412 112.01025522-22.80329382 35.61524846-15.38096763 66.28448731-35.84698987 92.03419965-61.5304904 25.75633368-25.82254479 46.28194643-56.45205638 61.51062642-92.16662258 15.28827122-35.57552195 22.88274757-72.93213694 22.88274758-111.94404412 0-39.1443301-7.5944771-76.36852217-22.88274758-112.07646704-15.22868071-35.57552195-35.75429346-66.21165414-61.51062642-92.03419894-25.74971235-25.67687918-56.41895047-46.28194643-92.03419965-61.53049038C588.39838368 231.17982179 551.06163194 223.62507194 511.99675559 223.62507194m0-82.41364616c50.20167629 0 98.25809517 9.75297643 144.02359033 29.39797427 45.79860107 19.63837652 85.22764104 46.0104785 118.27387798 79.10968462 33.07272152 32.96678243 59.41833818 72.38920181 79.03023011 118.2606353 19.61851326 45.73901058 29.43770153 93.81529271 29.45094418 143.94413656 0.03972724 50.27450871-9.81918826 98.35079085-29.45094418 144.08980216-19.62513458 45.87143423-45.97075126 85.29385288-79.03023011 118.254014-33.03299426 33.10582743-72.43554966 59.47792868-118.27387797 79.12292725C610.19526027 872.88993219 562.19181056 882.78195289 512.00337692 882.78195289c-50.18843363 0-98.19188333-9.89202143-144.02359031-29.39797427-45.85157025-19.63837652-85.26736828-46.0104785-118.28712063-79.1096846C216.62656579 741.30751156 190.28757045 701.8850922 170.66243587 656.00703736 151.03068066 610.27464813 141.17176516 562.19836599 141.21149168 511.93047787c0.01324266-50.13546446 9.83243092-98.21174661 29.45094419-143.94413656 19.61189194-45.88467617 45.950888-85.3004742 79.03023011-118.26725664 33.0396156-33.10582743 72.47527689-59.47130809 118.28712063-79.11630594C413.73866043 150.96440221 461.78845799 141.21142578 511.99675559 141.21142578" p-id="2200"></path></svg>' // ???
  111.               break

  113.             case STATE.P2:
  114.               e.innerHTML =
  115.                 '<svg t="1643371178726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3050" width="200" height="200"><path d="M886.784 746.496q29.696 30.72 43.52 56.32t-4.608 58.368q-4.096 6.144-11.264 14.848t-14.848 16.896-15.36 14.848-12.8 9.728q-25.6 15.36-60.416 8.192t-62.464-34.816l-43.008-43.008-57.344-57.344-67.584-67.584-73.728-73.728-131.072 131.072q-60.416 60.416-98.304 99.328-38.912 38.912-77.312 48.128t-68.096-17.408l-7.168-7.168-11.264-11.264-11.264-11.264q-6.144-6.144-7.168-8.192-11.264-14.336-13.312-29.184t2.56-29.184 13.824-27.648 20.48-24.576q9.216-8.192 32.768-30.72l55.296-57.344q33.792-32.768 75.264-73.728t86.528-86.016q-49.152-49.152-93.696-93.184t-79.872-78.848-57.856-56.832-27.648-27.136q-26.624-26.624-27.136-52.736t17.92-52.736q8.192-10.24 23.552-24.064t21.504-17.92q30.72-20.48 55.296-17.92t49.152 28.16l31.744 31.744q23.552 23.552 58.368 57.344t78.336 76.288 90.624 88.576q38.912-38.912 76.288-75.776t69.632-69.12 58.368-57.856 43.52-43.008q24.576-23.552 53.248-31.232t55.296 12.8q1.024 1.024 6.656 5.12t11.264 9.216 10.752 9.728 7.168 5.632q27.648 26.624 27.136 57.856t-27.136 57.856q-18.432 18.432-45.568 46.08t-60.416 60.416-70.144 69.632l-77.824 77.824q37.888 36.864 74.24 72.192t67.584 66.048 56.32 56.32 41.472 41.984z" p-id="3051"></path></svg>' // ?????
  116.               break

  118.             default:
  119.               break
  120.           }
  121.         })
  122.       }

  124.       const judge = () => {
  125.         console.log(ticTacToe)
  126.         if (
  127.           (ticTacToe[0] === STATE.P1 &&
  128.             ticTacToe[1] === STATE.P1 &&
  129.             ticTacToe[2] === STATE.P1) ||
  130.           (ticTacToe[3] === STATE.P1 &&
  131.             ticTacToe[4] === STATE.P1 &&
  132.             ticTacToe[5] === STATE.P1) ||
  133.           (ticTacToe[6] === STATE.P1 &&
  134.             ticTacToe[7] === STATE.P1 &&
  135.             ticTacToe[8] === STATE.P1) ||
  136.           //
  137.           (ticTacToe[0] === STATE.P1 &&
  138.             ticTacToe[3] === STATE.P1 &&
  139.             ticTacToe[6] === STATE.P1) ||
  140.           (ticTacToe[1] === STATE.P1 &&
  141.             ticTacToe[4] === STATE.P1 &&
  142.             ticTacToe[7] === STATE.P1) ||
  143.           (ticTacToe[2] === STATE.P1 &&
  144.             ticTacToe[5] === STATE.P1 &&
  145.             ticTacToe[8] === STATE.P1) ||
  146.           //
  147.           (ticTacToe[0] === STATE.P1 &&
  148.             ticTacToe[4] === STATE.P1 &&
  149.             ticTacToe[8] === STATE.P1) ||
  150.           (ticTacToe[2] === STATE.P1 &&
  151.             ticTacToe[4] === STATE.P1 &&
  152.             ticTacToe[6] === STATE.P1)
  153.         )
  154.           win = 1
  155.         else if (
  156.           (ticTacToe[0] === STATE.P2 &&
  157.             ticTacToe[1] === STATE.P2 &&
  158.             ticTacToe[2] === STATE.P2) ||
  159.           (ticTacToe[3] === STATE.P2 &&
  160.             ticTacToe[4] === STATE.P2 &&
  161.             ticTacToe[5] === STATE.P2) ||
  162.           (ticTacToe[6] === STATE.P2 &&
  163.             ticTacToe[7] === STATE.P2 &&
  164.             ticTacToe[8] === STATE.P2) ||
  165.           //
  166.           (ticTacToe[0] === STATE.P2 &&
  167.             ticTacToe[3] === STATE.P2 &&
  168.             ticTacToe[6] === STATE.P2) ||
  169.           (ticTacToe[1] === STATE.P2 &&
  170.             ticTacToe[4] === STATE.P2 &&
  171.             ticTacToe[7] === STATE.P2) ||
  172.           (ticTacToe[2] === STATE.P2 &&
  173.             ticTacToe[5] === STATE.P2 &&
  174.             ticTacToe[8] === STATE.P2) ||
  175.           //
  176.           (ticTacToe[0] === STATE.P2 &&
  177.             ticTacToe[4] === STATE.P2 &&
  178.             ticTacToe[8] === STATE.P2) ||
  179.           (ticTacToe[2] === STATE.P2 &&
  180.             ticTacToe[4] === STATE.P2 &&
  181.             ticTacToe[6] === STATE.P2)
  182.         )
  183.           win = 2
  184.         else if (
  185.           ticTacToe[0] !== 0 &&
  186.           ticTacToe[1] !== 0 &&
  187.           ticTacToe[2] !== 0 &&
  188.           ticTacToe[3] !== 0 &&
  189.           ticTacToe[4] !== 0 &&
  190.           ticTacToe[5] !== 0 &&
  191.           ticTacToe[6] !== 0 &&
  192.           ticTacToe[7] !== 0 &&
  193.           ticTacToe[8] !== 0
  194.         )
  195.           win = 0

  197.         switch (win) {
  198.           case 0:
  199.             elem.style.opacity = '0.5'
  200.             document.getElementById('draw').style.display = 'block'
  201.             break

  203.           case 1:
  204.             elem.style.opacity = '0.5'
  205.             document.getElementById('p1').style.display = 'block'
  206.             break

  208.           case 2:
  209.             elem.style.opacity = '0.5'
  210.             document.getElementById('p2').style.display = 'block'
  211.             break

  213.           default:
  214.             break
  215.         }
  216.       }

  218.       render()

  220.       elem.querySelectorAll('td').forEach((e, i) => {
  221.         e.addEventListener('click', () => {
  222.           if (win === null && ticTacToe[i] === STATE.NULL) {
  223.             ticTacToe[i] = player
  224.             player === 1 ? (player = 2) : (player = 1)

  226.             render()
  227.             judge()
  228.           }
  229.         })
  230.       })
  231.     </script>
  232.   </body>
  233. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

ckblt
 楼主| 发表于 2022-1-28 20:07:29 | 显示全部楼层
还是那句话，如果有问题，请回复我哦~
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

shiyouroc
发表于 2022-2-7 12:37:28 From FishC Mobile | 显示全部楼层
虽然看不懂还是很牛逼。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

hornwong
发表于 2022-2-7 13:13:36 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

Passepartout
发表于 2022-2-7 16:36:27 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

隔壁老程呀
发表于 2022-2-7 20:08:10 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

shiyouroc
发表于 2022-3-30 09:10:00 | 显示全部楼层
建立编个ai对战。@ckblt
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 01:56

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表