纯css+div实现的一个四子棋格子小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：纯css+div实现的一个四子棋格子小游戏代码，鼠标移动到不同的位置按左键放下方块，只要同一个颜色的四个方块连成一线，这个颜色的方块就赢了。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css">
  
<style>



* {
  box-sizing: border-box;
}

.land-of-three * {
  transform-style: preserve-3d;
}

[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:root {
  --cell-size: 6vmin;
  --primary-hue: 280;
  --secondary-hue: 320;
  --base-drop: 0.05;
  --red: hsl(18, 100%, 50%);
  --yellow: hsl(44, 83%, 53%);
  --green: hsl(130, 52%, 46%);
  --blue: hsl(215, 100%, 53%);
  --screen-hide: 1;
  --intro-screen-hide: 0;
  --screen-delay: 0;
  --show-results: 0;
  --show-win: 0;
  --show-draw: 0;
  --show-primary-win: 0;
  --show-secondary-win: 0;
  --column-padding: 0.75;
  --gap-coefficient: 0.1;
  --primary: var(--red);
  --secondary: var(--yellow);
  --rows: 6;
  --column-buffer: calc(var(--cell-size) * 2);
  --column-padding: calc(var(--cell-size) * var(--column-padding, 0.75));
  --column-size: calc(var(--rows, 6) * var(--cell-size) + var(--column-padding, 0.75));
  /*--column-height: calc(var(--cell-size) * (-1 - var(--column-padding)));*/
  --rotation: -24deg;
  --bg: var(--surface-1);
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

h1 {
  color: var(--gray-0);
}

svg {
  fill: currentColor;
}

form {
  display: grid;
  place-items: center;
  position: fixed;
}

.board {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
  grid-auto-flow: column;
  grid-gap: 0 0;
  position: relative;
}

.board__column {
  aspect-ratio: 1 / var(--rows);
  position: relative;
}

.board__controls {
  position: absolute;
  bottom: 0;
  left: 0;
}

form > [type="reset"] {
  height: 50px;
  aspect-ratio: 1;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 6;
  transform: translateZ(300vmin);
}

.board__move:hover {
  --show-ghost: 1;
}

.board__move[for*="s"] {
  --disc-hue: var(--secondary-hue);
}
.board__move[for*="p"] {
  --disc-hue: var(--primary-hue);
}

.board__cell {
  aspect-ratio: 1;
}

.board__labels {
  --depth: var(--cell-size);
  color: transparent;
  position: absolute;
  height: calc((var(--rows, 6) * var(--cell-size)) + var(--column-buffer));
  left: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 2;
  display: block;
  width: 100%;
  z-index: var(--row);
}

.move-controls {
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.board__labels .cuboid__side {
  overflow: hidden;
}

.board__move {
  height: 100%;
  width: var(--cell-size);
  position: absolute;
}

.board__disc--primary {
  --disc-color: var(--primary);
}

.board__disc--secondary {
  --disc-color: var(--secondary);
}

.disc {
  --depth: calc(var(--cell-size) * 0.5);
  color: var(--disc-color);
  position: absolute;
  inset: 0;
  display: none;
  -webkit-animation: drop calc((var(--base-drop) * var(--row)) * 1s);
          animation: drop calc((var(--base-drop) * var(--row)) * 1s);
}

.board__column:has([for*="s"]:hover) .disc--ghost {
  display: block;
  --show-ghost: 1;
  --disc-color: var(--secondary);
}

.board__column:has([for*="p"]:hover) .disc--ghost {
  display: block;
  --show-ghost: 1;
  --disc-color: var(--primary);
}

.disc--ghost {
  width: 100%;
  aspect-ratio: 1;
  color: var(--disc-color);
  position: absolute;
  top: calc(var(--column-buffer) * -1);
  left: 0;
  opacity: var(--show-ghost, 1);
}

.win-disc {
  height: var(--cell-size);
  aspect-ratio: 1;
  background: var(--winner);
}

.disc__piece {
  height: 80%;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes drop {
  from {
    transform: translateY(calc(
      (var(--row) * (var(--cell-size) * -1)) - (var(--column-buffer) - var(--cell-size))
    ));
  }
}

@keyframes drop {
  from {
    transform: translateY(calc(
      (var(--row) * (var(--cell-size) * -1)) - (var(--column-buffer) - var(--cell-size))
    ));
  }
}

/* Aesthetic stuff */
.board__aesthetics {
  position: absolute;
  inset: calc(var(--cell-size) * -0.5);
}

.board__cage .cuboid__side:nth-of-type(1),
.board__cage .cuboid__side:nth-of-type(3),
.board__cage .cuboid__side:nth-of-type(5),
.board__cage .cuboid__side:nth-of-type(6) {
  border: calc(var(--cell-size) * 0.5) solid var(--blue);
  background: repeating-linear-gradient(90deg, var(--blue) 0 calc(var(--cell-size) * 0.1), transparent calc(var(--cell-size) * 0.1) calc(var(--cell-size) * 0.9), var(--blue) calc(var(--cell-size) * 0.9) calc(var(--cell-size) * 1));
}
.board__cage .cuboid__side:nth-of-type(1),
.board__cage .cuboid__side:nth-of-type(3) {
  border-top: 0;
  border-bottom: 0;
}
.board__cage .cuboid__side:nth-of-type(5),
.board__cage .cuboid__side:nth-of-type(6) {
  background: repeating-linear-gradient(90deg, var(--blue) 0 calc(var(--cell-size) * 0.1), transparent calc(var(--cell-size) * 0.1) calc(var(--cell-size) * 0.9), var(--blue) calc(var(--cell-size) * 0.9) calc(var(--cell-size) * 1)),
    repeating-linear-gradient(0deg, var(--blue) 0 calc(var(--cell-size) * 0.1), transparent calc(var(--cell-size) * 0.1) calc(var(--cell-size) * 0.9), var(--blue) calc(var(--cell-size) * 0.9) calc(var(--cell-size) * 1));
}

.board-container {
  transform: translate3d(0, 0, 100vmin) rotateX(var(--rotation, -24deg)) rotateY(var(--rotation, -24deg));
}

.board__cage {
  --depth: calc(var(--cell-size) * 0.55);
  color: var(--blue);
  width: 100%;
  height: 100%;
}

.board__leg {
  position: absolute;
  bottom: -20%;
  width: calc(var(--cell-size) * 0.75);
  height: 50%;
}

.leg__upright {
  --depth: var(--cell-size);
  height: 100%;
  width: 100%;
  color: var(--blue);
}

.leg__foot {
  --depth: calc(var(--cell-size) * 4);
  color: var(--blue);
}

.board__leg--left {
  right: 95%;
}

.board__leg--right {
  left: 95%;
}

.leg {
  height: 100%;
  width: 100%;
}

.leg__foot {
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  bottom: 0;
  background: hsl(280 80% 50% / 0.5);
}

/* Generic reusable game UI stuff */

/* Cuboidy stuff */

.cuboid {
  height: 100%;
  width: 100%;
  position: relative;
}
.cuboid__side {
  background: currentColor;
  position: absolute;
  height: 100%;
  width: 100%;
  filter: brightness(var(--brightness, 1));
}
/* T, R, B, L, F, B */
.cuboid__side:nth-of-type(1) {
  --brightness: 0.8;
  top: 0;
  height: var(--depth, 50vmin);
  transform: translateY(-50%) rotateX(-90deg);
}
.cuboid__side:nth-of-type(2) {
  --brightness: 0.6;
  top: 50%;
  right: 0;
  width: var(--depth, 50vmin);
  transform: translate(50%, -50%) rotateY(-90deg);
}

.cuboid__side:nth-of-type(3) {
  --brightness: 1;
  transform: translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0deg);
}

.board__cage .cuboid__side:nth-of-type(3) {
  --brightness: 1.3;
  bottom: 0;
  height: var(--depth, 50vmin);
  transform: translateY(50%) rotateX(90deg);
}
.board__cage .cuboid__side:nth-of-type(4) {
  --brightness: 0.6;
  top: 50%;
  width: var(--depth, 50vmin);
  transform: translate(-50%, -50%) rotateY(90deg);
}
.board__cage .cuboid__side:nth-of-type(5) {
  --brightness: 0.75;
  transform: translateZ(calc(var(--depth, 50vmin) / -2)) rotateY(180deg);
}
.board__cage .cuboid__side:nth-of-type(6) {
  --brightness: 1;
  transform: translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0deg);
}

/* Override for  */
.disc__piece .cuboid__side:nth-of-type(3) {
  --brightness: 1;
  height: 100%;
  width: 100%;
  transform: translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0deg);
}

/* Dialog and screen */

:root:has(#dismiss:checked) .screen--intro {
  transform: translate3d(-50%, -50%, 200vmin) translateY(100vh) scale(0);
  z-index: -1;
}

.screen {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  transform: translate3d(-50%, -50%, 200vmin);
  transition: transform 0.2s;
}

.dialog {
  min-width: calc(var(--columns) * var(--cell-size));
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1rem, 2vmin, 2rem);
  -webkit-backdrop-filter: blur(10px) saturate(0.75);
          backdrop-filter: blur(10px) saturate(0.75);
  color: var(--gray-0);
  background: hsl(210 29% 20% / 0.8);
  position: absolute;
  box-shadow: var(--shadow-6);
  text-align: center;
  border-style: solid;
  border-top-color: var(--red);
  border-right-color: var(--green);
  border-bottom-color: var(--yellow);
  border-left-color: var(--blue);
  border-width: var(--size-2);
  display: grid;
}

