css+js实现一款开车节油小游戏-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：css+js实现一款开车节油小游戏，速度控制在中间可跑的更远。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --speed: rotate(0deg);
          --fuel: rotate(100deg);
          --bg-speed: 0s;
          --carDisplay: none;
          --purple: indigo;
          --pink: DeepPink;
          --aqua: aqua;
        }
        html {
          min-height: 100vh;
          display: grid;
          place-items: center;
          background: 
            linear-gradient(to bottom right, #111 33%, indigo);
        }
        * {
          user-select: none;
        }
        
        body {
          width: 100%;
          max-width: 1000px;
        }
        
        img {
          margin: 0 auto;
          display: grid;
        }
        #console {
          width: 100%;
          height: 400px;
          position: relative;
          background:
            radial-gradient(circle, transparent 60%, black),
            url('//repo.bfw.wiki/bfwrepo/image/622fcc9aac0c2.png');
          background-repeat: repeat-y;
          background-size: 1000px 400px;
          background-position: 50% 0px;
          border-radius: 4px;
          box-shadow: 0 10px 20px rgba(0,0,0,.5);
        }
        
        #console * {
          user-select: none;
        }
        
        #start_screen {
          width: 300px;
          padding: 1rem;
          font-family: system-ui;
          border-radius: 4px;
          background: black;
          text-align: center;
          font-size: 28px;
          letter-spacing: 3px;
          font-weight: 900;
          color: white;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-25%);
          box-shadow: 0px 0px 0px 3px var(--pink);
          cursor: pointer;
          box-sizing: border-box;
        }
        
        #start_screen p {
          font-size: 15px;
          font-weight: 100;
          letter-spacing: 1px;
          line-height: 150%;
        }
        #start_screen p span {
          width: 15px;
          height: 15px;
          display: inline-block;
          background: var(--aqua);
          clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);
        }
        
        #game_vehicle {
          width: 150px;
          height: 150px;
          background: 
            url('//repo.bfw.wiki/bfwrepo/image/622fccbc72826.png');
          background-size: contain;
          position: absolute;
          left: calc(50% - 75px);
          bottom: 25px;  
        }
        .bounce {
          animation: bounce 1s linear infinite;
        }
        @keyframes bounce {
          50% { transform: scale(1.05); } 
        }
        
        .gauge,
        #speed {
          width: 125px;
          aspect-ratio: 1 / 1;  
          border-radius: 50%;
          box-sizing: border-box;
          position: absolute;
        }
        .gauge:after {
          content: '';
          width: 50px;
          height: 5px;
          background: white;
          position: absolute;
          top: calc(50% - 2.5px);
          left: calc(50% - 50px);
          border-radius: 100% 0 0 100%;
          transform-origin: 100% 50%;  
          clip-path: polygon(0% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%);
        }
        
        #speed {
          left: calc(50% - 85px);
          top: 10px;
          background: 
            radial-gradient(circle at 50% 50%, white 7%, black 8%, black 45%, transparent 46%),
            conic-gradient(var(--aqua) 10deg, var(--purple) 11deg 51deg, var(--pink) 90deg, transparent 91deg 270deg, var(--pink) 271deg, var(--purple) 301deg 349deg, var(--aqua) 350deg);
          border: 3px solid black;
          background-color: rgba(0,0,0,1);
          backdrop-filter: blur(4px);
          box-shadow:
            0px 0 0 1px #333,
            -10px 0 20px rgba(0,0,0,.5);
        }
        #speed:before {
          content: 'MPG';
          width: 100%;
          font-size: 14px;
          text-align: center;
          color: white;
          position: absolute;
          left: 0;
          top: 34px;
          font-family: system-ui;
          line-height: 100%;
        }
        
        #fuel {
          left: calc(50% - 30px);
          top: 10px;
          background: 
            radial-gradient(circle at 50% 70%, black 60%, transparent 51%),
            conic-gradient(black 40deg 90deg, var(--pink) 90deg 270deg, var(--aqua) 360deg, black 360deg),    
            red;
          transform: rotate(235deg) scaleY(-1) scale(.8);
          border: 3px solid black;
          box-shadow: -10px 0 20px rgba(0,0,0,.5);
        }
        #fuel:before {
          content: 'F'; 
          filter: grayscale(1) contrast(200%);
          font-size: 18px;
          text-align: center;
          color: white;
          position: absolute;
          left: 70px;
          top: 10px;
          font-family: system-ui;
          line-height: 100%;
          transform: rotate(-125deg) scaleY(-1);
        }
        #fuel:after {
          transform: var(--fuel);
        }
        
        #speed_needle {
          width: 50px;
          height: 5px;
          background: 
            white;
          position: absolute;
          top: calc(50% - 2.5px);
          left: calc(50% - 50px);
          transform-origin: 100% 50%;
          transform: var(--speed);
          pointer-events: none;
          clip-path: polygon(0% 50%, 25% 0%, 100% 0%, 100% 100%, 25% 100%);
        }
        
        #travel_dist {
          width: 100%;
          font-size: 18px;
          text-align: center;
          color: white;
          position: absolute;
          left: 0;
       .........完整代码请登录后点击上方下载按钮下载查看