css+js实现称重小游侠代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：css+js实现称重小游侠代码，拖动底下的秤砣放到左边的盘子里，达到平衡就算赢。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">



    <style>
        * {
          margin: 0;
          box-sizing: border-box;
        }
        
        body {
          width: 100vw;
          height: 100vh;
          font-size: 1vh;
          display: flex;
          flex-direction: column;
          gap: 5em 0;
          justify-content: end;
          align-items: center;
          background-color: #EFEFEF;
          background-image: linear-gradient(335deg, white 23px, transparent 23px), linear-gradient(155deg, white 23px, transparent 23px), linear-gradient(335deg, white 23px, transparent 23px), linear-gradient(155deg, white 23px, transparent 23px);
          background-size: 58px 58px;
          background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
        }
        
        .table {
          position: absolute;
          width: 100vw;
          height: 40vh;
          background-color: var(--light-brown-color);
          background: linear-gradient(to top, var(--dark-brown-color) 3%, var(--light-brown-color) 3%, var(--light-brown-color) 5%, var(--brown-color) 5%, var(--brown-color) 100%);
          background-repeat: repeat-y;
          background-size: 100% 15em;
        }
        
        :root {
          --border-radius: 0.8em;
          --brown-color: #8A6345;
          --dark-brown-color: #755134;
          --light-brown-color: #BA8A68;
          --light-gray-color: #BCBCBC;
          --dark-gray-color: #898785;
          --gray-color: #A0A0A0;
        }
        
        .box {
          background-color: #EBA059;
          position: absolute;
          font-size: 0.65em;
          width: 35em;
          height: 25em;
          bottom: 4.5em;
          left: calc(50% - 17.5em);
        }
        .box__cover {
          background-color: #FFC37A;
          position: absolute;
          width: 36em;
          height: 7em;
          top: 0;
          left: -0.5em;
        }
        .box__tape {
          position: absolute;
          top: 0;
          left: calc(50% - 2.5em);
          height: 25em;
          width: 5em;
          background-color: rgba(189, 121, 54, 0.65);
        }
        .box__note {
          background-color: rgba(238, 211, 147, 0.8);
          height: 6em;
          width: 21em;
          position: absolute;
          left: 5em;
          bottom: 7em;
          transform: rotate(-15deg);
        }
        .box__note:after {
          content: "";
          position: absolute;
          left: calc(-1em + 0.1em);
          height: 1em;
          background: linear-gradient(45deg, transparent 33.333%, rgba(238, 211, 147, 0.8) 33.333%, rgba(238, 211, 147, 0.8) 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, rgba(238, 211, 147, 0.8) 33.333%, rgba(238, 211, 147, 0.8) 66.667%, transparent 66.667%);
          background-size: 1em 2em;
          background-position: 0 -1em;
          transform: rotate(90deg);
          transform-origin: bottom left;
          top: -1em;
          width: 6em;
        }
        .box__note:before {
          content: "";
          position: absolute;
          right: calc(-1em + 0.1em);
          height: 1em;
          background: linear-gradient(45deg, transparent 33.333%, rgba(238, 211, 147, 0.8) 33.333%, rgba(238, 211, 147, 0.8) 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, rgba(238, 211, 147, 0.8) 33.333%, rgba(238, 211, 147, 0.8) 66.667%, transparent 66.667%);
          background-size: 1em 2em;
          background-position: 0 -1em;
          transform: rotate(-90deg);
          transform-origin: bottom right;
          top: -1em;
          width: 6em;
        }
        .box__note-text {
          font-family: "Architects Daughter", cursive;
          font-size: 2.5em;
          line-height: 2.5em;
        }
        .box__icons {
          position: absolute;
          bottom: 1em;
          right: 2em;
          height: 5em;
          font-size: 0.8em;
          display: flex;
          gap: 0 0.8em;
        }
        
        .cup-icon {
          position: relative;
          background-color: #2B1D0F;
          width: 3em;
          height: 3em;
          border-radius: 0 0 1.5em 1.5em;
        }
        .cup-icon:after {
          content: "";
          background-color: #2B1D0F;
          position: absolute;
          width: 0.6em;
          height: 2em;
          bottom: -2em;
          left: calc(50% - 0.3em);
        }
        .cup-icon:before {
          content: "";
          background-color: #2B1D0F;
          position: absolute;
          width: 2.5em;
          height: 0.6em;
          bottom: -2em;
          left: calc(50% - 1.25em);
        }
        
        .direction-icon {
          height: 2.5em;
          width: 3.4em;
          position: relative;
          margin-top: 1.5em;
          margin-left: 1em;
          border-left: 1em solid #2B1D0F;
          border-right: 1em solid #2B1D0F;
        }
        .direction-icon:after {
          content: "";
          position: absolute;
          bottom: -0.8em;
          left: -1.3em;
          width: 4em;
          border-bottom: 0.6em solid #2B1D0F;
        }
        .direction-icon:before {
          content: "";
        }
        .direction-icon:before, .direction-icon__arrow {
          position: absolute;
          top: -1.3em;
          left: -1.3em;
          width: 1.5em;
          clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
          height: 1.1em;
          background-color: #2B1D0F;
        }
        .direction-icon__arrow {
          left: 1.3em;
        }
        
        .scale {
          position: relative;
          font-size: 1em;
          display: flex;
          flex-direction: column;
          align-items: center;
          pointer-events: none;
        }
        .scale__base {
          position: relative;
          width: 18em;
          height: 1.2em;
          background-color: #A0A0A0;
          border-radius: var(--border-radius) var(--border-radius) 0 0;
        }
        .scale__base:before {
          content: "";
          position: absolute;
          top: -1.8em;
          left: 2em;
          width: 14em;
          height: 1.8em;
          background-color: #BCBCBC;
          border-radius: var(--border-radius) var(--border-radius) 0 0;
        }
        .scale__base:after {
          content: "";
          top: 1.2em;
          left: -1.5em;
          position: absolute;
          width: 21em;
          height: 2em;
          background-color: #898785;
          border-radius: var(--border-radius) var(--border-radius) 0 0;
        }
        .scale__lower-center-stick {
          width: 4em;
          height: 20em;
          bottom: 0;
          left: -0.5em;
          background-color: var(--dark-brown-color);
          border-radius: var(--border-radius) var(--border-radius) 0 0;
          margin-bottom: 1.8em;
        }
        .scale__center-stick {
          height: 35em;
          width: 3em;
          position: relative;
          border-radius: 1.5em 1.5em 0 0;
          background: linear-gradient(to top, var(--brown-color) 95%, var(--dark-brown-color) 96%);
        }
        .scale__center-stick:after {
          width: 4em;
          height: 6em;
          content: "";
          position: absolute;
          border-radius: 2em;
          left: -0.5em;
          top: 13em;
          background-color: var(--brown-color);
        }
        .scale__center-stick:before {
          content: "";
          position: absolute;
          top: 15em;
          width: 5em;
          height: 8em;
          background-color: var(--brown-color);
          border-radius: 2.5em;
          left: -1em;
        }
        .scale__top {
          position: absolute;
          z-index: 1;
        }
        
        .top-scale {
          position: relative;
          width: 70em;
          height: 3em;
          background-color: var(--brown-color);
          border-radius: 1em;
          transition: transform 0.3s ease;
        }
        .top-scale:after {
          content: "";
          position: absolute;
          width: 6em;
          height: 6em;
          border-radius: 3em;
          background-color: var(--brown-color);
          top: calc(50% - 3em);
          left: calc(50% - 3em);
        }
        .top-scale__support {
          width: 1.2em;
          height: 0.9em;
          background-color: var(--dark-brown-color);
          position: absolute;
          top: calc(50% - 0.45em);
          left: -1.2em;
        }
        .top-scale__support:before {
          content: "";
          position: absolute;
          top: calc(50% - 1.25em);
          left: -2em;
          background-color: var(--light-brown-color);
          width: 2em;
          height: 2.5em;
          border-radius: 1em;
        }
        .top-scale__support--right {
          left: inherit;
          right: -1.2em;
          transform: scaleX(-1);
        }
        .top-scale__support-top {
          position: absolute;
          top: -5em;
          left: calc(50% - 1.5em);
          width: 3em;
          height: 5em;
          background: linear-gradient(to top, var(--brown-color) 90%, var(--dark-brown-color) 91%);
        }
        .top-scale__support-top:after {
          content: "";
          position: absolute;
          bottom: 5em;
          left: calc(50% - 2em);
          height: 1em;
          width: 4em;
          background-color: var(--light-brown-color);
          border-radius: 0.5em;
        }
        .top-scale__support-top:before {
          content: "";
          position: absolute;
          top: -3em;
          width: 3em;
          height: 3em;
          background-color: var(--light-gray-color);
          border-radius: 50%;
        }
        
        .pan {
          width: 24em;
          height: 45em;
          position: absolute;
          left: -12.5em;
          top: 0.4em;
          pointer-events: all;
          transform-origin: top center;
          transition: transform 0.3s ease;
        }
        .pan--right {
          left: unset;
          right: -12.5em;
        }
        .pan--dragover {
          filter: drop-shadow(0 0 1em #EED393);
        }
        .pan__pan {
          width: 20em;
          height: 2em;
          background-color: var(--dark-gray-color);
          margin-left: 2em;
          position: absolute;
          bottom: 0;
          z-index: 1;
        }
        .pan__pan:after {
          content: "";
          position: absolute;
          top: 0;
          left: -2em;
          width: 2em;
          height: 2em;
          background-image: linear-gradient(to top right, transparent 50%, var(--dark-gray-color) 0);
        }
        .pan__pan:before {
          content: "";
          position: absolute;
          top: 0;
          right: -2em;
          width: 2em;
          height: 2em;
          background-image: linear-gradient(to bottom right, var(--dark-gray-color) 50%, transparent 0);
        }
        .pan__pan-top {
          position: absolute;
          top: -1em;
          left: -2.5em;
          width: 25em;
          height: 1em;
          background-color: var(--gray-color);
          border-radius: 0.5em;
          z-index: 2;
        }
        .pan__ring {
          position: absolute;
          top: 0;
          left: calc(50% - 2em);
          width: 4em;
          height: 4em;
          border-radius: 50%;
          border: 0.7em solid var(--dark-gray-color);
          margin-top: 2.5em;
        }
        .pan__ring:after {
          content: "";
          position: absolute;
          top: -3.2em;
          left: calc(50% - 0.35em);
          height: 4em;
          width: 0.7em;
          background-color: var(--gray-color);
          border-radius: 0.4em;
        }
        
        .chain {
          position: absolute;
          height: 37em;
          width: 0.8em;
          left: calc(50% - 0.4em);
          top: 5.5em;
          overflow: hidden;
          transform-origin: top center;
        }
        .chain--left, .chain--right {
          height: 39em;
        }
        .chain--left {
          transform: rotate(18deg);
        }
        .chain--right {
          transform: rotate(-18deg);
        }
        .chain--over {
          z-index: 2;
        }
        .chain:after {
          --color: var(--light-gray-color);
          content: "";
          position: absolute;
          top: 0;
          left: 0.3em;
          height: 1.3em;
          width: 0.3em;
          border-radius: 0.15em;
          background-color: var(--light-gray-color);
          box-shadow: 0 1.7em 0 var(--color), 0 3.5em 0 var(--color), 0 5.3em 0 var(--color), 0 7.1em 0 var(--color), 0 8.9em 0 var(--color), 0 10.6em 0 var(--color), 0 12.3em 0 var(--color), 0 14.3em 0 var(--color), 0 16em 0 var(--color), 0 17.7em 0 var(--color), 0 19.5em 0 var(--color), 0 21.3em 0 var(--color), 0 23.1em 0 var(--color), 0 24.9em 0 var(--color), 0 26.7em 0 var(--color), 0 28.5em 0 var(--color), 0 30.3em 0 var(--color), 0 32.1em 0 var(--color), 0 33.9em 0 var(--color), 0 35.7em 0 var(--color), 0 37.5em 0 var(--color);
        }
        .chain:before {
          --color: var(--light-gray-color);
          content: "";
          position: absolute;
          top: 0.9em;
          left: 0em;
          height: 0.6em;
          width: 0.2em;
          border-radius: 0.45em;
          border: 0.3em solid var(--color);
          filter: drop-shadow(0 1.8em 0 var(--color)) drop-shadow(0 3.6em 0 var(--color)) drop-shadow(0 7.2em 0 var(--color)) drop-shadow(0 14.4em 0 var(--color)) drop-shadow(0 28.8em 0 var(--color));
        }
        
        .weight {
          font-size: 0.8em;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.2));
        }
        .weight--in-pan {
          position: absolute;
          bottom: 1rem;
          filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.2));
        }
        .weight--in-pan .weight__body {
          background: linear-gradient(to top, var(--dark-gray-color) 10%, var(--gray-color) 11%);
        }
        .weight--in-pan:hover {
          filter: drop-shadow(0 0 0.2em red);
        }
        .weight--in-pan:hover.weight--in-pan:after {
          content: "X delete";
          position: absolute;
          font-size: 3em;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
          color: black;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          text-align: center;
        }
        .weight--in-pan:hover .weight__text {
          display: none;
        }
        .weight__body {
          width: 10em;
          height: 15em;
          background-color: var(--gray-color);
          border-radius: 0.5em;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .weight__head {
          position: relative;
          height: 3em;
          width: 8em;
          background: radial-gradient(30% 170% at left top, transparent 50%, var(--gray-color) 51%, var(--gray-color) 99%, transparent 100%), radial-gradient(30% 170% at right top, transparent 50%, var(--gray-color) 51%, var(--gray-color) 99%, transparent 100%), linear-gradient(to right, transparent 16%, var(--gray-color) 17%, var(--gray-color) 75%, transparent 74%);
        }
        .weight__head:after {
          content: ".........完整代码请登录后点击上方下载按钮下载查看