原生js实现兔子吃草过桥小河游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：原生js实现兔子吃草过桥小河游戏代码，支持hue色温调节及夜晚模式，移动键盘的上下左右键操作兔子吃草。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          width:100vw;
          height:100vh;
          padding:0;
          margin:0;
          overflow:hidden;
          background:skyblue;
          font-family:monospace;
          /*   transition:1s; */
        }
        body:before {
          content:'';
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          /*   background-color:red; */
          background-image:linear-gradient(25deg, white 5%, transparent 35%), linear-gradient(-25deg, white 5%, transparent 35%);
          z-index:9;
          pointer-events:none;
        }
        
        #player {
          width:;
          height:;
          /*   background: red; */
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 1000;
        /*   outline: 2px solid red; */
        }
        #player:before {
          content: '';
          width: 100%;
          height: 20%;
          background: black;
          border-radius: 50%;
          position: absolute;
          left: 0;
          bottom: 0;
          transform: rotate(45deg) translate(-30%, 100%);
          opacity: .25;
          filter: blur(2px);
        }
        #player:after {
          content:'';
          width: 100%;
          height: 100%;
          background: var(--img-src);
          background-size: 200% 100%;  
          position: absolute;
          left: 0;
          top: 0;
          transform: var(--pl-moving);
        }
        
        .moving:after {
          animation: moving 1s steps(2) infinite;
        }
        @keyframes moving {
          50% { background-position: 200% 0; }
        }
        
        span {
          position: absolute;
          bottom: 10px;
          left: 10px;
          text-align: left;
          z-index: 9;
          user-select: none;
        }
        
        #controls {
          position:fixed;
          right:15px;
          top:15px;
          font-family:monospace;
          text-align:right;
          z-index:99999999;
          background:steelblue;
          padding:10px;
          border-radius:5px;
          color:white;
        }
        #night {
          opacity:0;
          position:absolute;
          top:-999px;
          left:-999px;
        }
        #night:checked + #god {
          background-color:#003;
          background-image: 
            radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
          background-repeat: repeat;
          background-size: 200px 200px;
        }
        
        label {
          border-radius:5px;
          border:0;
          padding:5px;
          text-align:center;
          background:rgba(0,0,0,0);
          transition:.5s;
          font-size:20px;
          line-height:20px;
          color:white;
        }
        label:hover {
          color:gold;
        }
        
        #god {
          width:100vw;
          height:100vh;
          position:absolute;
          transition:1s;
          background:skyblue;
          /*   pointer-events: none; */
        }
        
        #box {
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%,-50%) rotateX(45deg) rotateZ(-45deg);
          background-color:ForestGreen;
          background-image:url('//repo.bfw.wiki/bfwrepo/images/game/tuzi/asfalt-dark.png');
          box-shadow:
            -1px 1px #060,
            -2px 2px #060,
            -3px 3px #060,
            -4px 4px #060,
            -5px 5px #060,
            -6px 6px #630,
            -7px 7px #630,
            -8px 8px #630,
            -9px 9px #630,
            -10px 10px #630,
            -11px 11px #630,
            -12px 12px #630,
            -13px 13px #630,
            -14px 14px #630,
            -15px 15px #630,
            -16px 16px #630,
            -17px 17px #630,
            -18px 18px #630,
            -19px 19px #630,
            -20px 20px #630,
            -21px 21px #630,
            -22px 22px #630,
            -23px 23px #630,
            -24px 24px #630,
            -25px 25px #630,
            -26px 26px #630,
            -27px 27px #630,
            -28px 28px #630,
            -29px 29px #630,
            -30px 30px #630,
            -31px 31px #630;  
          animation:bob 5s linear infinite;
        }
        @keyframes bob {
          50% { top:47%; }
        }
        
        #boxOverlay, #boxOverlay2 {
          width:50%;
          height:50%;
          position:absolute;
          left:10%;
          top:10%;
          border-radius:15px;
          background:#008400;
          background-image:url('//repo.bfw.wiki/bfwrepo/images/game/tuzi/asfalt-dark.png');
        }
        
        #ground {
          height:50vh;
          position:absolute;
          bottom:0;
          left:50%;
          transform:translateX(-50%);
          background:url('//repo.bfw.wiki/bfwrepo/images/game/tuzi/cartographer.png'), linear-gradient(to right, saddlebrown 50%, Sienna 50%);
          display:none;
        }
        
        #ground:after {
          content:'';
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          /*   background-color:red; */
          background-image:url('//repo.bfw.wiki/bfwrepo/images/game/tuzi/nice-snow.png');
          filter:blur(5px);
          animation:mist 15s ease-in-out infinite;
        }
        @keyframes mist {
          50% { background-position:-50% 0%; }
        }
        .feature {
          /*   border-radius:5px; */
        }
        
        #river {
          background-color:dodgerblue;
          background-image:radial-gradient(circle, rgba(255,255,255,.25) 15%, dodgerblue 15%);
          background-size:10px 10px;
          animation:flow 20s linear infinite;
          box-shadow:inset 0px 0px 15px rgba(0,0,255,.5);
          z-index:99;
        }
        @keyframes flow {
          100% { background-position:0% 100%; }
        }
        
        #bridge {
          width:125%;
          background-color:saddleBrown;
          background-image:linear-gradient(to right, saddlebrown 50%, rgba(0,0,0,.25) 50%);
          background-size:10px;
          position:absolute;
          left:-12.5%;
        }
        #bridge:after {
          content:'';
          position:absolute;
          left:12.5%;
          top:100%;
          width:80%;
          height:5px;
          background:rgba(0,0,0,.25)
        }
        
        #fall {
          width:70%;
          height:100vh;
          position:absolute;
          background:red;
          transform-origin:top left;
          transform:rotate(45deg) skewY(-45deg);
          background-color:dodgerblue;
          background-image:radial-gradient(circle, rgba(255,255,255,.25) 15%, dodgerblue 15%);
          background-size:10px 10px;
          animation:flow 10s linear infinite;
          box-shadow:inset 0px 0px 15px rgba(0,0,255,.5);
        }
        .fallLeft {
          transform:rotate(-45deg) skewY(45deg) !important;
        }
        
        .tree {
          position:absolute;  
          /*   background: linear-gradient(to top right, rgba(0,0,0,.15), transparent 35%); */
          border-radius:50%;  
          transform-origin: bottom left;
          transition: .5s;
        }
        /* .tree:hover {
          transform: translate(50%, -50%);
        }
        .tree:hover:before {
          height: 100%;
          left: 25%;
          bottom: 0;
          transition: .5s;
        } */
        .tree:before {
          content:'';
          position:absolute;
          width: 50%;
          height: 10%;
          left: 5%;
          bottom: 25%;
          background: orangered;
          transform:rotate(45deg) translate(15%,75%);
          clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        }
        .tree:after {
          content:'';
          background: linear-gradient(to right, #040 50%, #060 50%);
          clip-path: polygon(0% 25%, 15% 15%, 35% 15%, 45% 20%, 50% 40%, 55% 20%, 65% 15%, 85% 15%, 100% 25%, 100% 50%, 85% 35%, 75% 30%, 55% 100%, 45% 100%, 25% 30%, 15% 35%, 0 50%);
          position:absolute;
          bottom: 0;
          left: 12.5%;
          width: 75%;
          height: 80%;
          transform: rotate(45deg) translateY(-25%);
        }
        
        .caught {
          z-index: 10001;
          animation: caught .25s linear forwards;
        }
        @keyframes caught {
          100% { transform: translate(50%, -50%); }
        }
        .caught:before {
          animation: caught2 .25s linear forwards;
        }
        @keyframes caught2 {
          100% { 
            height: 100%;
            left: 25%;
            bottom: 0; 
          }
        }
        
        /* .tree:hover .bird {
        animation:fly 3s ease-in forwards;
        } */
        
        /* @keyframes fly {
        0% { opacity:1; }
        100% { top: 1000px; transform: scale(6) rotate(45deg) translateY(-25%); opacity:0;}
        } */
.........完整代码请登录后点击上方下载按钮下载查看