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