js实现蜗牛跳跃避障类小游戏代码-html代码-BFW代码库

js实现蜗牛跳跃避障类小游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现蜗牛跳跃避障类小游戏代码，单击鼠标蜗牛跳跃避开坑。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html {
          min-height: 100vh;
          display: grid;
          place-items: center;
          font-family: system-ui;
          font-size: 12px;
          background: #444;  
          color: #aaa;
        }
        
        #game_console {
          width: 600px;
          max-width: 100%;
          aspect-ratio: 1 / 1;
          position: relative;
          background:
            linear-gradient(to bottom, navy, magenta);  
          image-rendering: pixelated;  
          overflow: hidden;
          box-shadow: 0 10px 15px rgba(0,0,0,.5);
        }
        
        #player {
          width: 35px;
          aspect-ratio: 1 / 1;
          background:     url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJQTFRFaZUvrnQYAAAAjMY/+7A7AAAAI4gCxgAAAAZ0Uk5T//////8As7+kvwAAAGdJREFUeNrMkt0OwDAERs2n7//KY1j6w653Ek2aEw2FxgmgQVQJtjAjSRiPLyMzm7mS00TCY+Ck8YzSSJzArw3z1k9jZHmNleXfDjNNAVgq6A0KbBjEVKBC94Brhu+O1fISl97cAgwAZ+oIf1jG0V0AAAAASUVORK5CYII=');
          background-size: 100% 100%;
          position: absolute;
          left: 25%;
          top: 48.5%;
          pointer-events: none;
          z-index: 100;
          animation: snail .2s linear infinite;
        }
        @keyframes snail {
          50% {
            width: 36px;
          }
        }
        
        .pl_jump {
          animation: pl_jump 1s linear forwards !important;
        }
        @keyframes pl_jump {
          40% { transform: translateY(-250%) rotate(-180deg); }
          100% { transform: translateY(0%) rotate(-360deg); }
        }
        
        #the_ground {
          width: 200%;
          height: 200%;
          background: 
            linear-gradient(to bottom, green 2px, #630 2px 25px, green 26px);
          position: absolute;
          left: -50%;
          top: calc(50% + 12.5px);
          transform-origin: 37.5% 0%;
          transform: rotate(20deg);
          transition: 3s;
        }
        
        .gap {
          width: 150px;
          height: 100%;
          position: absolute;
          left: 100%;
          top: 0%;
          background:
            linear-gradient(to bottom, navy, magenta);
          animation: gap 2.5s linear forwards;
        }
        @keyframes gap {
          100% { left: -176px; }
        }
        
        .coin {
          position: absolute;
          left: 100%;
          top: -50px;
          animation: gap 3s linear forwards;
          z-index: 100;
        }
        .coin:after {
          content:'';
          width: 25px;
          aspect-ratio: 1 / 1;
          background: gold;
          border-radius: 50%;
          box-shadow: inset -3px -3px goldenrod;
          position: absolute;
          left: 0;
          top: 0;
          animation: coin .5s linear infinite;
        }
        @keyframes coin {
          50% { transform: scale(1.1); }
        }
        
        .gotcha:after {
          content: '25';
          color: gold;
          text-align: center;
          background:
            radial-gradient(circle at 25% 25%, gold 3px, transparent 3px),
            radial-gradient(circle at 75% 25%, gold 3px, transparent 3px),
            radial-gradient(circle at 50% 50%, gold 3px, transparent 3px),
            radial-gradient(circle at 25% 75%, gold 3px, transparent 3px),
            radial-gradient(circle at 75% 75%, gold 3px, transparent 3px) !important;
          box-shadow: none !important;
        }
        
        .so_dead * {
          animation-play-state: paused;
        }
        .so_dead #player {
          filter: hue-rotate(270deg);
          transform: scaleY(-1);
          animation: so-dead 2s linear forwards;
        .........完整代码请登录后点击上方下载按钮下载查看