jquery实现贪吃蛇小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：jquery实现贪吃蛇小游戏代码，点击开始按钮即可开玩，白色方块代表蛇，彩色方块代表食物，用小键盘即可控制方向。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        @font-face {
          font-family: "game";
          src: url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;800&display=swap");
        }
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        button:focus {
          outline: 0;
        }
        
        html,
        body {
          height: 100%;
          font-family: "Poppins", sans-serif;
          color: #6e7888;
        }
        body {
          background-color: #222738;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #6e7888;
        }
        canvas {
          background-color: #181825;
        }
        .container {
          display: flex;
          width: 100%;
          height: 100%;
          flex-flow: column wrap;
          justify-content: center;
          align-items: center;
        }
        #ui {
          display: flex;
          align-items: center;
          font-size: 10px;
          flex-flow: column;
          margin-left: 10px;
        }
        h2 {
          font-weight: 200;
          transform: rotate(270deg);
        }
        #score {
          margin-top: 20px;
          font-size: 30px;
          font-weight: 800;
        }
        .noselect {
          user-select: none;
        }
        #replay {
          font-size: 10px;
          padding: 10px 20px;
          background: #6e7888;
          border: none;
          color: #222738;
          border-radius: 20px;
          font-weight: 800;
          transform: rotate(270deg);
          cursor: pointer;
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        #replay:hover {
          background: #a6aab5;
          background: #4cffd7;
          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        #replay svg {
          margin-right: 8px;
        }
        @media (max-width: 600px) {
          #replay {
            margin-bottom: 20px;
          }
          #replay,
          h2 {
            transform: rotate(0deg);
          }
          #ui {
            flex-flow: row wrap;
            margin-bottom: 20px;
          }
          #score {
            margin-top: 0;
            margin-left: 20px;
          }
          .container {
            flex-flow: column wrap;
          }
        }
        #author {
          width: 100%;
          bottom: 40px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          color: inherit;
          text-transform: uppercase;
          padding-left: 35px;
        }
        #author span {
          font-size: 10px;
          margin-left: 20px;
          color: inherit;
          letter-spacing: 4px;
        }
        #author h1 {
          font-size: 25px;
        }
        .wrapper {
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="container noselect">
        <div class="wrapper">
            <button id="replay">
      <i class="fas fa-play"></i>
      RESTART
    </button>
            <div id="canvas">

            </div>
            <div id="ui">
                <h2>SCORE
                </h2>
                <span id="score">00</span>
            </div>
        </div>
        <div id="author">
            <h1>SNAKE</h1> <span><p>小键盘方向键控制</p></span>
        </div>
    </div>

    <script>
        /** 
        This is a snake game I made with Vanilla Javascript.
        Follow me on twitter @fariatondo
        **/
        
        let dom_replay = document.querySelector("#replay");
        let dom_score = document.querySelector("#score");
        let dom_canvas = document.createElement("canvas");
        document.querySelector("#canvas").appendChild(dom_canvas);
        let CTX = dom_canvas.getContext("2d");
        
        const W = (dom_canvas.width = 400);
        const H = (dom_canvas.height = 400);
        
        let snake,
          food,
          currentHue,
          cells = 20,
          cellSize,
          isGameOver = false,
          tails = [],
          score = 00,
          maxScore = window.localStorage.getItem("maxScore") || undefined,
          particles = [],
          splashingParticleCount = 20,
          cellsCount,
          requestID;
        
        let helpers = {
          Vec: class {
            constructor(x, y) {
              this.x = x;
              this.y = y;
            }
            add(v) {
              this.x += v.x;
              this.y += v.y;
              return this;
            }
            mult(v) {
              if (v instanceof helpers.Vec) {
                this.x *= v.x;
                this.y *= v.y;
                return this;
              } else {
                this.x *= v;
                this.y *= v;
                return this;
              }
            }
          },
          isCollision(v1, v2) {
            return v1.x == v2.x && v1.y == v2.y;
          },
          garbageCollector() {
            for (let i = 0; i < particles.length; i++) {
              if (particles[i].size <= 0) {
                particles.splice(i, 1);
              }
            }
          },
          drawGrid() {
            CTX.lineWidth = 1.1;
            CTX.strokeStyle = "#232332";
            CTX.shadowBlur = 0;
            for (let i = 1; i < cells; i++) {
              let f = (W / cells) * i;
              CTX.beginPath();
              CTX.moveTo(f, 0);
              CTX.lineTo(f, H);
              CTX.stroke();
              CTX.beginPath();
              CTX.moveTo(0, f);
              CTX.lineTo(W, f);
              CTX.stroke();
              CTX.closePath();
            }
          },
          randHue() {
            return ~~(Math.random() * 360);
          },
          hsl2rgb(hue, saturation, lightness) {
            if (hue == undefined) {
              return [0, 0, 0];
            }
            var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
            var huePrime = hue / 60;
            var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
        
            huePrime = ~~huePrime;
            var red;
            var green;
            var blue;
        
            if (huePrime === 0) {
              red = chroma;
              green = secondComponent;
              blue = 0;
            } else if (huePrime === 1) {
              red = secondComponent;
              green = chroma;
              blue = 0;
            } else if (huePrime === 2) {
              red = 0;
              green = chroma;
              blue = secondComponent;
            } else if (huePrime === 3) {
              red = 0;
              green = secondComponent;
              blue = chroma;
            } else if (huePrime === 4) {
              red = secondComponent;
              green = 0;
              blue = chroma;
            } else if (huePrime === 5) {
              red = chroma;
              green = 0;
              blue = secondComponent;
            }
        
            var lightnessAdjustment = lightness - chroma / 2;
            red += lightnessAdjustment;
            green += lightnessAdjustment;
            blue += lightnessAdjustment;
        
            return [
              Math.round(red * 255),
              Math.round(green * 255),
              Math.round(blue * 255)
            ];
          },
          lerp(start, end, t) {
            return start * (1 - t) + end * t;
          }
        };
        
        let KEY = {
          ArrowUp: false,
          ArrowRight: false,
          ArrowDown: false,
          ArrowLeft: false,
          resetState() {
            this.ArrowUp = false;
            this.ArrowRight = false;
            this.ArrowDown = false;
            this.ArrowLeft = false;
.........完整代码请登录后点击上方下载按钮下载查看