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

代码语言：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 linear;
        }
        
        .field {
          width: 100%;
          max-width: 360px;
          margin: auto;
          position: relative;
          top: -30px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          justify-content: center;
          align-content: center;
        }
        
        .dino {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 110px;
          position: relative;
        }
        
        .dino:nth-child(3n),
        .dino:nth-child(3n+1){
          position: relative;
          top: 60px;
        }
        
        .dino:last-child {
          grid-column-start: 2;
          top: 0;
        }
        
        @keyframes fadeUp {
          from { 
            transform: translateY(0) scale(1); 
            opacity: 0;
          }
          to { 
            transform: translateY(-15px) scale(1.2); 
            opacity: 1;
          }
        }
        
        .fadeUp {
          animation: fadeUp 500ms ease-out;
        }
        
        .points {
          position: absolute;
          top: 0;
          opacity: 0;
          color: #ffeb3b;
          text-shadow: 1px 1px #000;
          font-family: monospace;
          font-size: 1.4em;
          font-weight: bold;
          z-index: 1;
          pointer-events: none;
        }
        
        .points--red {
          color: #EF5350;
        }
        
        @keyframes slowly-peeking {
          0% { transform: translateY(80%); }
          20% { transform: translateY(80%); }
          40% { transform: translateY(10%); }
          42% { transform: translateY(25%); }
          70% { transform: translateY(25%); }
          90% { transform: translateY(-26%); }
          97.5% { transform: translateY(-26%); }
          99% { transform: translateY(-34%); }
          100% { transform: translateY(80%); }
        }
        
        @keyframes peeking {
          10% { transform: translateY(80%); }
          25% { transform: translateY(-26%); }
          27.5% { transform: translateY(-26%); }
          29% { transform: translateY(-26%); }
          30% { transform: translateY(-26%); }
          34% { transform: translateY(-34%); }
          36% { transform: translateY(80%); }
        }
        
        .dino #Dino {
          transform: translateY(80%);
          animation: slowly-peeking 10s infinite;
        }
        
        .no-touch .dino #Dino {
          cursor: pointer;
        }
        
        svg {
          user-select: none;
          outline: none;
        }
        
        .hide {
          visibility: hidden;
          pointer-events: none;
        }
    </style>



</head>

<body translate="no">
    <div class="game">
        <header>
            <div class="title">Whack a Dino!</div>

            <div class="scoreboard">
                <div>Score: <span class="score">0</span></div>
                <div>Time: <span class="time">60</span>s</div>
            </div>
        </header>

        <div class="field">
            <div class="dino dino--original">
                <div class="points">100</div>

                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="158.22 300.71 109.78 106.41" width="109.78" height="106.41">
    <clipPath id="_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl">
        <path d=" M 178.312 390.733 Q 171.834 390.756 158.355 390.818 L 158.22 300.71 L 267.759 300.71 L 268 390.818 L 247.86 390.728 C 247.759 399.508 232.844 407.191 213.092 407.12 C 196.053 407.058 178.797 401.189 178.312 390.733 Z "
            id="PeekingDino_2" fill="rgb(255,255,255)" />
    </clipPath>
    <g clip-path="url(#_clipPath_iyFpZlomJkfyPxMy5FoWrjPUsTxfrOtl)">
        <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445"
            ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)" />
        <clipPath id="_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="390.81926107003596" rx="34.697922494492445"
                ry="16.319261070035964" id="Hole" fill="rgb(93,93,93)" />
        </clipPath>
        <g clip-path="url(#_clipPath_c8QjgyLlDC94cLkhLSUMTysbC6Mandia)">
            <ellipse vector-effect="non-scaling-stroke" cx="213.1098590741296" cy="394.1380159686848" rx="34.29522846510352"
                ry="16.129864457083556" id="Hole" fill="rgb(66,66,66)" />
        </g>
        <g id="Dino">
            <path d=" M 190.327 384.232 Q 186.998 388.948 187.29 390.208 C 187.582 391.467 188.151 392.021 188.974 392.366 C 189.797 392.71 191.038 392.77 191.88 392.42 Q 192.722 392.069 194.671 386.471 L 190.327 384.232 Z "
                id="Tongue" fill="rgb(238,81,76)" />
            <path d=" M 214.125 389.974 C 207.37 390.312 197.102 389.435 193.051 387.694 C 189 385.952 185.97 383.401 186.005 379.4 C 186.04 375.399 187.605 373.809 190.296 371.564 Q 192.987 369.319 201.851 365.854 Q 205.274 350.138 217.354 350.886 C 225.398 351.384 230.929 356.109 233.406 363.676 Q 235.884 371.243 236.811 384.884 L 239.127 441.617 L 215.28 444.213 Q 214.732 389.944 214.125 389.974 Z "
                id="Path" fill="rgb(216,69,1)" />
            <g id="Eyes">
                <ellipse vector-effect="non-scaling-stroke" cx="204.3797819812316" cy="368.16127867739544" rx="2.8239805295291376"
                    ry="2.626211886374506" id="Ellipse" fill="rgb(0,0,0)" />
                <ellipse vector-effect="non-scaling-stroke" cx="212.10226315782975" cy="370.66722008910335" rx="2.8239805295291376"
                    ry="2.626211886374506" id="Ellipse" fill="rgb(0,0,0)" />
            </g>
            <g id="DeadEyes">
                <g id="Group">
                    <line x1="209.67" y1="373.026" x2="214.422" y2="368.251" id="Path" vector-effect="non-scaling-stroke"
                        stroke-width="1.8" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square"
                        stroke-miterlimit="3" />
                    <line x1="209.67" y1="368.251" x2="214.422" y2="373.026" id="Path" vector-effect="non-scaling-stroke"
                        stroke-width="1.8" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square"
                        stroke-miterlimit="3" />
                </g>
                <g id="Group">
                    <line x1="201.911" y1="370.345" x2="206.662" y2="365.57" id="Path" vector-effect="non-scaling-stroke"
                        stroke-width="1.8" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square"
                        stroke-miterlimit="3" />
                    <line x1="201.911" y1="365.57" x2="206.662" y2="370.345" id="Path" vector-effect="non-scaling-stroke"
                        stroke-width="1.8" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="square"
                        stroke-miterlimit="3" />
                </g>
            </g>
            <g id="Nose">
                <g opacity="0.43" style="mix-blend-mode:multiply;">
                    <ellipse vector-effect="non-scaling-stroke" cx="189.71371108737117" cy="374.86898280034245" rx="1.4166421843752346"
                        ry="0.9380682199951593" id="Ellipse" fill="rgb(0,0,0)" />
                </g>
                <g opacity="0.43" style="mix-b.........完整代码请登录后点击上方下载按钮下载查看