最后放出网页代码
贪吃蛇游戏
canvas {
border: 2px solid #333;
background-color: #f0f0f0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
background-color: #f5f6fa;
}
#controlPanel {
margin: 15px 0;
}
#startBtn {
padding: 12px 30px;
font-size: 18px;
background: #2ecc71;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#startBtn:hover {
background: #27ae60;
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
#score {
font-size: 24px;
color: #2c3e50;
margin: 10px 0;
}
经典贪吃蛇
得分: 0
开始游戏
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const startBtn = document.getElementById('startBtn');
// 游戏参数配置
const config = {
gridSize: 20,
initSpeed: 150,
snakeColor: '#2ecc71',
foodColor: '#e74c3c',
backgroundColor: '#f0f0f0'
};
// 游戏状态
let gameState = {
snake: [],
food: { x: 0, y: 0 },
dx: 0,
dy: 0,
score: 0,
gameLoop: null,
isPaused: false
};
// 初始化游戏
function initGame() {
// 重置游戏状态
gameState = {
snake: [{ x: 10, y: 10 }],
food: generateFood(),
dx: 1, // 初始向右移动
dy: 0,
score: 0,
gameLoop: null,
isPaused: false
};
scoreElement.textContent = `得分: 0`;
startBtn.style.display = 'none';
if (gameState.gameLoop) clearInterval(gameState.gameLoop);
gameState.gameLoop = setInterval(gameLoop, config.initSpeed);
}
// 生成食物（优化算法）
function generateFood() {
let newFood;
const maxAttempts = 1000;
let attempts = 0;
do {
newFood = {
x: Math.floor(Math.random() * (canvas.width / config.gridSize)),
y: Math.floor(Math.random() * (canvas.height / config.gridSize))
};
attempts++;
} while (
gameState.snake.some(segment =>
segment.x === newFood.x &&
segment.y === newFood.y
) && attempts < maxAttempts
);
return newFood;
}
// 主游戏循环
function gameLoop() {
if (gameState.isPaused) return;
const newHead = {
x: gameState.snake[0].x + gameState.dx,
y: gameState.snake[0].y + gameState.dy
};
// 碰撞检测
if (checkCollision(newHead)) {
return gameOver();
}
gameState.snake.unshift(newHead);
// 食物检测
if (newHead.x === gameState.food.x && newHead.y === gameState.food.y) {
gameState.score += 10;
scoreElement.textContent = `得分: ${gameState.score}`;
gameState.food = generateFood();
} else {
gameState.snake.pop();
}
drawGame();
}
// 碰撞检测函数
function checkCollision(head) {
// 边界检测
if (head.x = canvas.width / config.gridSize ||
head.y = canvas.height / config.gridSize) {
return true;
}
// 自身碰撞检测（跳过头部）
return gameState.snake.some((segment, index) =>
index > 0 &&
segment.x === head.x &&
segment.y === head.y
);
}
// 绘制游戏画面
function drawGame() {
// 清空画布
ctx.fillStyle = config.backgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制食物
ctx.fillStyle = config.foodColor;
ctx.fillRect(
gameState.food.x * config.gridSize,
gameState.food.y * config.gridSize,
config.gridSize - 2,
config.gridSize - 2
);
// 绘制蛇
gameState.snake.forEach((segment, index) => {
ctx.fillStyle = index === 0 ?
config.snakeColor :
shadeColor(config.snakeColor, -20);
ctx.fillRect(
segment.x * config.gridSize,
segment.y * config.gridSize,
config.gridSize - 2,
config.gridSize - 2
);
});
}
// 颜色渐变函数
function shadeColor(color, percent) {
const num = parseInt(color.replace("#",""),16);
const amt = Math.round(2.55 * percent);
const R = (num >> 16) + amt;
const G = (num >> 8 & 0x00FF) + amt;
const B = (num & 0x0000FF) + amt;
return `#${(1 <<< 24 | (R << 24 | (R < 255 ? R << 24 | (R < 255 ? R < 1 ? 0 : R : 255) << 24 | (R < 255 ? R < 1 ? 0 : R : 255) <<< 24 | (R < 255 ? R < 1 ? 0 : R : 255) << 16 |
(G < 255 ? G < 255 ? G < 1 ? 0 : G : 255) < 255 ? G < 1 ? 0 : G : 255) << 255 ? G < 1 ? 0 : G : 255) << 8 |
(B < 255 ? B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1)}`;
}
// 游戏结束处理
function gameOver() {
clearInterval(gameState.gameLoop);
startBtn.style.display = 'block';
alert(`游戏结束！最终得分: ${gameState.score}`);
}
// 键盘控制
document.addEventListener('keydown', (event) => {
if (!gameState.gameLoop) return;
switch (event.key) {
case 'ArrowUp':
if (gameState.dy !== 1) {
gameState.dx = 0;
gameState.dy = -1;
}
break;
case 'ArrowDown':
if (gameState.dy !== -1) {
gameState.dx = 0;
gameState.dy = 1;
}
break;
case 'ArrowLeft':
if (gameState.dx !== 1) {
gameState.dx = -1;
gameState.dy = 0;
}
break;
case 'ArrowRight':
if (gameState.dx !== -1) {
gameState.dx = 1;
gameState.dy = 0;
}
break;
case ' ':
gameState.isPaused = !gameState.isPaused;
break;
}
});
// 开始游戏按钮
startBtn.addEventListener('click', initGame);
它的思考能力太强了，它能自己找出代码里面的逻辑问题。
