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