div+css实现井字过三关游戏代码
代码语言:html
所属分类:游戏
代码描述:div+css实现井字过三关游戏代码,两个玩家,一个打圈(O),一个打叉(X),轮流在3乘3的格上打自己的符号,最先以横、直、斜连成一线则为胜。如果双方都下得正确无误,将得和局。
下面为部分代码预览,完整代码请点击下载或在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