<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>贪吃蛇</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #8b8b8b;
}
#game-board {
width: 400px;
height: 400px;
display: grid;
grid-template-columns: repeat(20, 1fr);
grid-template-rows: repeat(20, 1fr);
border: 1px solid #333;
}
.cell {
border: 0.5px solid #fff;
transition: background-color 0.1s;
}
.apple {
background-color: red;
}
.snake {
background-color: rgb(25, 193, 25);
}
.colorful-apple {
border-radius: 50%;
}
#score {
text-align: center;
color: #fff;
font-size: 24px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="game-board"></div>
<div id="score">Score: 0</div>
<script>
const board = document.getElementById("game-board");
const scoreDisplay = document.getElementById("score");
let cells = [];
let score = 0;
// 创建游戏板和单元格
for (let i = 0; i < 400; i++) {
const cell = document.createElement("div");
cell.classList.add("cell");
board.appendChild(cell);
cells.push(cell);
}
let currentSnake = [2, 1, 0]; // 初始蛇的位置
let direction = 1; // 初始移动方向
let appleIndex = 0; // 苹果位置
let speed = 300; // 初始速度
let intervalId = 0;
function startGame() {
currentSnake.forEach((index) => cells[index].classList.remove("snake"));
cells[appleIndex].classList.remove("apple");
cells[appleIndex].style.backgroundColor = ""; // 移除彩色
cells[appleIndex].classList.remove("colorful-apple");
clearInterval(intervalId);
currentSnake = [2, 1, 0];
direction = 1;
speed = 300;
score = 0;
scoreDisplay.textContent = "Score: " + score;
generateApple();
currentSnake.forEach((index) => cells[index].classList.add("snake"));
intervalId = setInterval(move, speed);
}
function move() {
// 移动逻辑
const head = currentSnake[0];
const tail = currentSnake.pop();
cells[tail].classList.remove("snake");
let nextHead;
if (direction === 1 && head % 20 !== 19) {
nextHead = head + 1;
} else if (direction === -1 && head % 20 !== 0) {
nextHead = head - 1;
} else if (direction === -20 && head >= 20) {
nextHead = head - 20;
} else if (direction === 20 && head < 380) {
nextHead = head + 20;
} else {
handleGameOver();
return;
}
if (currentSnake.includes(nextHead)) {
handleGameOver();
return;
}
if (cells[nextHead].classList.contains("colorful-apple")) {
score += 4;
scoreDisplay.textContent = "Score: " + score;
}
currentSnake.unshift(nextHead);
if (nextHead === appleIndex) {
cells[appleIndex].classList.remove("apple");
cells[appleIndex].style.backgroundColor = ""; // 移除彩色
cells[appleIndex].classList.remove("colorful-apple");
generateApple();
currentSnake.push(tail);
cells[tail].classList.add("snake");
score += 1;
scoreDisplay.textContent = "Score: " + score;
clearInterval(intervalId);
speed = speed * 0.9; // 加快速度
intervalId = setInterval(move, speed);
}
cells[currentSnake[0]].classList.add("snake");
}
function generateApple() {
appleIndex = Math.floor(Math.random() * 400);
while (cells[appleIndex].classList.contains("snake")) {
appleIndex = Math.floor(Math.random() * 400);
}
// 20%的概率生成彩色苹果
if (Math.random() < 0.2) {
cells[appleIndex].style.backgroundColor =
"rgb(" + getRandomColor() + ")";
cells[appleIndex].classList.add("colorful-apple");
} else {
cells[appleIndex].classList.add("apple");
}
}
function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `${r}, ${g}, ${b}`;
}
function control(e) {
if (e.keyCode === 37) {
direction = -1;
} else if (e.keyCode === 38) {
direction = -20;
} else if (e.keyCode === 39) {
direction = 1;
} else if (e.keyCode === 40) {
direction = 20;
}
}
function handleGameOver() {
clearInterval(intervalId);
alert("Game over! Your score is: " + score);
const restart = confirm("Do you want to restart the game?");
if (restart) {
startGame();
}
}
document.addEventListener("keyup", control);
startGame();
</script>
</body>
</html>
加强版贪吃蛇完整代码
最新推荐文章于 2024-07-13 05:22:37 发布