.dialog * + * {
  margin-top: 2rem;
}

.dialog__content {
  padding: var(--size-4);
  display: grid;
  place-items: center;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.dialog__content {
  opacity: var(--opacity, 1);
  z-index: var(--z, 2);
}

.dialog__content--intro {
  --opacity: calc(1 - var(--show-win, 0));
  --z: calc(1 - (2 * var(--show-win, 0)));
}

.dialog__content--win {
  --z: calc(-1 + (var(--show-win) * 2));
  --opacity: var(--show-win);
}

.dialog__content--draw {
  --z: calc(-1 + (var(--show-draw) * 2));
  --opacity: var(--show-draw);
}

/* Transition buttons */
.faux-button {
  --bg: var(--gray-9);
  box-sizing: border-box;
  font-size: var(--font-size-fluid-1);
  padding: var(--size-4) var(--size-6);
  background: var(--bg);
  color: var(--gray-0);
  font-weight: bold;
  font-family: 'Google Sans', sans-serif;
  border: var(--size-2) solid var(--gray-0);
  display: inline-block;
  transform: translateY(calc(var(--y, 0) * 1%)) scale(var(--s));
  transition: transform 0.1s, background 0.1s, opacity 0.1s;
}

.faux-button:hover {
  --bg: black;
  --y: -5;
  --s: 1.1;
}

.faux-button:active {
  --bg: black;
  --y: 5;
  --s: 0.9;
}

/* Reset button */
.game-reset {
  background: var(--bg);
  color: var(--gray-0);
  height: 48px;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: 0.25;
}

.game-reset:hover {
  opacity: 1;
}

.game-reset svg {
  width: 65%;
}



/* Logic Demons live down here.... */

/* The "Magic" bullet for turn switching */
/* Creates a width to reveal the other label */
.board__labels .move-controls:after {
  content: counter(turn, lower-roman);
  font-size: 1px;
  letter-spacing: var(--cell-size);
  color: transparent;
}

.board__move[for*="s"] {
  left: 0;
}

.board__move[for*="p"] {
  right: 0;
}

body {
  counter-reset: turn 1;
}

[id*="p"]:checked {
  counter-increment: turn 2;
}

[id*="s"]:checked {
  counter-increment: turn -2;
}

.board:has(:is([id=s-1], [id=p-1]):checked) .board__labels[data-for=move-1],
.board:has([id=s-2]:checked, [id=p-2]:checked) .board__labels[data-for=move-2],
.board:has([id=s-3]:checked, [id=p-3]:checked) .board__labels[data-for=move-3],
.board:has([id=s-4]:checked, [id=p-4]:checked) .board__labels[data-for=move-4],
.board:has([id=s-5]:checked, [id=p-5]:checked) .board__labels[data-for=move-5],
.board:has([id=s-6]:checked, [id=p-6]:checked) .board__labels[data-for=move-6],
.board:has([id=s-7]:checked, [id=p-7]:checked) .board__labels[data-for=move-7],
.board:has([id=s-8]:checked, [id=p-8]:checked) .board__labels[data-for=move-8],
.board:has([id=s-9]:checked, [id=p-9]:checked) .board__labels[data-for=move-9],
.board:has([id=s-10]:checked, [id=p-10]:checked) .board__labels[data-for=move-10],
.board:has([id=s-11]:checked, [id=p-11]:checked) .board__labels[data-for=move-11],
.board:has([id=s-12]:checked, [id=p-12]:checked) .board__labels[data-for=move-12],
.board:has([id=s-13]:checked, [id=p-13]:checked) .board__labels[data-for=move-13],
.board:has([id=s-14]:checked, [id=p-14]:checked) .board__labels[data-for=move-14],
.board:has([id=s-15]:checked, [id=p-15]:checked) .board__labels[data-for=move-15],
.board:has([id=s-16]:checked, [id=p-16]:checked) .board__labels[data-for=move-16],
.board:has([id=s-17]:checked, [id=p-17]:checked) .board__labels[data-for=move-17],
.board:has([id=s-18]:checked, [id=p-18]:checked) .board__labels[data-for=move-18],
.board:has([id=s-19]:checked, [id=p-19]:checked) .board__labels[data-for=move-19],
.board:has([id=s-20]:checked, [id=p-20]:checked) .board__labels[data-for=move-20],
.board:has([id=s-21]:checked, [id=p-21]:checked) .board__labels[data-for=move-21],
.board:has([id=s-22]:checked, [id=p-22]:checked) .board__labels[data-for=move-22],
.board:has([id=s-23]:checked, [id=p-23]:checked) .board__labels[data-for=move-23],
.board:has([id=s-24]:checked, [id=p-24]:checked) .board__labels[data-for=move-24],
.board:has([id=s-25]:checked, [id=p-25]:checked) .board__labels[data-for=move-25],
.board:has([id=s-26]:checked, [id=p-26]:checked) .board__labels[data-for=move-26],
.board:has([id=s-27]:checked, [id=p-27]:checked) .board__labels[data-for=move-27],
.board:has([id=s-28]:checked, [id=p-28]:checked) .board__labels[data-for=move-28],
.board:has([id=s-29]:checked, [id=p-29]:checked) .board__labels[data-for=move-29],
.board:has([id=s-30]:checked, [id=p-30]:checked) .board__labels[data-for=move-30],
.board:has([id=s-31]:checked, [id=p-31]:checked) .board__labels[data-for=move-31],
.board:has([id=s-32]:checked, [id=p-32]:checked) .board__labels[data-for=move-32],
.board:has([id=s-33]:checked, [id=p-33]:checked) .board__labels[data-for=move-33],
.board:has([id=s-34]:checked, [id=p-34]:checked) .board__labels[data-for=move-34],
.board:has([id=s-35]:checked, [id=p-35]:checked) .board__labels[data-for=move-35],
.board:has([id=s-36]:checked, [id=p-36]:checked) .board__labels[data-for=move-36],
.board:has([id=s-37]:checked, [id=p-37]:checked) .board__labels[data-for=move-37],
.board:has([id=s-38]:checked, [id=p-38]:checked) .board__labels[data-for=move-38],
.board:has([id=s-39]:checked, [id=p-39]:checked) .board__labels[data-for=move-39],
.board:has([id=s-40]:checked, [id=p-40]:checked) .board__labels[data-for=move-40],
.board:has([id=s-41]:checked, [id=p-41]:checked) .board__labels[data-for=move-41],
.board:has([id=s-42]:checked, [id=p-42]:checked) .board__labels[data-for=move-42] {
  display: none;
}

/* How to work out the winning combinations. You can't nest :has() */
/* But you could use data-attributes or checks for it */

/* If a column has 4 cells in a row somehow it's a vertical win */
.board__column:has([data-row=p-1]:checked):has([data-row=p-2]:checked):has([data-row=p-3]:checked):has([data-row=p-4]:checked) ~ .win,
.board__column:has([data-row=p-2]:checked):has([data-row=p-3]:checked):has([data-row=p-4]:checked):has([data-row=p-5]:checked) ~ .win,
.board__column:has([data-row=p-3]:checked):has([data-row=p-4]:checked):has([data-row=p-5]:checked):has([data-row=p-6]:checked) ~ .win {
  display: block;
  --winner: var(--primary);
  --show-win: 1;
}
.board__column:has([data-row=s-1]:checked):has([data-row=s-2]:checked):has([data-row=s-3]:checked):has([data-row=s-4]:checked) ~ .win,
.board__column:has([data-row=s-2]:checked):has([data-row=s-3]:checked):has([data-row=s-4]:checked):has([data-row=s-5]:checked) ~ .win,
.board__column:has([data-row=s-3]:checked):has([data-row=s-4]:checked):has([data-row=s-5]:checked):has([data-row=s-6]:checked) ~ .win {
  display: block;
  --winner: var(--secondary);
  --show-win: 1;
}

/* If you have 4 columns each with the same row checked, you have a match */
.board__column:has([data-row=s-1]:checked) +
.board__column:has([data-row=s-1]:checked) +
.board__column:has([data-row=s-1]:checked) +
.board__column:has([data-row=s-1]:checked) ~ .win,
.board__column:has([data-row=s-2]:checked) +
.board__column:has([data-row=s-2]:checked) +
.board__column:has([data-row=s-2]:checked) +
.board__column:has([data-row=s-2]:checked) ~ .win,
.board__column:has([data-row=s-3]:checked) +
.board__column:has([data-row=s-3]:checked) +
.board__column:has([data-row=s-3]:checked) +
.board__column:has([data-row=s-3]:checked) ~ .win,
.board__column:has([data-row=s-4]:checked) +
.board__column:has([data-row=s-4]:checked) +
.board__column:has([data-row=s-4]:checked) +
.board__column:has([data-row=s-4]:checked) ~ .win,
.board__column:has([data-row=s-5]:checked) +
.board__column:has([data-row=s-5]:checked) +
.board__column:has([data-row=s-5]:checked) +
.board__column:has([data-row=s-5]:checked) ~ .win,
.board__column:has([data-row=s-6]:checked) +
.board__column:has([data-row=s-6]:checked) +
.board__column:has([data-row=s-6]:checked) +
.board__column:has([data-row=s-6]:checked) ~ .win {
  display: block;
  --winner: var(--secondary);
  --show-win: 1;
}

.board__column:has([data-row=p-1]:checked) +
.board__column:has([data-row=p-1]:checked) +
.board__column:has([data-row=p-1]:checked) +
.board__column:has([data-row=p-1]:checked) ~ .win,
.board__column:has([data-row=p-2]:checked) +
.board__column:has([data-row=p-2]:checked) +
.board__column:has([data-row=p-2]:checked) +
.board__column:has([data-row=p-2]:checked) ~ .win,
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-3]:checked) ~ .win,
.board__column:has([data-row=p-4]:checked) +
.board__column:has([data-row=p-4]:checked) +
.board__column:has([data-row=p-4]:checked) +
.board__column:has([data-row=p-4]:checked) ~ .win,
.board__column:has([data-row=p-5]:checked) +
.board__column:has([data-row=p-5]:checked) +
.board__column:has([data-row=p-5]:checked) +
.board__column:has([data-row=p-5]:checked) ~ .win,
.board__column:has([data-row=p-6]:checked) +
.board__column:has([data-row=p-6]:checked) +
.board__column:has([data-row=p-6]:checked) +
.board__column:has([data-row=p-6]:checked) ~ .win {
  display: block;
  --winner: var(--primary);
  --show-win: 1;
}

