js实现一个万圣节幽灵碰撞游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个万圣节幽灵碰撞游戏代码，按住鼠标左键不放让幽灵减速防止撞上按键盘空格键开始或重新开始。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        html {
          background:#003232;
          font-family: system-ui;
          --car-rot: rotate(0deg);
          --en-rot: rotate(0deg);
        }
        
        body:after {
          content: '';
          position: fixed;
          inset: 0;
          z-index: 9999;

          font-family: system-ui;
          animation: clouds 25s linear infinite;
          pointer-events: none;
          filter: blur(3px);
        }
        @keyframes clouds {
          100% {
            background-position: 1200px 0;
          }
        }
        
        #instructions {
          background: rgba(0,0,0,.25);
          color: lightgray;
          padding: 1rem 2rem;
          max-width: 300px;
          position: fixed;
          bottom: 1rem;
          left: 1rem;
          border-radius: 5px;
          z-index: 2000;
        }
        
        #game_box {
          position: fixed;
          inset: 0;
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          justify-content: center;
          align-content: center;
          align-items: center;
        }
        
        .tree {
          position: absolute;
          width: 5vmin;
          aspect-ratio: 1/1.25;
          z-index: 999;
        }
        .tree:before {
          content:'';
          width: 100%;
          height: 100%;
          background: black;
          clip-path: polygon(10% 0%, 90% 0%, 90% 90%, 100% 90%, 100% 100%, 0% 100%, 0% 90%, 10% 90%);
          position: absolute;
          left: 0;
          top: 0;
          transform-origin: 50% 100%;
          transform: skewX(45deg) scaleY(.5) translateX(-20%);
          border-radius: 50% 50% 0 0 / 25% 25% 0 0;
          opacity: .25;
        }
        .tree:after {
          content:'RIP';
          width: 100%;
          height: 100%;
          background: 
            linear-gradient(to right, rgba(0,0,0,.5), transparent 70%),
            gray;
          clip-path: polygon(10% 0%, 90% 0%, 90% 90%, 100% 90%, 100% 100%, 0% 100%, 0% 90%, 10% 90%);
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 50% 50% 0 0 / 25% 25% 0 0;
          text-align: center;
          line-height: 5vmin;
          font-family: serif;
          color: #333;
        }
        
        #laps_count {
          position: fixed;
          left: 50%;
          top: 15%;
          transform: translateX(-50%);
          color: gray;
          font-size: 2rem;
          font-family: system-ui;
          z-index: 1000;
        }
        
        .track {
          width: 120vmin;
          aspect-ratio: 2/1;
          position: absolute;
          /*   outline: 1px solid red; */
          background: 
            radial-gradient(circle at 38% 50%, transparent 23%, #492e27 23.1% 37%, transparent 37.1%),
            radial-gradient(circle at 62% 50%, transparent 23%, #492e27 23.1% 37%, transparent 37.1%);
          background-repeat: no-repeat;
          filter: 
            drop-shadow(2px 2px #3d241e)
            drop-shadow(-2px 2px #3d241e)
            drop-shadow(2px -2px #3d241e)
            drop-shadow(-2px -2px #3d241e)
            drop-shadow(4px 4px #492e27)
            drop-shadow(-4px 4px #492e27)
            drop-shadow(4px -4px #492e27)
            drop-shadow(-4px -4px #492e27)
            drop-shadow(0 10px rgba(0,0,0,.5))
            drop-shadow(0 -5px rgba(0,0,0,.25));
        }
        
        .half {
          width: 60vmin;
          aspect-ratio: 1/1;
          position: relative;
        }
        
        #playa,
        #not_playa {
          width: 80%;
          aspect-ratio: 1/1;
          /*   outline: 1px solid red; */
          position: absolute;
          left: 36%;
          top: 10%;
          transform: var(--car-rot);
          z-index: 100;
        }
        
        #not_playa {
          left: -16%;
          transform: var(--en-rot);
          animation: en_cars 3s linear infinite;
        }
        @keyframes en_cars {
          100% { transform: rotate(360deg); }
        }
        
        #car,
        .en_car {
          width: 5vmin;
          aspect-ratio: 1/1.25;
          position: absolute;
          top: calc(50% - 50px);
          left: -25px;
          /*   filter: drop-shadow(5px 5px rgba(0,0,0,.25)); */
        }
        
        #car {
          filter: drop-shadow(0 10px rgba(0,0,0,.25));
        }
        #car:after {
          content: '';
          width: 100%;
          height: 100%;
          background-color: white;
          background-image: 
            radial-gradient(circle at 33% 25%, black 9%, transparent 10%),
            radial-gradient(circle at 66% 25%, black 9%, transparent 10%);
          border-radius: 45% 45% 0 0;
          position: absolute;
          left: 0;
          top: 0;
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 80%, 50% 100%, 25% 80%, 0% 100%)
        }
        
        .en_car:nth-child(1) {
          display: none;
          filter: drop-shadow(0px 10px rgba(0,0,0,.25));
        }
        .en_car:nth-child(1):before {
          content:'';
          width: 100%;
          height: 160%;
          background: 
            linear-gradient(to top, goldenrod 40%, saddlebrown 40%);
          position: absolute;
          left: 0;
          top: -20%;
          clip-path: polygon(45% 0%, 55% 0%, 55% 60%, 75% 100%, 62.5% 90%, 50% 100%, 37.5% 90%, 25% 100%, 45% 60%);  
        }
        .en_car:nth-child(1):after {
          content:'';
          width: 100%;
          height: 100%;
          background:
            radial-gradient(40% 20% at 48% 18%, black 50%, transparent 50%),
            radial-gradient(40% 25% at 50% 20%, indigo 50%, transparent 50%),
            radial-gradient(100% 50% at 50% 25%, black 50%, transparent 50%),
            conic-gradient(at 50% 25%, transparent 150deg, black 150deg 210deg, transparent 210deg);
          background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
          background-repeat: no-repeat;
          background-position: 0 0, 0 0, 0 0, 50% 50%;
          position: absolute;
          left: 0;
          top: 0;
        }
        .en_car:nth-child(1) {
        
        }
        #pumpkin {
          display: none; 
          aspect-ratio: 1/1;
          background:
            radial-gradient(circle at 33% 35%, black 7%, transparent 7%),
            radial-gradient(circle at 66% 35%, black 7%, transparent 7%),
            radial-gradient(circle at 50% 50%, black 7%, transparent 7%),
            radial-gradient(75% 15% at 50% 75%, black 33%, transparent 33%),
            radial-gradient(50% 90% at 25% 55%, darkorange 50%, transparent 50%),
            radial-gradient(50% 90% at 50% 55%, darkorange 50%, transparent 50.........完整代码请登录后点击上方下载按钮下载查看