贪吃蛇游戏：JavaScript 实现带分数、关卡的复杂贪吃蛇游戏

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
<p>.snake-block {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
}</p>
<p>.food-block {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
</style></p>
</head>
<body>
<div id="game-board"></div>
<script>
// 游戏配置
const config = {
width: 20,
height: 20,
speed: 200,
initialLength: 5,
foodCount: 10
};

// 游戏状态
const gameState = {
direction: 'right',
snake: [],
food: [],
score: 0,
level: 1
};

// 创建游戏区域
function createGameBoard() {
const gameBoard = document.getElementById('game-board');
for (let i = 0; i < config.height; i++) {
for (let j = 0; j < config.width; j++) {
const block = document.createElement('div');
block.style.top = i * 20 + 'px';
block.style.left = j * 20 + 'px';
block.classList.add('snake-block');
gameBoard.appendChild(block);
}
}
}

// 重置游戏状态
function resetGame() {
gameState.direction = 'right';
gameState.snake = [];
gameState.food = [];
gameState.score = 0;
gameState.level = 1;
const gameBoard = document.getElementById('game-board');
const snakeBlocks = document.getElementsByClassName('snake-block');
while (snakeBlocks.length > 0) {
gameBoard.removeChild(snakeBlocks[0]);
}
}

// 初始化蛇
function initSnake() {
const startX = Math.floor(config.width / 2);
const startY = Math.floor(config.height / 2);
for (let i = 0; i < config.initialLength; i++) {
const block = document.createElement('div');
block.style.top = startY * 20 + 'px';
block.style.left = (startX - i) * 20 + 'px';
block.classList.add('snake-block');
gameState.snake.push(block);
gameBoard.appendChild(block);
}
}

// 移动蛇
function moveSnake() {
const head = gameState.snake[0];
let top = parseInt(head.style.top);
let left = parseInt(head.style.left);

switch (gameState.direction) {
case 'up':
top -= 20;
break;
case 'down':
top += 20;
break;
case 'left':
left -= 20;
break;
case 'right':
left += 20;
break;
}

const newHead = document.createElement('div');
newHead.style.top = top + 'px';
newHead.style.left = left + 'px';
newHead.classList.add('snake-block');
gameState.snake.unshift(newHead);
gameBoard.appendChild(newHead);

if (!checkCollision(newHead)) {
const tail = gameState.snake.pop();
gameBoard.removeChild(tail);
}
}

// 检查碰撞
function checkCollision(newHead) {
const top = parseInt(newHead.style.top);
const left = parseInt(newHead.style.left);

if (top < 0 || top >= config.height * 20 || left < 0 || left >= config.width * 20) {
gameOver();
return true;
}

for (let i = 1; i < gameState.snake.length; i++) {
const block = gameState.snake[i];
if (block.style.top === newHead.style.top && block.style.left === newHead.style.left) {
gameOver();
return true;
}
}

if (gameState.food.length > 0 && gameState.food[0].style.top === newHead.style.top && gameState.food[0].style.left === newHead.style.left) {
eatFood();
}

return false;
}

// 生成食物
function generateFood() {
const emptyBlocks = Array.from(document.getElementsByClassName('snake-block')).filter(function (block) {
for (let i = 0; i < gameState.snake.length; i++) {
if (block.style.top === gameState.snake[i].style.top && block.style.left === gameState.snake[i].style.left) {
return false;
}
}
return true;
});

for (let i = 0; i < config.foodCount; i++) {
const index = Math.floor(Math.random() * emptyBlocks.length);
const block = document.createElement('div');
block.style.top = emptyBlocks[index].style.top;
block.style.left = emptyBlocks[index].style.left;
block.classList.add('food-block');
gameState.food.push(block);
gameBoard.appendChild(block);
}
}

// 吃食物
function eatFood() {
const food = gameState.food.shift();
gameBoard.removeChild(food);
gameState.score++;
if (gameState.score % 10 === 0) {
gameState.level++;
increaseSpeed();
}
updateScore();
}

// 增加速度
function increaseSpeed() {
clearInterval(gameInterval);
config.speed -= 20;
gameInterval = setInterval(gameLoop, config.speed);
}

// 更新分数和关卡
function updateScore() {
// 这里需要添加分数和关卡的显示区域
// 比如添加两个div元素，分别用于显示分数和关卡
// 然后使用以下代码更新显示内容
// document.getElementById('score').textContent = '分数: ' + gameState.score;
// document.getElementById('level').textContent = '关卡: ' + gameState.level;
}

// 游戏结束
function gameOver() {
clearInterval(gameInterval);
alert('游戏结束！ 分数: ' + gameState.score);
resetGame();
initSnake();
generateFood();
updateScore();
gameInterval = setInterval(gameLoop, config.speed);
}

// 游戏循环
function gameLoop() {
moveSnake();
checkCollision(gameState.snake[0]);
}

// 监听键盘事件
document.addEventListener('keydown', function (event) {
switch (event.keyCode) {
case 37: // 左
if (gameState.direction !== 'right') {
gameState.direction = 'left';
}
break;
case 38: // 上
if (gameState.direction !== 'down') {
gameState.direction = 'up';
}
break;
case 39: // 右
if (gameState.direction !== 'left') {
gameState.direction = 'right';
}
break;
case 40: // 下
if (gameState.direction !== 'up') {
gameState.direction = 'down';
}
break;
}
});

// 创建游戏区域
createGameBoard();

// 初始化蛇
const gameBoard = document.getElementById('game-board');
initSnake();

// 生成食物
generateFood();

// 更新分数和关卡
updateScore();

// 游戏循环
let gameInterval = setInterval(gameLoop, config.speed);
</script>
</body>
</html>