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

js+css实现青蛙吃害虫游戏代码

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