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