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

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

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