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

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

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