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

jquery实现贪吃蛇小游戏代码

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