css实现一个21点纸牌游戏效果代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：css实现一个21点纸牌游戏效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  


  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,700;1,400&amp;display=swap'>
  
<style>
body {
  padding: 0;
  margin: 0;
  background-color: #327932;
  height: 100vh;
  overflow: hidden;
  font-family: "Open Sans", sans-serif;
  --card-size: 1vh;
  --card-width: calc(36 * var(--card-size));
  --card-height: calc(54 * var(--card-size));
  --card-base-x: calc(0.15 * var(--card-width));
  --card-base-y: calc(0.15 * var(--card-width));
}
@media (max-aspect-ratio: 1/1) {
  body {
    --card-size: 0.4vh;
  }
}

@property --warningPosition {
  intial-value: 100%;
  inherits: false;
  syntax: "<percentage>";
}
@keyframes hideWarning {
  to {
    --warningPosition: 100%;
  }
}
#warning {
  font-weight: 300;
  position: absolute;
  --warningPosition: 0%;
  top: var(--warningPosition, 0);
  animation: 0s linear 0s 1 forwards running hideWarning;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #327932;
  z-index: 500;
  color: #fff;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#warning p {
  padding: 1rem;
}
#warning a {
  color: #fff;
  transition: 0.125s all;
}
#warning a:hover {
  color: #02111d;
}

h2 {
  padding: 0;
  margin: 0;
  font-weight: 400;
}

form,
.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.stage {
  z-index: 0;
  color: #fff;
  display: flex;
  flex-direction: row;
}
@media (max-aspect-ratio: 1/1) {
  .stage {
    flex-direction: column;
  }
}
.stage__body {
  --card-offset: 0;
  text-align: center;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-aspect-ratio: 1/1) {
  .stage__body {
    width: 100%;
    height: 50%;
  }
}
.stage__body--dealer {
  --stage-center-x: calc(
    75vw -
      (
        var(--card-width) / 2 +
          (var(--card-offset) * var(--card-base-x) / 2)
      )
  );
  --stage-center-y: calc(
    50vh -
      (
        var(--card-height) / 2 +
          (var(--card-offset) * var(--card-base-y) / 2)
      )
  );
  order: 2;
}
@media (max-aspect-ratio: 1/1) {
  .stage__body--dealer {
    order: 1;
    --stage-center-x: calc(
      50vw -
        (
          var(--card-width) / 2 +
            (var(--card-offset) * var(--card-base-x) / 2)
        )
    );
    --stage-center-y: calc(
      22vh -
        (
          var(--card-height) / 2 +
            (var(--card-offset) * var(--card-base-y) / 2)
        )
    );
  }
}
.stage__body--player {
  --stage-center-x: calc(
    25vw -
      (
        var(--card-width) / 2 +
          (var(--card-offset) * var(--card-base-x) / 2)
      )
  );
  --stage-center-y: calc(
    50vh -
      (
        var(--card-height) / 2 +
          (var(--card-offset) * var(--card-base-y) / 2)
      )
  );
  order: 1;
}
@media (max-aspect-ratio: 1/1) {
  .stage__body--player {
    order: 2;
    --stage-center-x: calc(
      50vw -
        (
          var(--card-width) / 2 +
            (var(--card-offset) * var(--card-base-x) / 2)
        )
    );
    --stage-center-y: calc(
      72vh -
        (
          var(--card-height) / 2 +
            (var(--card-offset) * var(--card-base-y) / 2)
        )
    );
  }
}
.stage__labels {
  display: flex;
  padding: 1rem 0;
  opacity: 0;
  transition: 0.25s all;
  flex-direction: row;
}
@media (min-height: 480px) {
  .stage__labels {
    flex-direction: column;
  }
}
@media (max-aspect-ratio: 1/1) {
  .stage__labels.stage__labels--player {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
.stage__labels--main {
  display: none;
}
@media (min-height: 480px) {
  .stage__labels--main {
    display: flex;
    justify-content: center;
  }
}
.stage__labels--total {
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: center;
}
.stage__labels--total .sm {
  display: inline-block;
  margin-right: 0.25rem;
}
@media (min-height: 480px) {
  .stage__labels--total .sm {
    display: none;
  }
}
.stage__labels--total.user-total {
  counter-increment: userTotalCounter var(--user-total);
}
.stage__labels--total.user-total:after {
  font-weight: 600;
  padding-left: 0.5rem;
  content: counter(userTotalCounter);
}
.stage__labels--total.dealer-total {
  counter-increment: dealerTotalCounter var(--dealer-total);
}
.stage__labels--total.dealer-total:after {
  font-weight: 600;
  padding-left: 0.5rem;
  content: counter(dealerTotalCounter);
}

input,
input:checked + .label-hit,
#start:not(:checked) + label ~ label,
#start:checked + label,
#stand:checked ~ label {
  display: none;
}

label {
  position: absolute;
  z-index: 100;
  color: #fff;
  width: 10rem;
  display: inline-block;
  text-align: center;
  background-color: #02111d;
  font-size: 1.5rem;
  padding: 0.5rem 0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.125s;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}
label.label-hit {
  top: calc(50vh - 2rem);
}
label#label-stand {
  top: calc(50vh + 2rem);
}
@media (max-aspect-ratio: 1/1) {
  label.label-hit {
    top: 50%;
    left: calc(50vw - 6rem);
  }
  label#label-stand {
    top: 50%;
    left: calc(50vw + 6rem);
  }
}
label:hover {
  background-color: #052d4d;
}