/* If you have these diagonal combinations, you also have a win */
.board__column:has([data-row=p-6]:checked) +
.board__column:has([data-row=p-5]:checked) +
.board__column:has([data-row=p-4]:checked) +
.board__column:has([data-row=p-3]:checked) ~ .win,
.board__column:has([data-row=p-5]:checked) +
.board__column:has([data-row=p-4]:checked) +
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-2]:checked) ~ .win,
.board__column:has([data-row=p-4]:checked) +
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-2]:checked) +
.board__column:has([data-row=p-1]:checked) ~ .win,
.board__column:has([data-row=p-1]:checked) +
.board__column:has([data-row=p-2]:checked) +
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-4]:checked) ~ .win,
.board__column:has([data-row=p-2]:checked) +
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-4]:checked) +
.board__column:has([data-row=p-5]:checked) ~ .win,
.board__column:has([data-row=p-3]:checked) +
.board__column:has([data-row=p-4]:checked) +
.board__column:has([data-row=p-5]:checked) +
.board__column:has([data-row=p-6]:checked) ~ .win {
  display: block;
  --winner: var(--primary);
  --show-win: 1;
}
.board__column:has([data-row=s-6]:checked) +
.board__column:has([data-row=s-5]:checked) +
.board__column:has([data-row=s-4]:checked) +
.board__column:has([data-row=s-3]:checked) ~ .win,
.board__column:has([data-row=s-5]:checked) +
.board__column:has([data-row=s-4]:checked) +
.board__column:has([data-row=s-3]:checked) +
.board__column:has([data-row=s-2]:checked) ~ .win,
.board__column:has([data-row=s-4]:checked) +
.board__column:has([data-row=s-3]:checked) +
.board__column:has([data-row=s-2]:checked) +
.board__column:has([data-row=s-1]:checked) ~ .win,
.board__column:has([data-row=s-1]:checked) +
.board__column:has([data-row=s-2]:checked) +
.board__column:has([data-row=s-3]:checked) +
.board__column:has([data-row=s-4]:checked) ~ .win,
.board__column:has([data-row=s-2]:checked) +
.board__column:has([data-row=s-3]:checked) +
.board__column:has([data-row=s-4]:checked) +
.board__column:has([data-row=s-5]:checked) ~ .win,
.board__column:has([data-row=s-3]:checked) +
.board__column:has([data-row=s-4]:checked) +
.board__column:has([data-row=s-5]:checked) +
.board__column:has([data-row=s-6]:checked) ~ .win {
  display: block;
  --winner: var(--secondary);
  --show-win: 1;
}

