点击上方 【蓝字】 关注我们
井子游戏效果图
井子游戏逻辑
-
创建棋盘（createBoard函数）
-
构建 3x3 的井字棋棋盘。通过两层循环创建<div>格子元素，添加cell类、行和列索引属性，设置点击监听器，添加到游戏棋盘并在board数组中记录为null。
-
处理格子点击（handleCellClick函数）
-
格子被点击时触发。获取点击格子的行列索引，若为空则填充当前玩家标记并显示。检查是否获胜或平局，若获胜 / 平局则显示相应信息并禁用棋盘，否则切换当前玩家并更新状态。
-
检查获胜（checkWin函数）
-
检查行、列和对角线是否被同一玩家占据，若满足则该玩家获胜，返回true，否则返回false。
-
检查棋盘是否已满（isBoardFull函数）
-
遍历board数组，若有null值表示棋盘未满，返回false，全非null则已满，返回true。
-
禁用棋盘（disableBoard函数）
-
获取所有格子元素，移除点击事件监听器，防止游戏结束后继续点击。
-
代码
-
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>井字棋</title><meta name="viewport" content="width=device-width, initial-scale=1" /><style>"UTF-8";url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');reset {*,*:before,*:after {box-sizing: border-box;}img {max-width: 100%;}}html {color-scheme: dark;background-color: canvas;background-color: light-dark(#fff, #1e1e1e);background-color: light-dark(#fff, #121312);padding: 1rem;font-family: system-ui;font-family: 'Poppins', sans-serif;font-size: 1rem;}html body {display: grid;gap: 1.5rem;color: light-dark(#333, #aaa);color: light-dark(#444, #999);max-width: min(40rem, 100%);width: fit-content;width: min(100%, 42ch);margin: auto;text-align: center;padding-block: 0.5rem 0.5rem;}body {overflow: auto;position: relative;display: grid;place-content: center;width: 10rem;margin: auto;gap: 1rem;min-height: 90dvh;text-align: center;}body > * {transition: all 0.3s var(--back-out);}h1 {--player-1-clr: light-dark(oklch(0.5 0.15 200 / 1),oklch(0.7 0.07 200 / 1));--player-2-clr: light-dark(oklch(0.75 0.2 20 / 1),oklch(0.7 0.15 20 / 1));--player-clr: var(--player-1-clr);font-family: inherit;text-align: center;margin-block: 0;padding-block: 0;opacity: 0.6;display: grid;gap: 0.2rem;position: relative;color: light-dark(#000, #ccc);}body:has(.player-2s-turn) h1 {--player-clr: var(--player-2-clr);}h1 small {font-size: 0.5em;font-weight: normal;color: #888888;color: light-dark(#555, #777);}.logo {font-size: 18rem;margin-block-end: -4.9rem;font-weight: normal;height: 6rem;opacity: 0.07;display: grid;place-content: center;user-select: none;z-index: -1;}kbd {font-size: 0.9em;font-weight: bold;border: solid 1px #88888880;padding-inline: 0.5ch;border-radius: 3px;}hr {width: 100%;opacity: 0.25;}h1 sup {color: light-dark(#333, #ccc);font-size: 1.2rem;font-weight: normal;display: inline-block;display: block;font-family: 'Georgia';position: absolute;right: -1ch;top: 0;user-select: none;}.description {text-align: left;line-height: 1.6;line-height: 1.75;margin: 0 0.25rem;padding: 0;padding-inline: 0.5rem;position: relative;display: block;}.description sup {font-family: 'Georgia';font-size: 1.5rem;position: absolute;top: 1.175ch;left: -0.5ch;}.description em {font-style: normal;}.adjective {color: var(--player-clr);font-family: sans-serif;font-family: 'Poppins', sans-serif;text-transform: uppercase;font-weight: normal;font-style: normal;font-size: 0.75em;font-size: 0.35em;line-height: 1;letter-spacing: 9.25px;letter-spacing: 13.76px;position: relative;transition: color 0.3s var(--back-out);width: fit-content;margin-inline: auto;padding-left: 0.75ch;}b,i {font-family: inherit;font-weight: bold;font-style: normal;transition: all 0.3s var(--back-out);display: inline-grid;place-content: center;line-height: 0.75em;width: 0.75rem;height: 0.75rem;position: relative;z-index: 1;}b {color: var(--player-1-clr);transform: scale(2) translatey(-0.2rem);}i {color: var(--player-2-clr);}.fade-out {opacity: 75%;filter: grayscale(75%);}button {cursor: pointer;color: inherit;color: light-dark(#000, #fff);color: ButtonText;background-color: light-dark(ButtonFace, #444);border: transparent;padding: 0.25rem 0.5rem;border-radius: 4px;translate: 0 3px;width: max-content;margin-inline: auto;min-width: 17ch;transition: opacity 0.6s var(--back-out), background-color 0.3s var(--back-out),translate 0.6s var(--back-out);}button:hover {background-color: #88888840;}button:focus-visible {outline: dashed 1px currentcolor;outline-offset: -3px;}button:active {filter: scale(0.9);}table.xo:not(:has(b)) + footer button {visibility: hidden;opacity: 0;translate: 0 -1rem;pointer-events: none;}table.xo:has(b) + footer button {visibility: unset;opacity: 1;translate: 0 0;pointer-events: unset;}body {--player-1-clr: light-dark(oklch(0.5 0.15 200 / 1),oklch(0.7 0.07 200 / 1));--player-2-clr: light-dark(oklch(0.75 0.2 20 / 1),oklch(0.7 0.15 20 / 1));--player-clr: var(--player-1-clr);--shadow-color: 220 40% 2%;--shadow-strength: 25%;--inner-shadow-highlight: inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0#0007;--shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) +3%)), 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));--back-out: linear(0 0%,0.1935 4.37%,0.3671 8.83%,0.521 13.38%,0.6557 18.04%,0.7716 22.82%,0.869 27.73%,0.9488 32.81%,1.0111 38.08%,1.0512 42.81%,1.0792 47.75%,1.0953 52.97%,1.1 58.55%,1.0956 63.36%,1.0838 68.73%,1.0119 90.98%,1.0029 95.69%,1 100%);}body:has(.player-2s-turn) {--player-clr: var(--player-2-clr);}table.xo {--player-1-clr: light-dark(oklch(0.75 0.075 200 / 1),oklch(0.7 0.07 200 / 1));--_block-size: 7rem;--_gap: 0.3rem;--_cursor-1: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="filter:invert(1);"><text x="0" y="20" font-family="sans-serif" font-size="2rem" fill="black" style="font-weight: bold; font-style: normal; line-height: .75em; width: .75rem; height: .75rem; display: block;">⨯</text></svg>');--_cursor-2: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="filter:invert(1);"><text x="0" y="20" font-family="sans-serif" font-size="1rem" fill="black" style="font-weight: bold; font-style: normal; line-height: .75em; width: .75rem; height: .75rem; display: block;">⭘</text></svg>');width: 100%;user-select: none;border-spacing: var(--_gap);grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);position: relative;margin-inline: auto;overflow: hidden;/* board bg *//* surfaces *//* edges *//* winner strokes */}table.xo:not(.player-2s-turn) {cursor: var(--_cursor-1) 4 16, auto;}table.xo.player-2s-turn {cursor: var(--_cursor-2) 4 16, auto;}table.xo:active td {transition: opacity 0.6s linear;}table.xo:not(:active):has(td:focus-visible) {cursor: default;}table.xo td:has(:is(b, i)) {cursor: default;}table.xo::before {content: '';background: #000;background: light-dark(#222, transparent);position: absolute;inset: 0;inset: var(--_gap) 0 0 0;pointer-events: none;z-index: -1;opacity: 1;}table.xo td {position: relative;background: #000;background: light-dark(#333, #000);padding: 1rem;border: solid 1px #88888899;border-radius: 2px;height: var(--_block-size);width: var(--_block-size);place-content: center;transition: border 0.6s var(--back-out);}-style {table.xo td {border-color: transparent;}}table.xo td:not(:has(:is(b, i))):hover {background-attachment: fixed;background-image: radial-gradient(circle at var(--x, 0) var(--y, 0),rgba(255, 255, 255, 0.075),rgba(255, 255, 255, 0.025) 7.5rem);}table.xo td::after {content: '';position: absolute;inset: -2px;border-radius: inherit;background-attachment: fixed;background-color: #000;background-image: radial-gradient(circle at var(--x, 0) var(--y, 0),rgba(255, 255, 255, 0.995),transparent 5rem);pointer-events: none;z-index: -1;}table.xo td:has(:is(b, i))::after {background-image: radial-gradient(circle at var(--x, 0) var(--y, 0),rgba(255, 255, 255, 0.95),transparent 3rem);}table.xo::after {background: linear-gradient(to var(--_to),transparent calc(var(--_distance) - 1px),var(--_color) calc(var(--_distance) - 1px),var(--_color) calc(var(--_distance) + 1px),transparent calc(var(--_distance) + 1px));display: block;pointer-events: none;display: none;content: '';position: absolute;inset: 0.5rem;inset: calc(var(--_gap) * 4);border-radius: 1rem;z-index: 1;opacity: 1;}table.xo td {outline-offset: -1.25rem;}table.xo td:focus-visible {outline: dashed 1px var(--player-1-clr);}table.xo.player-2s-turn td:focus-visible {outline: dashed 1px var(--player-2-clr);}table.xo td footer {position: absolute;bottom: var(--_gap);left: 50%;translate: -50% 0;display: flex;}button .new-game {display: none;}footer .win {display: none;line-height: 1;}*:has(> table.xo) .turn {--repeat: 1;}*:has(> table.xo) .turn > span {display: block;font-style: italic;}*:has(> table.xo) .turn > span > span {color: #888;}*:has(> table.xo) .turn .player-1 {color: var(--player-1-clr);display: block;line-height: 1;}*:has(> table.xo) .turn .player-2 {color: var(--player-2-clr);display: none;line-height: 1;}*:has(> table.xo.player-2s-turn) .turn {display: grid;place-content: center;}*:has(> table.xo.player-2s-turn) .turn .player-1 {display: none;}*:has(> table.xo.player-2s-turn) .turn .player-2 {display: block;}footer {--player-clr: var(--player-2-clr);display: grid;gap: 1rem;}.asterisk {color: var(--player-2-clr);}body:has(.player-2s-turn) :is(h1, footer) .asterisk {color: var(--player-1-clr);}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)) {pointer-events: none;margin-block-end: -0.125rem;/* horizontal 1 *//* horizontal 2 *//* horizontal 3 *//* vertical 1 *//* vertical 2 *//* vertical 3 *//* diagonal 1 *//* diagonal 2 */}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))+ footerbutton.new-game {display: unset;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))+ footerbutton.reset {display: none;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))+ footerbutton:has(.new-game) {filter: invert(1);letter-spacing: 1px;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))+ footerbutton:has(.new-game):hover {background-color: #aaa;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))~ footer.player-1 {display: block;color: var(--player-2-clr);}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)).player-2s-turn~ footerspan.player-1 {display: none;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)).player-2s-turn~ footerspan.player-2 {display: block;color: var(--player-1-clr);}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))~ footer.turn {display: none;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))~ .pyro {display: block;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))~ .ttt-winner {display: grid;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))::after {display: block !important;--_color: light-dark(oklch(0.5 0.15 200 / 1),oklch(0.7 0.07 200 / 0.75));}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))::before {inset: var(--_gap) 0;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) b):has(tr:nth-child(1) td:nth-child(2) b):has(tr:nth-child(1) td:nth-child(3) b)::after {--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);--_to: bottom;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(1) b):has(tr:nth-child(2) td:nth-child(2) b):has(tr:nth-child(2) td:nth-child(3) b)::after {--_distance: calc(50% - 1px);--_to: bottom;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) b):has(tr:nth-child(3) td:nth-child(2) b):has(tr:nth-child(3) td:nth-child(3) b)::after {--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);--_to: bottom;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) b):has(tr:nth-child(2) td:nth-child(1) b):has(tr:nth-child(3) td:nth-child(1) b)::after {--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);--_to: right;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b):has(tr:nth-child(2) td:nth-child(2) b):has(tr:nth-child(3) td:nth-child(2) b)::after {--_distance: 50%;--_to: right;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b):has(tr:nth-child(2) td:nth-child(3) b):has(tr:nth-child(3) td:nth-child(3) b)::after {--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);--_to: right;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) b):has(tr:nth-child(2) td:nth-child(2) b):has(tr:nth-child(3) td:nth-child(3) b)::after {--_distance: 50%;--_to: top right;}table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b):has(tr:nth-child(2) td:nth-child(2) b):has(tr:nth-child(3) td:nth-child(1) b)::after {--_distance: 50%;--_to: top left;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)) {pointer-events: none;margin-block-end: -0.125rem;/* horizontal 1 *//* horizontal 2 *//* horizontal 3 *//* vertical 1 *//* vertical 2 *//* vertical 3 *//* diagonal 1 *//* diagonal 2 */}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))+ footerbutton.new-game {display: unset;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))+ footerbutton.reset {display: none;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))+ footerbutton:has(.new-game) {filter: invert(1);letter-spacing: 1px;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))+ footerbutton:has(.new-game):hover {background-color: #aaa;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))~ footer.player-1 {display: block;color: var(--player-2-clr);}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)).player-2s-turn~ footerspan.player-1 {display: none;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)).player-2s-turn~ footerspan.player-2 {display: block;color: var(--player-1-clr);}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))~ footer.turn {display: none;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))~ .pyro {display: block;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))~ .ttt-winner {display: grid;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))::after {display: block !important;--_color: light-dark(oklch(0.5 0.15 200 / 1),oklch(0.7 0.07 200 / 0.75));}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))::before {inset: var(--_gap) 0;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) b):has(tr:nth-child(1) td:nth-child(2) b):has(tr:nth-child(1) td:nth-child(3) b)::after {--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);--_to: bottom;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(1) b):has(tr:nth-child(2) td:nth-child(2) b):has(tr:nth-child(2) td:nth-child(3) b)::after {--_distance: calc(50% - 1px);--_to: bottom;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) b):has(tr:nth-child(3) td:nth-child(2) b):has(tr:nth-child(3) td:nth-child(3) b)::after {--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);--_to: bottom;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) b):has(tr:nth-child(2) td:nth-child(1) b):has(tr:nth-child(3) td:nth-child(1) b)::after {--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);--_to: right;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) b):has(tr:nth-child(2) td:nth-child(2) b):has(tr:nth-child(3) td:nth-child(2) b)::after {--_distance: 50%;--_to: right;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b):has(tr:nth-child(2) td:nth-child(3) b):has(tr:nth-child(3) td:nth-child(3) b)::after {--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);--_to: right;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) b):has(tr:nth-child(2) td:nth-child(2) b):has(tr:nth-child(3) td:nth-child(3) b)::after {--_distance: 50%;--_to: top right;}table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) b):has(tr:nth-child(2) td:nth-child(2) b):has(tr:nth-child(3) td:nth-child(1) b)::after {--_distance: 50%;--_to: top left;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)) {pointer-events: none;margin-block-end: -0.125rem;/* horizontal 1 *//* horizontal 2 *//* horizontal 3 *//* vertical 1 *//* vertical 2 *//* vertical 3 *//* diagonal 1 *//* diagonal 2 */}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))+ footerbutton.new-game {display: unset;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))+ footerbutton.reset {display: none;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))+ footerbutton:has(.new-game) {filter: invert(1);letter-spacing: 1px;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))+ footerbutton:has(.new-game):hover {background-color: #aaa;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))~ footer.player-1 {display: block;color: var(--player-2-clr);}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn~ footerspan.player-1 {display: none;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn~ footerspan.player-2 {display: block;color: var(--player-1-clr);}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))~ footer.turn {display: none;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))~ .pyro {display: block;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))~ .ttt-winner {display: grid;}table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has():has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) i):has(tr:nth-child(2) td:nth-child(3) i):has(tr:nth-child(3) td:nth-child(3) i)::after {--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);--_to: right;}table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) i):has(tr:nth-child(2) td:nth-child(2) i):has(tr:nth-child(3) td:nth-child(3) i)::after {--_distance: 50%;--_to: top right;}table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) i):has(tr:nth-child(2) td:nth-child(2) i):has(tr:nth-child(3) td:nth-child(1) i)::after {--_distance: 50%;--_to: top left;}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)) {pointer-events: none;margin-block-end: -0.125rem;/* horizontal 1 *//* horizontal 2 *//* horizontal 3 *//* vertical 1 *//* vertical 2 *//* vertical 3 *//* diagonal 1 *//* diagonal 2 */}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))+ footerbutton.new-game {display: unset;}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))+ footerbutton.reset {display: none;}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))+ footerbutton:has(.new-game) {filter: invert(1);letter-spacing: 1px;}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))+ footerbutton:has(.new-game):hover {background-color: #aaa;}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))~ footer.player-1 {display: block;color: var(--player-2-clr);}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)).player-2s-turn~ footerspan.player-1 {display: none;}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)).player-2s-turn~ footerspan.player-2 {display: block;color: var(--player-1-clr);}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))~ footer.turn {display: none;}table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))~ .pyro {display: block;table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))+ footerbutton.reset {display: none;}table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))+ footerbutton:has(.new-game) {filter: invert(1);letter-spacing: 1px;ade-out))~ footer.turn {display: none;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))~ .pyro {display: block;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))~ .ttt-winner {display: grid;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::after {display: block !important;--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::before {inset: var(--_gap) 0;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) i):has(tr:nth-child(1) td:nth-child(2) i):has(tr:nth-child(1) td:nth-child(3) i)::after {--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);--_to: bottom;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(1) i):has(tr:nth-child(2) td:nth-child(2) i):has(tr:nth-child(2) td:nth-child(3) i)::after {--_distance: calc(50% - 1px);--_to: bottom;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i):has(tr:nth-child(3) td:nth-child(2) i):has(tr:nth-child(3) td:nth-child(3) i)::after {--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);--_to: bottom;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) i):has(tr:nth-child(2) td:nth-child(1) i):has(tr:nth-child(3) td:nth-child(1) i)::after {--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);--_to: right;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(2) i):has(tr:nth-child(2) td:nth-child(2) i):has(tr:nth-child(3) td:nth-child(2) i)::after {--_distance: 50%;--_to: right;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) i):has(tr:nth-child(2) td:nth-child(3) i):has(tr:nth-child(3) td:nth-child(3) i)::after {--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);--_to: right;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(1) i):has(tr:nth-child(2) td:nth-child(2) i):has(tr:nth-child(3) td:nth-child(3) i)::after {--_distance: 50%;--_to: top right;}table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(tr:nth-child(2) td:nth-child(2) i:not(.fade-out)):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(tr:nth-child(1) td:nth-child(3) i):has(tr:nth-child(2) td:nth-child(2) i):has(tr:nth-child(3) td:nth-child(1) i)::after {--_distance: 50%;--_to: top left;}.xo .remaining-life {position: absolute;top: 0.5ch;left: 0.75ch;z-index: 1;}.remaining-life {white-space: nowrap;display: flex;gap: 0.5ch;align-items: center;justify-content: center;background: #88888830;background: light-dark(#88888840, #88888825);border: transparent;border-radius: 5px;padding-inline: 0.7ch;padding-block: 0.25ch;line-height: 1rem;}.circle {width: 0.35rem;height: 0.35rem;border-radius: 50%;margin: 1px;/* Space between circles */display: inline-block;/* Aligns circles next to each other */}.outlined {background-color: light-dark(#888888a0, #444444a0);/* No fill */border: 1px solid #4caf50;/* Outline color */border-color: #88888880;}.filled {background-color: #4caf50a0;background-color: light-dark(#4caf50aa, #4caf5080);/* Fill color */}.rubberband {--duration: 3s;--repeat: 3;animation: rubberband var(--duration) ease-in-out var(--repeat);/* animation-delay: 3s; */}rubberband {0% {transform: scaleX(1);}19.8% {transform: scale3d(1.125, 0.875, 1);}26.4% {transform: scale3d(0.875, 1.125, 1);}33% {transform: scale3d(1.075, 0.925, 1);}42.9% {transform: scale3d(0.975, 1.025, 1);}49.5% {transform: scale3d(1.025, 0.975, 1);}66% {transform: scaleX(1);}}pyro {body {margin: 0;padding: 0;}.pyro > .before,.pyro > .after {position: absolute;width: 5px;height: 5px;border-radius: 50%;box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,0 0 #fff, 0 0 #fff, 0 0 #fff;-moz-animation: 1s bang ease-out infinite backwards, 1s gravityease-in infinite backwards, 5s position linear infinite backwards;-webkit-animation: 1s bang ease-out infinite backwards, 1s gravityease-in infinite backwards, 5s position linear infinite backwards;-o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-ininfinite backwards, 5s position linear infinite backwards;-ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-ininfinite backwards, 5s position linear infinite backwards;animation: 1s bang ease-out infinite backwards, 1s gravity ease-ininfinite backwards, 5s position linear infinite backwards;}.pyro > .after {-moz-animation-delay: 1.25s, 1.25s, 1.25s;-webkit-animation-delay: 1.25s, 1.25s, 1.25s;-o-animation-delay: 1.25s, 1.25s, 1.25s;-ms-animation-delay: 1.25s, 1.25s, 1.25s;animation-delay: 1.25s, 1.25s, 1.25s;-moz-animation-duration: 1.25s, 1.25s, 6.25s;-webkit-animation-duration: 1.25s, 1.25s, 6.25s;-o-animation-duration: 1.25s, 1.25s, 6.25s;-ms-animation-duration: 1.25s, 1.25s, 6.25s;animation-duration: 1.25s, 1.25s, 6.25s;}@-webkit-keyframes bang {to {box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667pxyellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px#c4ff00, 146px -139.6666666667px #4000ff;}}@-moz-keyframes bang {to {box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667pxyellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px#c4ff00, 146px -139.6666666667px #4000ff;}}@-o-keyframes bang {to {box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667pxyellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px#c4ff00, 146px -139.6666666667px #4000ff;}}@-ms-keyframes bang {to {box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667pxyellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px#c4ff00, 146px -139.6666666667px #4000ff;}}bang {to {box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667pxyellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px#c4ff00, 146px -139.6666666667px #4000ff;}}@-webkit-keyframes gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0;}}@-moz-keyframes gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0;}}@-o-keyframes gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0;}}@-ms-keyframes gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0;}}gravity {to {transform: translateY(200px);-moz-transform: translateY(200px);-webkit-transform: translateY(200px);-o-transform: translateY(200px);-ms-transform: translateY(200px);opacity: 0;}}@-webkit-keyframes position {0%,19.9% {margin-top: 10%;margin-left: 40%;}20%,39.9% {margin-top: 40%;margin-left: 30%;}40%,59.9% {margin-top: 20%;margin-left: 70%;}60%,79.9% {margin-top: 30%;margin-left: 20%;}80%,99.9% {margin-top: 30%;margin-left: 80%;}}@-moz-keyframes position {0%,19.9% {margin-top: 10%;margin-left: 40%;}20%,39.9% {margin-top: 40%;margin-left: 30%;}40%,59.9% {margin-top: 20%;margin-left: 70%;}60%,79.9% {margin-top: 30%;margin-left: 20%;}80%,99.9% {margin-top: 30%;margin-left: 80%;}}@-o-keyframes position {0%,19.9% {margin-top: 10%;margin-left: 40%;}20%,39.9% {margin-top: 40%;margin-left: 30%;}40%,59.9% {margin-top: 20%;margin-left: 70%;}60%,79.9% {margin-top: 30%;margin-left: 20%;}80%,99.9% {margin-top: 30%;margin-left: 80%;}}@-ms-keyframes position {0%,19.9% {margin-top: 10%;margin-left: 40%;}20%,39.9% {margin-top: 40%;margin-left: 30%;}40%,59.9% {margin-top: 20%;margin-left: 70%;}60%,79.9% {margin-top: 30%;margin-left: 20%;}80%,99.9% {margin-top: 30%;margin-left: 80%;}}position {0%,19.9% {margin-top: 10%;margin-left: 40%;}20%,39.9% {margin-top: 40%;margin-left: 30%;}40%,59.9% {margin-top: 20%;margin-left: 70%;}60%,79.9% {margin-top: 30%;margin-left: 20%;}80%,99.9% {margin-top: 30%;margin-left: 80%;}}}.pyro {z-index: 3;inset: 0;width: 100vw;margin: auto;position: fixed;display: none;pointer-events: none;}.ttt-winner {--_hue-rotation: hue-rotate(345deg);position: absolute;inset: 0;top: 15rem;margin: auto;margin-top: 0;justify-self: center;aspect-ratio: 1.2;display: grid;/**/display: none;/**/overflow: hidden;box-shadow: var(--shadow-6);z-index: 1;cursor: pointer;max-width: min(12rem, 100%);height: auto;object-fit: cover;/** filter: hue-rotate(200deg);filter: hue-rotate(345deg);filter: var(--_hue-rotation); /**/transition: opacity 0.3s var(--back-out), filter 0.3s var(--back-out);}-style {.ttt-winner {opacity: 0;}}.ttt-winner:hover,.ttt-winner:focus-visible {/**/filter: grayscale(1);/**/opacity: 0.4;opacity: 0.75;}.ttt-winner:focus-visible {outline: dashed 2px currentcolor;outline-offset: -4px;}.ttt-winner.not-shown {opacity: 0;pointer-events: none;}/* Theme Picker *//**/*:has(.theme-picker) {position: static;}/**//**/
√完整版代码
1.关注公众号
2.后台留言“井子游戏”获取完整代码