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