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

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

代码语言：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: '.........完整代码请登录后点击上方下载按钮下载查看