.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked) +
.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked) +
.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked) +
.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked) +
.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked) +
.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked) +
.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked) + .win {
  display: block;
  --show-draw: 1;
}

/* End logic. Soooo much better than SF */
.win {
  display: none;
  width: 300%;
  height: 300%;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-animation: result 0.2s 0.5s both;
          animation: result 0.2s 0.5s both;
  transform: translate3d(-50%, -50%, 0)
    rotateY(calc(var(--rotation) * -1))
    rotateX(calc(var(--rotation) * -1))
    translateZ(100vmin)
    translateY(0);
}

@-webkit-keyframes result {
  0% {
    transform: translate3d(-50%, -50%, 0)
    rotateY(calc(var(--rotation) * -1))
    rotateX(calc(var(--rotation) * -1))
    translateZ(100vmin)
    translateY(100vh);
  }
}

@keyframes result {
  0% {
    transform: translate3d(-50%, -50%, 0)
    rotateY(calc(var(--rotation) * -1))
    rotateX(calc(var(--rotation) * -1))
    translateZ(100vmin)
    translateY(100vh);
  }
}


/* Let's try something new */

[id*=p]:checked ~ .board__disc {
  display: block;
  --disc-color: var(--primary);
}
[id*=s]:checked ~ .board__disc {
  display: block;
  --disc-color: var(--secondary);
}

