js+css实现青蛙吃害虫游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js+css实现青蛙吃害虫游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">



    <style>
        /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
          @keyframes squiggly {
      0% {
        filter: url("#squiggly-0");
      }
      25% {
        filter: url("#squiggly-1");
      }
      50% {
        filter: url("#squiggly-3");
      }
      100% {
        filter: url("#squiggly-4");
      }
    }
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #fff;
      color: #000;
      font-size: 2.5vh;
    }
    
    body {
      font-family: arial;
    }
    body.dark {
      color: #fff;
    }
    
    .card {
      overflow: hidden;
      max-width: 20em;
      padding: 1em;
      margin: 0 auto 1em;
      background: rgba(255, 255, 255, 0.25);
      border: 1px solid #000;
      border-radius: 0.25em;
    }
    
    .btn {
      display: block;
      margin: 0 auto 0.5em;
      padding: 1em;
      max-width: 20em;
      font-weight: bold;
      letter-spacing: 1px;
      text-decoration: none !important;
      text-transform: uppercase;
      text-shadow: none !important;
      background: #fff;
      transition: all 0.2s;
      border: 1px solid rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      color: #000;
    }
    
    .checkbox {
      display: inline-block;
      font-weight: bold;
      text-transform: uppercase;
    }
    .checkbox input {
      display: none;
    }
    .checkbox span {
      display: block;
      padding: 1em;
      background: #fff;
      border: 1px solid #bbb;
      border-radius: 4px;
      color: #000;
      transition: all 0.2s;
      cursor: pointer;
    }
    .checkbox input:checked + span {
      border-color: #000;
    }
    
    .play .text {
      font-size: 2em;
    }
    
    .scoreboard .scoreboard-list {
      display: inline-block;
      padding: 0;
      margin: 0;
      text-align: right;
    }
    
    .game .hud {
      padding: 0 1rem;
      font-size: 1.5rem;
      letter-spacing: 1px;
    }
    .dark .game .hud {
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.1), 1px 0 0 rgba(0, 0, 0, 0.1), -1px 0 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1);
    }
    .game .hud .label {
      display: block;
      font-size: 0.6em;
      font-weight: normal;
      text-transform: uppercase;
    }
    .game .hud .value {
      font-size: 2em;
      font-weight: bold;
      line-height: 1;
    }
    .game .time {
      float: left;
    }
    .game .score {
      float: right;
    }
    
    .dark .win {
      text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black, 1px 1px 0 black, -1px -1px 0 black, -1px 1px 0 black, 1px -1px 0 black;
    }
    .win .score {
      float: left;
    }
    .win .best {
      float: right;
    }
    .win .label {
      display: block;
      font-size: 0.6em;
      font-weight: normal;
      text-transform: uppercase;
    }
    .win .value {
      font-size: 2em;
      font-weight: bold;
      line-height: 1;
    }
    .win .highscore {
      display: block;
      clear: both;
    }
    .win .highscore.is-hidden {
      display: none;
    }
    
    .screen {
      position: fixed;
      z-index: 10;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      padding: 1em;
      overflow: hidden;
      text-align: center;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-1em);
      transition: all 0.2s 0.1s;
    }
    .screen.is-active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
    .screen.game {
      padding-left: 0;
      padding-right: 0;
      background: none;
    }
    .screen h1 {
      text-transform: uppercase;
    }
    
    .sky {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition: all 0.5s;
      background: #fff;
      cursor: pointer;
    }
    .outlines .sky {
      background: #fff;
    }
    .light .sky {
      background: #aedef7;
    }
    .dark .sky {
      background: #002;
    }
    .sky:before {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0001), #fff);
      opacity: 0.5;
      content: '';
      transition: all 0.2s;
    }
    .dark .sky:before {
      opacity: 0.3;
    }
    
    @keyframes twinkle {
      0% {
        border-left-color: white;
        border-right-color: rgba(255, 255, 255, 0);
      }
      33.3334% {
        border-left-color: rgba(255, 255, 255, 0);
        border-right-color: white;
      }
      66.6667% {
        border-left-color: rgba(255, 255, 255, 0);
        border-right-color: white;
      }
      100% {
        border-left-color: white;
        border-right-color: rgba(255, 255, 255, 0);
      }
    }
    .stars {
      position: fixed;
      left: 2em;
      right: 2em;
      top: 4em;
      height: 2px;
      transform: rotate(40deg);
      border-width: 0 2px;
      border-style: solid;
      border-color: #fff;
      opacity: 0;
      transform: translateY(-5em);
      transition: all 0.5s;
      will-change: opacity;
      animation: twinkle 6s infinite alternate;
    }
    .dark .stars {
      opacity: 1;
      transform: translateY(0);
    }
    .stars:before, .stars:after {
      position: fixed;
      top: 6em;
      left: 2em;
      right: 0em;
      height: inherit;
      border: inherit;
      transform: rotate(-15deg);
      opacity: 0.5;
      content: '';
      will-change: opacity;
    }
    .stars:before {
      animation: twinkle 3s infinite alternate-reverse;
    }
    .stars:after {
      top: 0.5em;
      left: 3em;
      right: 6em;
      opacity: 1;
      transform: rotate(-30deg);
      animation: twinkle 6s infinite alternate;
    }
    
    .moon {
      position: fixed;
      bottom: 20em;
      left: 50%;
      width: 10em;
      height: 10em;
      background: #fff;
      border-radius: 50%;
      transition: all 0.5s ease-in-out;
      transform: translateY(2em);
      box-shadow: 0 0 4em #fff, 0 0 12em #fff, 0 0 0 6em rgba(211, 230, 235, 0.025), 0 0 0 12em rgba(211, 230, 235, 0.025), 0 0 0 18em rgba(211, 230, 235, 0.025);
      opacity: 0;
    }
    .moon:before, .moon:after {
      position: absolute;
      top: 20%;
      left: 10%;
      width: 30%;
      height: 30%;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.1);
      content: '';
      opacity: 0.1;
    }
    .moon:after {
      top: auto;
      left: auto;
      bottom: 10%;
      right: 10%;
      width: 50%;
      height: 50%;
      opacity: 0.1;
    }
    .dark .moon {
      transform: translateY(0);
      opacity: 1;
    }
    
    .mountains {
      opacity: 0.3;
    }
    .dark .mountains {
      opacity: 0.9;
    }
    
    .mountain {
      position: fixed;
      left: -100%;
      bottom: -3em;
      width: 200%;
      height: 14em;
      background: #fff;
      border-radius: 0 100% 0 0;
      transition: all 0.5s ease-in-out;
    }
    .light .mountain {
      background: #a4c18b;
    }
    .dark .mountain {
      background: #0a0a2a;
    }
    .mountain--2 {
      left: auto;
      right: -10%;
      height: 10em;
      border-radius: 100% 0 0 0;
    }
    
    .grass {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 8em;
      background: #fff;
      transition: all 0.5s ease-in-out;
    }
    .light .grass {
      background: #a7cc67;
    }
    .dark .grass {
      background: #0f0f2f;
    }
    
    .water {
      position: fixed;
      z-index: 2;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3em;
      transition: all 0.5s ease-in-out;
      background: #fff;
    }
    .light .water {
      background: #5f96d5;
    }
    .dark .water {
      background: #0f0f2f;
    }
    
    .tree {
      position: absolute;
      z-index: 3;
      right: 38%;
      top: -6.8em;
      width: 1.5em;
      height: 10em;
      transition: all 0.5s;
      background: #fff;
      transform: scale(0.2, 0.2);
      transform-origin: 50% 100%;
    }
    .light .tree {
      background: #6f4817;
    }
    .dark .tree {
      background: #0a0a2a;
    }
    .tree:before, .tree:after {
      position: absolute;
      left: 50%;
      bottom: 2em;
      display: inline-block;
      width: 0;
      transform: translateX(-50%);
      transition: all 0.5s ease-in-out;
      border-width: 0 6em 12em;
      border-style: solid;
      border-color: transparent;
      border-radius: 0 0 100% 100% / 0 0 1em 1em;
      border-bottom-color: #fff;
      content: '';
    }
    .light .tree:before, .light .tree:after {
      border-bottom-color: #2d5e3b;
    }
    .dark .tree:before, .dark .tree:after {
      border-bottom-color: #0a0a2a;
    }
    .tree:after {
      width: 0;
      bottom: 9em;
      border-width: 0 3em 6em;
    }
    .tree--2 {
      left: auto;
      right: 1.5em;
      top: -5.9em;
      transform: scale(0.2, 0.2);
    }
    .tree--3 {
      top: -5.5em;
      right: 47%;
      transform: scale(0.4, 0.4);
    }
    
    .lily {
      @extends .shadow;
      position: fixed;
      z-index: 3;
      left: 50%;
      bottom: 0.5em;
      height: 1.5em;
      width: 12em;
      transform: translateX(-50%);
      background: #fff;
      border: 1px solid #000;
      border-bottom: 0;
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }
    .light .lily {
      background: #777;
    }
    .dark .lily {
      background: #223;
    }
    .lily--2 {
      left: -9em;
      bottom: 5em;
      border: none;
      animation-delay: 2s;
      opacity: 0.6;
      transform: scale(0.5, 0.3);
    }
    .lily--3 {
      right: -7em;
      left: auto;
      bottom: 6em;
      border: none;
      animation-delay: -2s;
      opacity: 0.4;
      transform: scale(0.2, 0.15);
    }
    
    .shadow, .fly, .fly:before, .fly:after, .player .body, .player .belly, .player .arms .arm, .player .legs .leg, .player .eyes .eye, .player .tongue-inner {
      box-shadow: none;
    }
    
    .flies {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      overflow: hidden;
    }
    .flies .path {
      flex: 1 1 50%;
      padding: 1em 0;
      text-align: center;
      transition: transform 0.2s;
      will-change: transform;
    }
    .flies .path:nth-child(odd) {
      transform: translateX(-100%);
    }
    .flies .path:nth-child(even) {
      transform: translateX(100%);
    }
    .flies .path.is-active:nth-child(odd) {
      transform: translateX(-20%);
    }
    .flies .path.is-active:nth-child(even) {
      transform: translateX(20%);
    }
    .flies .path.is-hidden {
      visibility: hidden;
    }
    
    .target {
      display: inline-block;
      width: 4em;
      height: 4em;
      line-height: 4em;
      text-align: center;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
    }
    
    .fly {
      z-index: 99;
      display: inline-block;
      width: 0.8em;
      height: 0.8em;
      border-radius: 50%;
      background: #000;
      border: 1px solid #000;
      will-change: transform;
      transform: translateY(50%);
    }
    .fly:before, .fly:after {
      position: absolute;
      z-index: -1;
      bottom: 50%;
      width: 0.8em;
      height: 0.5em;
      border-radius: 60%;
      background: #fff;
      border: 1px solid #000;
      will-change: transform;
      content: '';
    }
    .fly:before {
      right: 60%;
      transform: rotate(15deg);
      transform-origin: 100% 50%;
      animation: flapLeft 0.08s infinite;
    }
    .fly:after {
      left: 60%;
      transform: rotate(-15deg);
      transform-origin: 0% 50%;
      animation: flapRight 0.08s infinite;
    }
    .fly--dead {
      animation: none;
    }
    
    @keyframes fly {
      from {
        transform: translateX(-30em);
      }
      to {
        transform: translateX(30em);
      }
    }
    @keyframes flapLeft {
      from {
        transform: rotate(-15deg);
      }
      to {
        transform: rotate(25deg);
      }
    }
    @keyframes flapRight {
      from {
        transform: rotate(25deg);
      }
      to {
        transform: rotate(-15deg);
      }
    }
    @keyframes float {
      0% {
        transform: translateX(-50%) translateY(0);
      }
      50% {
        transform: translateX(-50%) translateY(0.2em);
      }
      100% {
        transform: translateX(-50%) translateY(0);
      }
    }
    .player {
      z-index: 99999;
      position: absolute;
      left: 50%;
      bottom: 2em;
      display: inline-block;
      font-size: 0.9rem;
      transform: translateX(-50%);
    }
    .player .body {
      position: relative;
      width: 6.5em;
      height: 9.75em;
      transform: translateY(0);
      transition: all 0.2s;
      background: #fff;
      border-radius: 4em 4em 4em 4em / 3em 3em 2em 2em;
      border: 1px solid black;
      will-change: transform;
    }
    .light .player .body {
      background: #9fb761;
    }
    .dark .player .body {
      background: #7f9761;
    }
    .player.is-active .body {
      animation: body 0.25s;
    }
    .player .belly {
      position: absolute;
      z-index: 1;
      left: 50%;
      height: 50%;
      bottom: -0.5em;
      left: 0.25em;
      right: 0.25em;
      background: #fff;
      border-bottom: 1px solid #000;
      border-radius: 0 0 50% 50% / 0 0 1em 1em;
    }
    .light .player .belly {
      background: #f8efdf;
    }
    .dark .player .belly {
      background: #f8efdf;
    }
    .player .crown {
      display: none;
      z-index: -10;
      position: absolute;
      bottom: 100%;
      left: 50%;
      margin-bottom: 1px;
      border-width: 2em 1.5em 0;
      border-style: solid;
      border-color: transparent gold gold;
      transform: translateX(-50%);
    }
    .player .crown:before {
      position: absolute;
      bottom: 0;
      left: -1em;
      border-width: 0 1em 2em;
      border-style: solid;
      border-color: gold transparent;
      content: '';
    }
    .player .arms {
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      bottom: -0.5em;
      will-change: transform;
    }
    .player .arms .arm {
      position: absolute;
      bottom: 0em;
      width: 2.5em;
      height: 4em;
      background: #fff;
      border: 1px solid black;
    }
    .light .player .arms .arm {
      background: #9fb761;
    }
    .dark .player .arms .arm {
      background: #7f9761;
    }
    .player .arms .arm:before {
      position: absolute;
      top: -2.5em;
      width: 1em;
      height: 2.75em;
      background: #fff;
      border: 1px solid black;
      border-bottom: none;
      content: '';
    }
    .light .player .arms .arm:before {
      background: #9fb761;
    }
    .dark .player .arms .arm:before {
      background: #7f9761;
    }
    .player .arms .arm .hand {
      position: absolute;
      bottom: -0.25em;
      width: 2em;
      height: 0.5em;
      font-size: 1.25em;
      background: #fff;
      border: 1px solid black;
      border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    }
    .light .player .arms .arm .hand {
      background: #9fb761;
    }
    .dark .player .arms .arm .hand {
      background: #7f9761;
    }
    .player .arms .arm .hand .toe {
      position: absolute;
      bottom: -0.25em;
      width: 0.5em;
      height: 0.5em;
      background: #fff;
      border: 1px solid black;
      border-radius: 50%;
    }
    .light .player .arms .arm .hand .toe {
      background: #9fb761;
    }
    .dark .player .arms .arm .hand .toe {
      background: #7f9761;
    }
    .player .arms .arm .hand .toe:first-child {
      left: -0.25em;
    }
    .player .arms .arm .hand .toe:nth-child(2n) {
      z-index: 2;
      left: 50%;
      transform: translateX(-50%);
    }
    .player .arms .arm .hand .toe:last-child {
      right: -0.25em;
    }
    .player .arms .arm--left {
      left: -1em;
      margin-left: -2px;
      border-radius: 0 100% 0 70%;
    }
    .player .arms .arm--left:before {
      left: -1px;
      border-right: none;
      border-radius: 100% 0 0 0;
    }
    .player .arms .arm--left .hand {
      left: 0.5em;
      border-left: 0;
      border-radius: 0 100% 0 0;
    }
    .player .arms .arm--right {
      right: -1em;
      margin-right: -2px;
      border-radius: 100% 0 70% 0;
    }
    .player .arms .arm--right:before {
      right: -1px;
      border-left: none;
      border-radius: 0 100% 0 0;
    }
    .player .arms .arm--right .hand {
      right: 0.5em;
      border-right: 0;
      border-radius: 100% 0 0 0;
    }
    .player.is-active .arms {
      animation: arms 0.25s;
    }
    .player .legs {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -0.5em;
    }
    .player .legs .leg {
      position: absolute;
      z-index: -1;
      bottom: 0;
      width: 6em;
      height: 5em;
      transform: rotate(0);
      transform-origin: 50% 100%;
      transition: all 0.2s;
      background: #fff;
      border: 1px solid black;
      will-change: transform;
    }
    .light .player .legs .leg {
      background: #718644;
    }
    .dark .player .legs .leg {
      background: #516644;
    }
    .player .legs .leg--left {
      left: -2.5em;
      border-radius: 25% 75% 25% 75%;
    }
    .player .legs .leg--right {
      right: -2.5em;
      border-radius: 75% 25% 75% 25%;
    }
    .player.is-active .leg--left {
      animation: leftLeg 0.25s;
    }
    .player.is-active .leg--right {
      animation: rightLeg 0.25s;
    }
    .player .eyes {
      position: absolute;
      z-index: -5;
      top: 0em;
      left: 0em;
      right: 0em;
    }
    .player .eyes .eye {
      position: absolute;
      top: 0em;
      display: inline-block;
      width: 2.3em;
      height: 2.3em;
      background: #fff;
      border: 1px solid black;
      border-radius: 50%;
      overflow: hidden;
    }
    .player .eyes .eye--left {
      left: -0em;
    }
    .player .eyes .eye--right {
      right: -0em;
    }
    .player .eyes .eye:before, .player .eyes .eye:after {
      position: absolute;
      z-index: 6;
      left: 0;
      width: 100%;
      height: 50%;
      transform: translateY(1px);
      transition: all 0.2s;
      background: #fff;
      border-top: 1px solid #000;
      content: '';
      will-change: transform;
    }
    .light .player .eyes .eye:before, .light .player .eyes .eye:after {
      background: #718644;
    }
    .dark .player .eyes .eye:before, .dark .player .eyes .eye:after {
      background: #516644;
    }
    .player .eyes .eye:before {
      bottom: 100%;
      margin-bottom: 1px;
    }
    .player .eyes .eye:after {
      top: 100%;
    }
    .player .eyes .eye:hover:after {
      transform: translateY(-98%);
    }
    .player .eyes .pupil {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.4rem;
      height: 0.4rem;
      margin: -0.2em 0 0 -0.2em;
      transform: translate(0, 0);
      transition: all 0.2s;
      background: #000;
      border-radius: 4em;
      will-change: transform;
      overflow: hidden;
    }
    .player .mouth {
      position: absolute;
      z-index: 6;
      top: 3.25em;
      left: 0.5em;
      right: 0.5em;
      height: 2.25em;
      background: #000;
      border-radius: 0;
      border: 1px solid black;
      border-top: 0;
      border-bottom: 0;
    }
    .player .mouth:before {
      position: absolute;
      top: 1em;
      left: 0.5em;
      right: 0.5em;
      bottom: 0;
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
      background: #fff;
      content: '';
    }
    .light .player .mouth:before {
      background: #c8725b;
    }
    .dark .player .mouth:before {
      background: #a8525b;
    }
    .player .mouth .top-lip {
      position: absolute;
      left: -0.25em;
      right: -0.25em;
      bottom: 100%;
      height: 0;
      background: #fff;
      border-bottom: 1px solid #000;
    }
    .light .player .mouth .top-lip {
      background: #9fb761;
    }
    .dark .player .mouth .top-lip {
      background: #7f9761;
    }
    .player .mouth .bottom-lip {
      position: absolute;
      z-index: 10;
      top: -1px;
      left: -0.25em;
      right: -0.25em;
      height: 2.5em;
      margin-left: -1px;
      margin-right: -1px;
      transform: translateY(0);
      transition: all 0.25s;
      background: #fff;
      border-top: 1px solid #000;
      will-change: transform;
      border-radius: 0;
      content: '';
    }
    .light .player .mouth .bottom-lip {
      background: #f8efdf;
    }
    .dark .player .mouth .bottom-lip {
      background: #f8efdf;
    }
    .player .mouth .bottom-lip:after {
      display: none;
      position: absolute;
      top: 0.5em;
      left: 1.5em;
      right: 1.5em;
      height: 0.25em;
      border-bottom: 1px solid #000;
     .........完整代码请登录后点击上方下载按钮下载查看