js+svg实现打地鼠游戏代码-html代码-BFW代码库

js+svg实现打地鼠游戏代码

代码语言：html

所属分类：游戏

代码描述：js+svg实现打地鼠游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html,
        body {
          height: 100%;
        }
        
        body {
          background-color: #4dbd76;
          background: rgb(77,189,118);
          background: radial-gradient(circle, rgba(77,189,118,1) 0%, rgba(60,136,143,1) 100%);
          font-family: "Open Sans", Arial, Helvetica, sans-serif;
        }
        
        .game {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          display: grid;
          grid-template-rows: auto 1fr 40px;
          justify-items: center;
          padding: 20px 10px;
        }
        
        .title {
          font-family: Modak, sans-serif;
          color: #ff8c00;
          font-size: 36px;
          letter-spacing: 2px;
          text-shadow: 1px 1px rgb(123, 67, 0);
          text-transform: uppercase;
        }
        
        .scoreboard {
          width: 100%;
          text-align: center;
          color: #FFF;
          font-size: 18px;
          display: flex;
          justify-content: space-around;
        }
        
        .start {
          position: relative;
          top: -20px;
          background-color: darkorange;
          color: #FFF;
          letter-spacing: 2px;
          font-weight: 600;
          font-size: 20px;
          border-radius: 4px;
          padding: 6px 20px;
          border: none;
          box-sizing: border-box;
          height: 40px;
          width: 200px;
          box-shadow: 2px 2px 4px rgb(123, 67, 0);
          text-shadow: -1px -1px rgba(0,0,0,0.3);
          cursor: pointer;
        }
        
        .start:focus {
          outline: none;
        }
        
        .start:active {
          box-shadow: inset 1px 1px 1px rgba(123, 67, 0, 0.49);
          outline: none;
        }
        
        @keyframes shake {
          45% { transform: translateX(0); }
          50% { transform: translateX(-6px); }
          60% { transform: translateX(6px); }
          65% { transform: translateX(0); }
        }
        
        .shake {
          animation: shake 300ms li.........完整代码请登录后点击上方下载按钮下载查看