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 1.........完整代码请登录后点击上方下载按钮下载查看