js实现一个键盘控制的爬墙避障游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个键盘控制的爬墙避障游戏代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --tile-line-height: 30px;
          --tile-size: 10px;
          --clr: gray;
          --pl-clr: 
            radial-gradient(circle at 75% 50%, white 1px, transparent 2px),
            radial-gradient(circle at 25% 50%, white 1px, transparent 2px),
            radial-gradient(circle at 75% 40%, black 3px, transparent 4px),
            radial-gradient(circle at 25% 40%, black 3px, transparent 4px),
            white;
        }
        html,
        body {
          min-width: 100vw;
          min-height: 100vh;
          overflow: hidden;
          margin: 0;
          display: grid;
          place-items: center;
          background: #111;  
        }
        
        #game_console {
          width: 100%;
          max-width: 1000px;
          aspect-ratio: 16 / 9;
          position: relative;
          background: #200;  
          text-align: center;
          line-height: var(--tile-line-height);
          font-size: 0;
          color: transparent;
          user-select: none;
          box-shadow: 0 20px 20px black;
        /*   overflow: hidden; */
        }
        
        #game_alert {
          padding: 1rem 2rem;
          font-size: 16px; 
          font-family: system-ui, serif;
          line-height: 100%;
          color: white;
          background: rgba(0,0,0,.75);
        /*   box-sizing: border-box; */
          border: 1px dashed white;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%,100%);
          z-index: 99999;
          border-radius: 50px;
          transition: .5s;
          opacity: 0;
          pointer-events: none;
          user-select: none;
        }
        
        h2 {
          margin: 0;
          margin-bottom: 10px;
        }
        
        .tile {
        /*   outline: 1px dashed gray; */
        }
        
        .ground {
          background: dimgray;
          box-sizing: border-box;
          border-top: 5px solid rgba(0,0,0,.25);
          border-right: 5px solid rgba(0,0,0,.65);
          border-bottom: 5px solid rgba(0,0,0,.65);
          border-left: 5px solid rgba(0,0,0,.25);
        }
        
        .lava {
          background: silver;
          border-radius: 0 50% 50% 50%;
          transform: rotate(45deg) translate(40%,40%);
        /*   clip-path: polygon(0% 60%, 50% 0%, 100% 60%, 100% 100%, 0% 100%); */
          filter: drop-shadow(-5px -5px 5px orange);
        /*   animation: pulse 3s linear infinite; */
        }
        
        .sleft {
          transform: rotate(-45deg) translate(40%,40%);
        }
        
        @keyframes pulse {
          50% { filter: drop-shadow(-1px -1px 3px orange) }
        }
        
        #player,
        #player:after {
          content:'';
          width: 25px;
          height: 25px;
          background: transparent;
          position: absolute;
          /*   left: calc(var(--tile-line-height)*27);
          top: calc(var(--tile-line-height)*13); */
          z-index: 10000;
          pointer-events: none;
        }
        
        #player:after {
          background: var(--pl-clr);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10000;
          border-radius: 5px;
          clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 90% 80%, 90% 100%, 80% 100%, 80% 80%, 20% 80%, 20% 100%, 10% 100%, 10% 80%, 0% 80%);
          pointer-events: none;
          transform-origin: 50% 100%;
        
        }
        
        .goleft:after {
          transform: skewX(10deg);
          animation: moving .25s linear infinite;
        }
        .goright:after {
          transform: skewX(-10deg);  
          animation: moving .25s linear infinite;
        }
        @keyframes moving {
          50% {
            clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 80%, 80% 100%, 70% 100%, 70% 80%, 30% 80%, 30% 100%, 20% 100%, 20% 80%, 0% 80%)
          }
        }
        
        .trailBall {
          position: absolute;
          width: 10px;
          height: 10px;
          background: white;
          border-radius: 5px;
          opacity: .75;
          pointer-events: none;
          animation: trail 1s linear forwards;
        }
        @keyframes trail {
          100% {
            opacity: 0;
            transform: scale(0);
          }
        }
    </style>


</head>

<body>
    <!-- arrow keys to move and jump -->
    <!-- also a double jump -->
    <div id='game_console'>
        <div id='player'>
            <!--     <div id='level_mask'></div> -->
        </div>
        <!--   <div id='big_rocket'></div> -->
        <div id='game_alert'></div>
    </div>

    <script>
    const gc = document.querySelector('#game_console')
const ga = document.querySelector('#game_alert')
const gc_loc = gc.getBoundingClientRect()
const pl = document.querySelector('#player')
var cols = 40 // multiple of 16
var rows = 22 // multiple of 9
const tile_size = gc_loc.width*(100/cols/100)
const pl_size = tile_size*2
document.body.style.setProperty('--tile-line-height', pl_size+'px')

pl.style.width = tile_size + 'px'
pl.style.height = tile_size + 'px'
pl.style.top = (tile_size*2) + 'px'
pl.style.left = (tile_size*32) + 'px'

var pl_loc = pl.getBoundingClientRect() 
gc.style.width = '1000px'
gc.style.height = tile_size*rows+'px'

var gravity = 8,
    kd,
    x = pl_loc.left,
    x_speed = 5,
    pb_y = 0,
    score = 0,
    rot = 0,
    data_p = 0,
    bonus = 1,
    dead = false,
    kd_list = [],
    d = {},
    dbljump = false,
    timer = 0;

const level = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,
               0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,
               0,0,1,1,0,0,0,0,0,1,1,1,1,0,0,0,0,0,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,
               0,0,1,1,0,0,0,0,0,1,1,1,1,0,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,
               0,0,1,1,0,0,0,0,0,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,
               0,0,1,1,0,0,0,0,0,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,
               0,0,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,
               0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,
               0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,
               0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,
               0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,3,0,0,0,0,0,0,
               0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,3,0,0,0,0,0,0,
               0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,
               0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,.........完整代码请登录后点击上方下载按钮下载查看