.card {
  position: absolute;
  left: var(--stage-center-x);
  top: var(--stage-center-y);
  transition: 0.5s all;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  width: var(--card-width);
  height: var(--card-height);
}
.card[class^=card--u], .card[class*=" card--u"] {
  opacity: 0;
}
.card__face {
  background-image: url("https://assets.codepen.io/67732/card-faces.svg");
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-size: auto 400%;
  background-repeat: no-repeat;
}
.card:nth-child(1) {
  margin-left: calc(0 * var(--card-base-x));
  margin-top: calc(0 * var(--card-base-y));
}
.card:nth-child(2) {
  margin-left: calc(1 * var(--card-base-x));
  margin-top: calc(1 * var(--card-base-y));
}
.card:nth-child(3) {
  margin-left: calc(2 * var(--card-base-x));
  margin-top: calc(2 * var(--card-base-y));
}
.card:nth-child(4) {
  margin-left: calc(3 * var(--card-base-x));
  margin-top: calc(3 * var(--card-base-y));
}
.card:nth-child(5) {
  margin-left: calc(4 * var(--card-base-x));
  margin-top: calc(4 * var(--card-base-y));
}

@keyframes drawCard {
  0% {
    opacity: 0;
    transform: translate(0, -100vh) rotateZ(10deg);
  }
  1% {
    opacity: 1;
  }
  50% {
    transform: translate(0, -100vh) rotateZ(10deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0, 0vh) rotateZ(0deg);
  }
}
@property --ua-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --ua-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes uaValue {
  from {
    --ua-offset: 1;
  }
  to {
    --ua-offset: 13;
  }
}
@keyframes uaSuitValue {
  from {
    --ua-suit: 0;
  }
  to {
    --ua-suit: 3;
  }
}
@property --ub-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --ub-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes ubValue {
  from {
    --ub-offset: 1;
  }
  to {
    --ub-offset: 13;
  }
}
@keyframes ubSuitValue {
  from {
    --ub-suit: 0;
  }
  to {
    --ub-suit: 3;
  }
}
@property --uc-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --uc-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes ucValue {
  from {
    --uc-offset: 1;
  }
  to {
    --uc-offset: 13;
  }
}
@keyframes ucSuitValue {
  from {
    --uc-suit: 0;
  }
  to {
    --uc-suit: 3;
  }
}
@property --ud-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --ud-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes udValue {
  from {
    --ud-offset: 1;
  }
  to {
    --ud-offset: 13;
  }
}
@keyframes udSuitValue {
  from {
    --ud-suit: 0;
  }
  to {
    --ud-suit: 3;
  }
}
@property --ue-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --ue-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes ueValue {
  from {
    --ue-offset: 1;
  }
  to {
    --ue-offset: 13;
  }
}
@keyframes ueSuitValue {
  from {
    --ue-suit: 0;
  }
  to {
    --ue-suit: 3;
  }
}
@property --da-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --da-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes daValue {
  from {
    --da-offset: 1;
  }
  to {
    --da-offset: 13;
  }
}
@keyframes daSuitValue {
  from {
    --da-suit: 0;
  }
  to {
    --da-suit: 3;
  }
}
@property --db-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --db-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes dbValue {
  from {
    --db-offset: 1;
  }
  to {
    --db-offset: 13;
  }
}
@keyframes dbSuitValue {
  from {
    --db-suit: 0;
  }
  to {
    --db-suit: 3;
  }
}
@property --dc-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --dc-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes dcValue {
  from {
    --dc-offset: 1;
  }
  to {
    --dc-offset: 13;
  }
}
@keyframes dcSuitValue {
  from {
    --dc-suit: 0;
  }
  to {
    --dc-suit: 3;
  }
}
@property --dd-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --dd-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes ddValue {
  from {
    --dd-offset: 1;
  }
  to {
    --dd-offset: 13;
  }
}
@keyframes ddSuitValue {
  from {
    --dd-suit: 0;
  }
  to {
    --dd-suit: 3;
  }
}
@property --de-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --de-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes deValue {
  from {
    --de-offset: 1;
  }
  to {
    --de-offset: 13;
  }
}
@keyframes deSuitValue {
  from {
    --de-suit: 0;
  }
  to {
    --de-suit: 3;
  }
}
@property --a-position-offset {
  syntax: "<integer>";
  initial-value: -1;
  inherits: true;
}
@property --b-position-offset {
  syntax: "<integer>";
  initial-value: -1;
  inherits: true;
}
@property --c-position-offset {
  syntax: "<integer>";
  initial-value: -1;
  inherits: true;
}
@property --d-position-offset {
  syntax: "<integer>";
  initial-value: -1;
  inherits: true;
}
@property --e-position-offset {
  syntax: "<integer>";
  initial-value: -1;
  inherits: true;
}
form {
  /* 
    --[p]-[n]-offset values 
    1 : Ace
    2 - 10: Same
    11 : J
    12 : Q
    13 : K
  */
  --ua-offset: 1;
  --ua: min(
    10,
    var(--ua-offset)
  );
  --ua-is-ace: clamp(
    0,
    2 - var(--ua-offset),
    1
  );
  --ub-offset: 1;
  --ub: min(
    10,
    var(--ub-offset)
  );
  --ub-is-ace: clamp(
    0,
    2 - var(--ub-offset),
    1
  );
  --uc-offset: 1;
  --uc: min(
    10,
    var(--uc-offset)
  );
  --uc-is-ace: clamp(
    0,
    2 - var(--uc-offset),
    1
  );
  --ud-offset: 1;
  --ud: min(
    10,
    var(--ud-offset)
  );
  --ud-is-ace: clamp(
    0,
    2 - var(--ud-offset),
    1
  );
  --ue-offset: 1;
  --ue: min(
    10,
    var(--ue-offset)
  );
  --ue-is-ace: clamp(
    0,
    2 - var(--ue-offset),
    1
  );
  --da-offset: 1;
  --da: min(
    10,
    var(--da-offset)
  );
  --da-is-ace: clamp(
    0,
    2 - var(--da-offset),
    1
  );
  --db-offset: 1;
  --db: min(
    10,
    var(--db-offset)
  );
  --db-is-ace: clamp(
    0,
    2 - var(--db-offset),
    1
  );
  --dc-offset: 1;
  --dc: min(
    10,
    var(--dc-offset)
  );
  --dc-is-ace: clamp(
    0,
    2 - var(--dc-offset),
    1
  );
  --dd-offset: 1;
  --dd: min(
    10,
    var(--dd-offset)
  );
  --dd-is-ace: clamp(
    0,
    2 - var(--dd-offset),
    1
  );
  --de-offset: 1;
  --de: min(
    10,
    var(--de-offset)
  );
  --de-is-ace: clamp(
    0,
    2 - var(--de-offset),
    1
  );
  --ua-base-pre: calc(
    var(--ua)
  );
  --ua-a-pre: calc(
    var(--ua-base-pre) +
      (
        (10 * var(--ua-is-ace)) *
          clamp(0, calc(12 - var(--ua-base-pre)), 1)
      )
  );
  --ua-total: var(
    --ua-a-pre
  );
  --uaub-base-pre: calc(
    var(--ua) + var(--ub)
  );
  --uaub-a-pre: calc(
    var(--uaub-base-pre) +
      (
        (10 * var(--ua-is-ace)) *
          clamp(0, calc(12 - var(--uaub-base-pre)), 1)
      )
  );
  --uaub-b-pre: calc(
    var(--uaub-a-pre) +
      (
        (10 * var(--ub-is-ace)) *
          clamp(0, calc(12 - var(--uaub-a-pre)), 1)
      )
  );
  --uaub-total: var(
    --uaub-b-pre
  );
  --uaubuc-base-pre: calc(
    var(--ua) + var(--ub) + var(--uc)
  );
  --uaubuc-a-pre: calc(
    var(--uaubuc-base-pre) +
      (
        (10 * var(--ua-is-ace)) *
          clamp(0, calc(12 - var(--uaubuc-base-pre)), 1)
      )
  );
  --uaubuc-b-pre: calc(
    var(--uaubuc-a-pre) +
      (
        (10 * var(--ub-is-ace)) *
          clamp(0, calc(12 - var(--uaubuc-a-pre)), 1)
      )
  );
  --uaubuc-c-pre: calc(
    var(--uaubuc-b-pre) +
      (
        (10 * var(--uc-is-ace)) *
          clamp(0, calc(12 - var(--uaubuc-b-pre)), 1)
      )
  );
  --uaubuc-total: var(
    --uaubuc-c-pre
  );
  --uaubucud-base-pre: calc(
    var(--ua) + var(--ub) + var(--uc) + var(--ud)
  );
  --uaubucud-a-pre: calc(
    var(--uaubucud-base-pre) +
      (
        (10 * var(--ua-is-ace)) *
          clamp(0, calc(12 - var(--uaubucud-base-pre)), 1)
      )
  );
  --uaubucud-b-pre: calc(
    var(--uaubucud-a-pre) +
      (
        (10 * var(--ub-is-ace)) *
          clamp(0, calc(12 - var(--uaubucud-a-pre)), 1)
      )
  );
  --uaubucud-c-pre: calc(
    var(--uaubucud-b-pre) +
      (
        (10 * var(--uc-is-ace)) *
          clamp(0, calc(12 - var(--uaubucud-b-pre)), 1)
      )
  );
  --uaubucud-d-pre: calc(
    var(--uaubucud-c-pre) +
      (
        (10 * var(--ud-is-ace)) *
          clamp(0, calc(12 - var(--uaubucud-c-pre)), 1)
      )
  );
  --uaubucud-total: var(
    --uaubucud-d-pre
  );
  --uaubucudue-base-pre: calc(
    var(--ua) + var(--ub) + var(--uc) + var(--ud) + var(--ue)
  );
  --uaubucudue-a-pre: calc(
    var(--uaubucudue-base-pre) +
      (
        (10 * var(--ua-is-ace)) *
          clamp(0, calc(12 - var(--uaubucudue-base-pre)), 1)
      )
  );
  --uaubucudue-b-pre: calc(
    var(--uaubucudue-a-pre) +
      (
        (10 * var(--ub-is-ace)) *
          clamp(0, calc(12 - var(--uaubucudue-a-pre)), 1)
      )
  );
  --uaubucudue-c-pre: calc(
    var(--uaubucudue-b-pre) +
      (
        (10 * var(--uc-is-ace)) *
          clamp(0, calc(12 - var(--uaubucudue-b-pre)), 1)
      )
  );
  --uaubucudue-d-pre: calc(
    var(--uaubucudue-c-pre) +
      (
        (10 * var(--ud-is-ace)) *
          clamp(0, calc(12 - var(--uaubucudue-c-pre)), 1)
      )
  );
  --uaubucudue-e-pre: calc(
    var(--uaubucudue-d-pre) +
      (
        (10 * var(--ue-is-ace)) *
          clamp(0, calc(12 - var(--uaubucudue-d-pre)), 1)
      )
  );
  --uaubucudue-total: var(
    --uaubucudue-e-pre
  );
  --da-base-pre: calc(
    var(--da)
  );
  --da-a-pre: calc(
    var(--da-base-pre) +
      (
        (10 * var(--ua-is-ace)) *
          clamp(0, calc(12 - var(--da-base-pre)), 1)
      )
  );
  --da-total: var(
    --da-a-pre
  );
  --dadb-base-pre: calc(
    var(--da) + var(--db)
  );
  --dadb-a-pre: calc(
    var(--dadb-base-pre) +
      (
        (10 * var(--ua-is-ace)) *
          clamp(0, calc(12 - var(--dadb-base-pre)), 1)
      )
  );
  --dadb-b-pre: calc(
    var(--dadb-.........完整代码请登录后点击上方下载按钮下载查看