div+css实现井字过三关游戏代码

代码语言:html

所属分类:游戏

代码描述:div+css实现井字过三关游戏代码,两个玩家,一个打圈(O),一个打叉(X),轮流在3乘3的格上打自己的符号,最先以横、直、斜连成一线则为胜。如果双方都下得正确无误,将得和局。

代码标签: css 井字 游戏

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        * {
          box-sizing: border-box;
        }
        body,
        html {
          align-items: center;
          background-color: #1f3a93;
          color: #fafafa;
          display: flex;
          flex-direction: column;
          font-family: 'Arial', sans-serif;
          justify-content: center;
          height: 100vh;
          width: 100vw;
          overflow: hidden;
          position: relative;
        }
        svg {
          height: 100px;
          width: 100px;
        }
        input {
          opacity: 0;
        }
        label {
          cursor: pointer;
          height: 100px;
          width: 100px;
          z-index: 2;
        }
        input,
        span,
        label {
          left: calc(var(--col) * 100px);
          position: absolute;
          top: calc(var(--row) * 100px);
        }
        circle,
        path {
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards;
          -webkit-animation-name: draw;
                  animation-name: draw;
        }
        circle {
          -webkit-animation-duration: 0.5s;
                  animation-duration: 0.5s;
          stroke: #f62459;
        }
        path {
          -webkit-animation-duration: 0.25s;
                  animation-duration: 0.25s;
          stroke: #36dbd7;
        }
        button {
          cursor: pointer;
          position: absolute;
          bottom: 20px;
          padding: 8px 24px;
          border-radius: 4px;
          border: 0;
          background: #1f3a93;
          font-size: 0.75rem;
          color: #fafafa;
          filter: drop-shadow(0 5px 5px #000);
          transition: transform 0.1s, filter 0.1s;
        }
        button:hover {
          filter: drop-shadow(0 5px 4px #000);
          transform: translateY(1px);
        }
        button:active {
          transform: translateY(5px);
          filter: drop-shadow(0 0 0 transparent);
        }
        span {
          display: none;
          transform: translate3d(0, 0, 3px);
        }
        input:checked + span {
          display: block;
        }
        .o {
          transform: rotateY(180deg) rotate(-35deg);
        }
        .x path:nth-of-type(2) {
          -webkit-animation-delay: 0.25s;
                  animation-delay: 0.25s;
        }
        .board {
          height: 300px;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          transform-style: preserve-3d;
          width: 300px;
        }
        .board__line {
          height: 10px;
          left: calc(var(--x) * 100px);
          position: absolute;
          top: calc(var(--y) * 100px);
          width: 300px;
        }
        .board__line path {
          stroke: #fafafa;
        }
        .board__line:nth-of-type(1),
        .board__line:nth-of-type(2) {
          transform: rotate(90deg) translate(-5px, 0);
          transform-origin: left center;
        }
        .board__line:nth-of-type(3),
        .board__line:nth-of-type(4) {
          transform: translate(0, -50%);
        }
        .board__line:nth-of-type(1) path {
          -webkit-animation-delay: 0.25s;
                  animation-delay: 0.25s;
        }
        .board__line:nth-of-type(2) path {
          -webkit-animation-delay: 0.5s;
                  animation-delay: 0.5s;
        }
        .board__line:nth-of-type(3) path {
          -webkit-animation-delay: 0.75s;
                  animation-delay: 0.75s;
        }
        .board__line:nth-of-type(4) path {
          -webkit-animation-delay: 1s;
                  animation-delay: 1s;
        }
        .board__result {
          -webkit-animation: fadeBg 0.25s 0.5s;
                  animation: fadeBg 0.25s 0.5s;
          -webkit-animation-fill-mode: backwards;
                  animation-fill-mode: backwards;
          background: #1f3a93;
          display: none;
          height: 100%;
          left: 0;
          margin: 0;
          padding: 0;
          position: absolute;
          top: 0;
          transform: translate3d(0, 0, 4px);
          width: 100%;
        }
        .result__content {
          align-items: center;
          -webkit-animation: flyIn 0.25s 0.75s;
                  animation: flyIn 0.25s 0.75s;
          -webkit-animation-fill-mode: backwards;
                  animation-fill-mode: backwards;
          background: #fafafa;
          border-radius: 10px;
          color: #1f3a93;
          display: flex;
          filter: drop-shadow(0 10px 10px #000);
          flex-direction: column;
          height: 100%;
          justify-content: center;
          left: 0;
          margin: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 3;
        }
        .result__title {
          font-size: 1.5rem;
          font-weight: bolder;
          text-transform: uppercase;
        }
        .result__details {
          margin: 0;
        }
        .result__shield {
          -webkit-animation: fadeBg 0.25s 0.5s;
                  animation: fadeBg 0.25s 0.5s;
          -webkit-animation-fill-mode: backwards;
                  animation-fill-mode: backwards;
          background: #1f3a93;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 2;
        }
        .result__emoji {
          font-size: 5rem;
        }
        .result__icon path:nth-of-type(1) {
          -webkit-animation-delay: 1s;
                  animation-delay: 1s;
        }
        .result__icon path:nth-of-type(2) {
          -webkit-animation-delay: 1.4s;
                  animation-delay: 1.4s;
        }
        .result__icon circle {
          -webkit-animation-delay: 1s;
                  animation-delay: 1s;
        }
        .result__firework-icon {
          -webkit-animation: fly 0.75s 1s;
                  animation: fly 0.75s 1s;
          -webkit-animation-fill-mode: backwards;
                  animation-fill-mode: backwards;
          -webkit-animation-timing-function: cubic-bezier(0, 0.64, 0.25, 1.01);
                  animation-timing-function: cubic-bezier(0, 0.64, 0.25, 1.01);
          font-size: 2rem;
          height: 2rem;
          left: 50%;
          margin-left: -1rem;
          margin-top: -1rem;
          opacity: 0;
          position: absolute;
          top: 50%;
          transform: rotate(calc(var(--r) * 1deg)) translateY(calc(var(--y) * -1px));
          width: 2rem;
        }
        :checked ~ label:nth-of-type(odd),
        :checked ~ :checked ~ :checked ~ label:nth-of-type(odd),
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(odd),
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(odd),
        :checked ~ :checked ~ label:nth-of-type(even),
        :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(even),
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(even),
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(even) {
          transform: translate3d(0, 0, 2px);
        }
        :checked ~ label:nth-of-type(even),
        :checked ~ :checked ~ :checked ~ label:nth-of-type(even),
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(even),
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(even),
        :checked ~ :checked ~ label:nth-of-type(odd),
        :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(odd),
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(odd),
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ label:nth-of-type(odd) {
          transform: translate3d(0, 0, -1px);
        }
        :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ :checked ~ .board__result--draw {
          display: block;
        }
        #x--0:checked ~ #x--1:checked ~ #x--2:checked ~ .board__result--x,
        #x--3:checked ~ #x--4:checked ~ #x--5:checked ~ .board__result--x,
        #x--6:checked ~ #x--7:checked ~ #x--8:checked ~ .board__result--x,
        #x--0:checked ~ #x--3:checked ~ #x--6:checked ~ .board__result--x,
        #x--1:checked ~ #x--4:checked ~ #x--7:checked ~ .board__result--x,
        #x--2:checked ~ #x--5:checked ~ #x--8:checked ~ .board__result--x,
        #x--0:checked ~ #x--4:checked ~ #x--8:checked ~ .board__result--x,
        #x--2:checked ~ #x--4:checked ~ #x--6:checked ~ .board__result--x,
        #o--0:checked ~ #o--1:checked ~ #o--2:checked ~ .board__result--o,
        #o--3:checked ~ #o--4:checked ~ #o--5:checked ~ .board__result--o,
        #o--6:checked ~ #o--7:checked ~ #o--8:checked ~ .board__result--o,
        #o--0:checked ~ #o--3:checked ~ #o--6:checked ~ .board__result--o,
        #o--1:checked ~ #o--4:checked ~ #o--7:checked ~ .board__result--o,
        #o--2:checked ~ #o--5:checked ~ #o--8:checked ~ .board__result--o,
        #o--0:checked ~ #o--4:checked ~ #o--8:checked ~ .board__result--o,
        #o--2:checked ~ #o--4:checked ~ #o--6:checked ~ .board__result--o {
          display: block;
        }
        #x--0:checked ~ #x--1:checked ~ #x--2:checked ~ .board__result--x ~ .board__result--draw,
        #x--3:checked ~ #x--4:checked ~ #x--5:checked ~ .board__result--x ~ .board__result--draw,
        #x--6:checked ~ #x--7:checked ~ #x--8:checked ~ .board__result--x ~ .board__result--draw,
        #x--0:checked ~ #x--3:checked ~ #x--6:checked ~ .board__result--x ~ .board__result--draw,
        #x--1:checked ~ #x--4:checked ~ #x--7:checked ~ .board__result--x ~ .board__result--draw,
        #x--2:checked ~ #x--5:checked ~ #x--8:checked ~ .board__result--x ~ .board__result--draw,
        #x--0:checked ~ #x--4:checked ~ #x--8:checked ~ .board__result--x ~ .board__result--draw,
        #x--2:checked ~ #x--4:checked ~ #x--6:checked ~ .board__result--x ~ .board__result--draw,
        #o--0:checked ~ #o--1:checked ~ #o--2:checked ~ .board__result--o ~ .board__result--draw,
        #o--3:checked ~ #o--4:checked ~ #o--5:checked ~ .board__result--o ~ .board__result--draw,
        #o--6:checked ~ #o--7:checked ~ #o--8:checked ~ .board__result--o ~ .board__result--draw,
        #o--0:checked ~ #o--3:checked ~ #o--6:checked ~ .board__result--o ~ .board__result--draw,
        #o--1:checked ~ #o--4:checked ~ #o--7:checked ~ .board__result--o ~ .board__result--draw,
        #o--2:checked ~ #o--5:checked ~ #o--8:checked ~ .board__result--o ~ .board__result--draw,
        #o--0:checked ~ #o--4:checked ~ #o--8:checked ~ .board__result--o ~ .board__result--draw,
        #o--2:checked ~ #o--4:checked ~ #o--6:checked ~ .board__result--o ~ .board__result--draw {
          display: none;
        }
        @-webkit-keyframes draw {
          to {
            stroke-dashoffset: 0;
          }
        }
        @keyframes draw {
          to {
            stroke-dashoffset: 0;
          }
        }
        @-webkit-keyframes fadeBg {
          from {
            background: rgba(31,58,147,0);
          }
        }
        @keyframes fadeBg {
          from {
            background: rgba(31,58,147,0);
          }
        }
        @-webkit-keyframes fly {
          0% {
            opacity: 0;
            transform: translateY(0);
          }
          5%, 50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @keyframes fly {
          0% {
            opacity: 0;
            transform: translateY(0);
          }
          5%, 50% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
        @-webkit-keyframes flyIn {
          from {
            transform: translateY(100%) scale(0);
          }
        }
        @keyframes flyIn {
          from {
            transform: translateY(100%) scale(0);
          }
        }
    </style>



</head>

<body>
    <div class="game">
        <form>
            <div class="board">
                <svg class="board__line" style="--x: 1; --y: 0">
        <path d="M 5 5 L 295 5" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300"></path>
      </svg>
                <svg class="board__line" style="--x: 2; --y: 0">
        <path d="M 5 5 L 295 5" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300"></path>
      </svg>
                <svg class="board__line" style="--x: 0; --y: 1">
        <path d="M 5 5 L 295 5" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300"></path>
      </svg>
                <svg class="board__line" style="--x: 0; --y: 2">
        <path d="M 5 5 L 295 5" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300"></path>
      </svg>
                <input type="checkbox" id="x--0" style="--col: 0; --row: 0" /><span style="--col: 0; --row: 0">
        <svg class="x">
          <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path>
          <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path>
        </svg></span>
                <input type="checkbox" id="o--0" style="--col: 0; --row: 0" /><span style="--col: 0; --row: 0">
        <svg class="o">
          <circle class="naught" cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-dasharray="200" stroke-dashoffset="200" stroke-linecap="round"></circle>
        </svg></span>
                <input type="checkbox" id="x--1" style="--col: 1; --row: 0" /><span style="--col: 1; --row: 0">
        <svg class="x">
          <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path>
          <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path>
        </svg></span>
                <input type="checkbox" id="o--1" style="--col: 1; --row: 0" /><span style="--col: 1; --row: 0">
        <svg class="o">
          <circle class="naught" cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-dasharray="200" stroke-dashoffset="200" stroke-linecap="round"></circle>
        </svg></span>
                <input type="checkbox" id="x--2" style="--col: 2; --row: 0" /><span style="--col: 2; --row: 0">
        <svg class="x">
          <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path>
          <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path>
        </svg></span>
                <input type="checkbox" id="o--2" style="--col: 2; --row: 0" /><span style="--col: 2; --row: 0">
        <svg class="o">
          <circle class="naught" cx="50" cy="50" r="30" fill="none" stroke-width="10" stroke-dasharray="200" stroke-dashoffset="200" stroke-linecap="round"></circle>
        </svg></span>
                <input type="checkbox" id="x--3" style="--col: 0; --row: 1" /><span style="--col: 0; --row: 1">
        <svg class="x">
          <path class="cross" d="M 20 20 L 80 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path>
          <path class="cross" d="M 80 20 L 20 80" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100"></path>
        </svg></span>
                <input type="checkbox" id="o--3" style="--col: 0; --row: 1" /><span style="--col: 0; --ro.........完整代码请登录后点击上方下载按钮下载查看

网友评论0