.controls {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
  grid-auto-flow: column;
  grid-gap: 0 0;
  position: relative;
}
</style>



</head>

<bod>
  <form>
      <div class="land-of-three">
        <button class="game-reset faux-button" type="reset" title="Reset">
          <svg class="reset" viewBox="0 0 24 24">
            <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"></path>
          </svg>
        </button>
        <div class="screen screen--intro">
          <div class="dialog">
            <div class="dialog__content dialog__content--intro">
              <h1>:has Connect 4?</h1>
              <p>You know the drill!</p>
              <label class="faux-button" for="dismiss">Start Game</label>
            </div>
          </div>
        </div>
        <div class="board-container">
          <div class="board" style="--rows: 6; --columns: 7; --disc-count: 42;">
            <div class="board__aesthetics">
              <div class="board__cage">
                <div class="cuboid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="board__leg board__leg--left">
                <div class="leg">
                  <div class="leg__upright">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                  <div class="leg__foot">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__leg board__leg--right">
                <div class="leg">
                  <div class="leg__upright">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                  <div class="leg__foot">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="board__column"><!-- I tells you the row or the distance being travelled -->
              <div class="board__cell move-6" style="--row: 1;">
                <input type="checkbox" id="s-6" data-row="s-1" data-column="s-1"/>
                <input type="checkbox" id="p-6" data-row="p-1" data-column="p-1"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-5" style="--row: 2;">
                <input type="checkbox" id="s-5" data-row="s-2" data-column="s-1"/>
                <input type="checkbox" id="p-5" data-row="p-2" data-column="p-1"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-4" style="--row: 3;">
                <input type="checkbox" id="s-4" data-row="s-3" data-column="s-1"/>
                <input type="checkbox" id="p-4" data-row="p-3" data-column="p-1"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-3" style="--row: 4;">
                <input type="checkbox" id="s-3" data-row="s-4" data-column="s-1"/>
                <input type="checkbox" id="p-3" data-row="p-4" data-column="p-1"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-2" style="--row: 5;">
                <input type="checkbox" id="s-2" data-row="s-5" data-column="s-1"/>
                <input type="checkbox" id="p-2" data-row="p-5" data-column="p-1"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-1" style="--row: 6;">
                <input type="checkbox" id="s-1" data-row="s-6" data-column="s-1"/>
                <input type="checkbox" id="p-1" data-row="p-6" data-column="p-1"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="board__column"><!-- I tells you the row or the distance being travelled -->
              <div class="board__cell move-12" style="--row: 1;">
                <input type="checkbox" id="s-12" data-row="s-1" data-column="s-2"/>
                <input type="checkbox" id="p-12" data-row="p-1" data-column="p-2"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-11" style="--row: 2;">
                <input type="checkbox" id="s-11" data-row="s-2" data-column="s-2"/>
                <input type="checkbox" id="p-11" data-row="p-2" data-column="p-2"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-10" style="--row: 3;">
                <input type="checkbox" id="s-10" data-row="s-3" data-column="s-2"/>
                <input type="checkbox" id="p-10" data-row="p-3" data-column="p-2"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-9" style="--row: 4;">
                <input type="checkbox" id="s-9" data-row="s-4" data-column="s-2"/>
                <input type="checkbox" id="p-9" data-row="p-4" data-column="p-2"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-8" style="--row: 5;">
                <input type="checkbox" id="s-8" data-row="s-5" data-column="s-2"/>
                <input type="checkbox" id="p-8" data-row="p-5" data-column="p-2"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-7" style="--row: 6;">
                <input type="checkbox" id="s-7" data-row="s-6" data-column="s-2"/>
                <input type="checkbox" id="p-7" data-row="p-6" data-column="p-2"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="board__column"><!-- I tells you the row or the distance being travelled -->
              <div class="board__cell move-18" style="--row: 1;">
                <input type="checkbox" id="s-18" data-row="s-1" data-column="s-3"/>
                <input type="checkbox" id="p-18" data-row="p-1" data-column="p-3"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-17" style="--row: 2;">
                <input type="checkbox" id="s-17" data-row="s-2" data-column="s-3"/>
                <input type="checkbox" id="p-17" data-row="p-2" data-column="p-3"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-16" style="--row: 3;">
                <input type="checkbox" id="s-16" data-row="s-3" data-column="s-3"/>
                <input type="checkbox" id="p-16" data-row="p-3" data-column="p-3"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-15" style="--row: 4;">
                <input type="checkbox" id="s-15" data-row="s-4" data-column="s-3"/>
                <input type="checkbox" id="p-15" data-row="p-4" data-column="p-3"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-14" style="--row: 5;">
                <input type="checkbox" id="s-14" data-row="s-5" data-column="s-3"/>
                <input type="checkbox" id="p-14" data-row="p-5" data-column="p-3"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-13" style="--row: 6;">
                <input type="checkbox" id="s-13" data-row="s-6" data-column="s-3"/>
                <input type="checkbox" id="p-13" data-row="p-6" data-column="p-3"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="board__column"><!-- I tells you the row or the distance being travelled -->
              <div class="board__cell move-24" style="--row: 1;">
                <input type="checkbox" id="s-24" data-row="s-1" data-column="s-4"/>
                <input type="checkbox" id="p-24" data-row="p-1" data-column="p-4"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-23" style="--row: 2;">
                <input type="checkbox" id="s-23" data-row="s-2" data-column="s-4"/>
                <input type="checkbox" id="p-23" data-row="p-2" data-column="p-4"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-22" style="--row: 3;">
                <input type="checkbox" id="s-22" data-row="s-3" data-column="s-4"/>
                <input type="checkbox" id="p-22" data-row="p-3" data-column="p-4"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-21" style="--row: 4;">
                <input type="checkbox" id="s-21" data-row="s-4" data-column="s-4"/>
                <input type="checkbox" id="p-21" data-row="p-4" data-column="p-4"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-20" style="--row: 5;">
                <input type="checkbox" id="s-20" data-row="s-5" data-column="s-4"/>
                <input type="checkbox" id="p-20" data-row="p-5" data-column="p-4"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-19" style="--row: 6;">
                <input type="checkbox" id="s-19" data-row="s-6" data-column="s-4"/>
                <input type="checkbox" id="p-19" data-row="p-6" data-column="p-4"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="board__column"><!-- I tells you the row or the distance being travelled -->
              <div class="board__cell move-30" style="--row: 1;">
                <input type="checkbox" id="s-30" data-row="s-1" data-column="s-5"/>
                <input type="checkbox" id="p-30" data-row="p-1" data-column="p-5"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-29" style="--row: 2;">
                <input type="checkbox" id="s-29" data-row="s-2" data-column="s-5"/>
                <input type="checkbox" id="p-29" data-row="p-2" data-column="p-5"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-28" style="--row: 3;">
                <input type="checkbox" id="s-28" data-row="s-3" data-column="s-5"/>
                <input type="checkbox" id="p-28" data-row="p-3" data-column="p-5"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-27" style="--row: 4;">
                <input type="checkbox" id="s-27" data-row="s-4" data-column="s-5"/>
                <input type="checkbox" id="p-27" data-row="p-4" data-column="p-5"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-26" style="--row: 5;">
                <input type="checkbox" id="s-26" data-row="s-5" data-column="s-5"/>
                <input type="checkbox" id="p-26" data-row="p-5" data-column="p-5"/>
                <div class="board__disc disc">
                  <div class="disc__piece">
                    <div class="cuboid">
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                      <div class="cuboid__side"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="board__cell move-25" style="--row: 6;">
                <inp.........完整代码请登录后点击上方下载按钮下载查看