使用checkbox标签+js实现贪吃蛇小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：使用checkbox标签+js实现贪吃蛇小游戏代码，全部是checkbox标签排列出，通过js来实现。

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

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

<head>
  <meta charset="UTF-8">
  

  <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">


<style>
*, *::before, *::after {
  font-family: inherit;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

:where(html) {
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 62.5%;
}

:where(html body) {
  font-size: 1.6rem;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

:where(ul) {
  list-style: none;
}

:where(a, a:link, a:visited) {
  text-decoration: none;
}
</style>
  
  
  
<style>
body {
  background-color: #aaa;
}

main {
  position: relative;
  padding: 1rem;
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  overflow: hidden;
  background-color: #f9f9f9;
}
main.finished .game-over {
  display: flex;
}
main .game {
  display: grid;
  grid-template-columns: repeat(var(--width), -webkit-min-content);
  grid-template-columns: repeat(var(--width), min-content);
}
main .game span {
  display: flex;
}
main .game span input {
  outline: none;
}
main .game span.empty input[type=radio] {
  display: none;
}
main .game span.snake input[type=radio] {
  display: none;
}
main .game span.snake-head {
  filter: brightness(0.85);
}
main .game span.fruit input[type=checkbox] {
  display: none;
}
main .game-over {
  color: #333;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
main .game-over button {
  color: #333;
  padding: 4px 1rem;
  font-size: 2rem;
  cursor: pointer;
}
</style>


  
  
</head>

<body translate="no">
  <main>
	<div class="game"></div>
	<div class="game-over">
		<h2>GAME OVER</h2>
		<p>Your score: <span id="score">0</span></p>
		<button id="restart">Restart</button>
	</div>
</main>
  
      <script>
// LOL
Number.prototype[Symbol.iterator] = function* () {yield* Array.from({ length: this }, (_, i) => i);};

// Config
const WIDTH = 32;
const HEIGHT = 24;
const START_LENGTH = 5;
const START_POS = [2, ~~(HEIGHT / 2)];
const MIN_TPS = 5;
const MAX_TPS = 20;

(() => {
  const CELL_MAP = {};
  const SNAKE_HEAD = Symbol();
  const SNAKE = Symbol();
  const FRUIT = Symbol();
  const EMPTY = Symbol();

  let inputSequence = [];
  let dir = 'R';
  let snake = [];
  let isGameOver = false;
  let fruit;
  let score = 0;
  let tps = MIN_TPS;
  let started = false;

  const $main = document.querySelector('main');
  const $game = $main.querySelector('.game');
  const $score = $main.querySelector('#score');
  const $restart = $main.querySelector('#restart');

  document.addEventListener('keydown', e => {
    e.preventDefault();
    const { key } = e;
    if (['w', 'ArrowUp'].includes(key) && !inputSequence.includes('U') && (inputSequence.at(-1) || dir) !== 'D') {
      inputSequence.push('U');
    } else if (['s', 'ArrowDown'].includes(key) && !inputSequence.includes('D') && (inputSequence.at(-1) || dir) !== 'U') {
      inputSequence.push('D');
    } else if (['a', 'ArrowLeft'].includes(key) && !inputSequence.includes('L') && (inputSequence.at(-1) || dir) !== 'R') {
      inputSequence.push('L');
    } else if (['d', 'ArrowRight'].in.........完整代码请登录后点击上方下载按钮下载查看