ckblt 发表于 2022-1-28 20:06:21

【HTML】井字棋

前几天，我做了个井字棋，今天正好发一下。{:10_256:}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>井字棋</title>
    <style>
      * {
      margin: 0;
      padding: 0;
      }

      body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      flex-direction: column;
      }

      h1 {
      font-size: 50px;
      }
      p {
      margin-bottom: 50px;
      }

      #main td {
      position: relative;
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      font-size: 50px;
      }
      #main td svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: auto;
      }

      #p1,
      #p2,
      #draw {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 100px;
      display: none;
      }
    </style>
</head>
<body>
    <h1>井字棋</h1>
    <p>By Ckblt</p>
    <table id="main">
      <tr>
      <td></td>
      <td></td>
      <td></td>
      </tr>
      <tr>
      <td></td>
      <td></td>
      <td></td>
      </tr>
      <tr>
      <td></td>
      <td></td>
      <td></td>
      </tr>
    </table>
    <h1 id="draw">Draw!</h1>
    <h1 id="p1">P1 Wins!</h1>
    <h1 id="p2">P2 Wins!</h1>
    <script>
      const STATE = {
      NULL: 0,
      P1: 1,
      P2: 2
      }
      const ticTacToe = [
      STATE.NULL,
      STATE.NULL,
      STATE.NULL,
      STATE.NULL,
      STATE.NULL,
      STATE.NULL,
      STATE.NULL,
      STATE.NULL,
      STATE.NULL
      ]
      const elem = document.getElementById('main')
      let player = 1
      let win = null

      const render = () => {
      elem.querySelectorAll('td').forEach((e, i) => {
          switch (ticTacToe) {
            case STATE.NULL:
            e.innerHTML = ''
            break

            case STATE.P1:
            e.innerHTML =
                '<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>' // ???
            break

            case STATE.P2:
            e.innerHTML =
                '<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>' // ?????
            break

            default:
            break
          }
      })
      }

      const judge = () => {
      console.log(ticTacToe)
      if (
          (ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1) ||
          (ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1) ||
          (ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1) ||
          //
          (ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1) ||
          (ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1) ||
          (ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1) ||
          //
          (ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1) ||
          (ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1 &&
            ticTacToe === STATE.P1)
      )
          win = 1
      else if (
          (ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2) ||
          (ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2) ||
          (ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2) ||
          //
          (ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2) ||
          (ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2) ||
          (ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2) ||
          //
          (ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2) ||
          (ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2 &&
            ticTacToe === STATE.P2)
      )
          win = 2
      else if (
          ticTacToe !== 0 &&
          ticTacToe !== 0 &&
          ticTacToe !== 0 &&
          ticTacToe !== 0 &&
          ticTacToe !== 0 &&
          ticTacToe !== 0 &&
          ticTacToe !== 0 &&
          ticTacToe !== 0 &&
          ticTacToe !== 0
      )
          win = 0

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

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

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

          default:
            break
      }
      }

      render()

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

            render()
            judge()
          }
      })
      })
    </script>
</body>
</html>

ckblt 发表于 2022-1-28 20:07:29

还是那句话，如果有问题，请回复我哦~{:10_279:}

shiyouroc 发表于 2022-2-7 12:37:28

虽然看不懂还是很牛逼。

hornwong 发表于 2022-2-7 13:13:36

{:5_95:}

Passepartout 发表于 2022-2-7 16:36:27

{:5_108:}

隔壁老程呀 发表于 2022-2-7 20:08:10

{:5_108:}

shiyouroc 发表于 2022-3-30 09:10:00

建立编个ai对战。@ckblt
页: [1]
查看完整版本: 【HTML】井字棋