js实现贪吃蛇小游戏效果代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现贪吃蛇小游戏效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<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: 480px) {
  #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;
  }
}
#credit {
  width: 100%;
  bottom: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: inherit;
  text-transform: uppercase;
  padding-left: 35px;
}
#credit span {
  font-size: 10px;
  margin-left: 20px;
  color: inherit;
  letter-spacing: 4px;
}
#credit 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>

  
      <script>
let replay = document.querySelector("#replay");
let score = document.querySelector("#score");
let canvas = document.createElement("canvas");
document.querySelector("#canvas").appendChild(canvas);
let ctx = canvas ? canvas.getContext("2d") : null;

function cnvRes(width = 400, height = 400) {
  ctx.canvas.width = width;
  ctx.canvas.height = height;
}
let pubVars = {
  snake: undefined,
  snakeLength: undefined,
  food: undefined,
  currentHue: undefined,
  fractions: undefined,
  historyPath: [],
  gameOver: false,
  tails: [],
  update: undefined,
  maxScore: window.localStorage.getItem("maxScore") || undefined,
  effects: [] };

let helpers = {
  collision(isSelfCol, snakeHead) {
    if (isSelfCol) {
      if (snakeHead.x == pubVars.food.x && snakeHead.y == pubVars.food.y) {
        pubVars.food.respawnFood();
        pubVars.tails.push(new Snake(pubVars.snakeLength - 1, "tail"));
        pubVars.snakeLength++;
        pubVars.snake.delay - 0.5;
      }
    } else {
      for (let i = 1; i < pubVars.historyPath.length; i++) {
        if (
        snakeHead.x == pubVars.historyPath[i].x &&
        snakeHead.y == pubVars.historyPath[i].y)
        {
          pubVars.gameOver = true;
        }
      }
    }
  },
  randHue() {
    return Math.floor(Math.random() * 360);
  },
  randCor(newCors) {
    let randX =
    Math.floor(Math.random() * pubVars.fractions) * ctx.canvas.width /
    pubVars.fractions;
    let randY =
    Math.floor(Math.random() * pubVars.fractions) * ctx.canvas.height /
    pubVars.fractions;

    if (newCors) {
      randX =
      Math.floor(Math.random() * pubVars.fractions) * ctx.canvas.width /
      pubVars.fractions;
      randY =
      Math.floor(Math.random() * pubVars.fractions) * ctx.canvas.height /
      pubVars.fractions;
      return { randX, randY };
    } else {
      return { randX, randY };
    }
  },
  positionLogger(limit, loc) {
    pubVars.historyPath.push(loc);
    if (pubVars.historyPath.length > limit) {
      pubVars.historyPath.shift();
    }
  },
  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 = Math.floor(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)];

  } };


let input = {
  left: false,
  down: false,
  right: true,
  up: false,
  listen() {
    addEventListener(
    "keydown",
    e => {
      switch (e.key) {
        case "ArrowLeft":
          if (!this.right) {
            this.left = true;
            this.down = false;
            this.right = false;
            this.up = false;
          }
          break;
        case "ArrowRight":
          if (!this.left) {
            this.left = false;
            this.down = false;
            this.right = true;
            this.up = false;
          }
          break;
        case "ArrowUp":
          if (!this.down) {
     .........完整代码请登录后点击上方下载按钮下载查看