<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>极简贪吃蛇游戏</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #1a1a1a;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
canvas {
background-color: #2d2d2d;
border: 2px solid #444;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.score-board {
font-size: 24px;
margin-bottom: 15px;
}
.instructions {
margin-top: 15px;
font-size: 14px;
color: #aaa;
}
</style>
</head>
<body>
<div class="score-board">得分: <span id="score">0</span></div>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div class="instructions">使用 方向键 或 WASD 控制移动,按 空格键 开始/重新开始</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const gridSize = 20; // 网格大小
const tileCount = canvas.width / gridSize; // 网格数量
let snake = [{ x: 10, y: 10 }]; // 蛇的初始位置
let food = { x: 5, y: 5 }; // 食物初始位置
let dx = 0; // x轴速度
let dy = 0; // y轴速度
let score = 0;
let gameLoop;
let isGameRunning = false;
// 绘制游戏画面
function drawGame() {
// 移动蛇
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
// 碰壁检测
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
return gameOver();
}
// 撞到自己检测
for (let segment of snake) {
if (head.x === segment.x && head.y === segment.y) {
return gameOver();
}
}
snake.unshift(head); // 将新头部加入蛇身
// 吃到食物
if (head.x === food.x && head.y === food.y) {
score++;
scoreElement.textContent = score;
generateFood();
} else {
snake.pop(); // 没吃到食物,移除尾部
}
// 清空画布
ctx.fillStyle = '#2d2d2d';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制食物
ctx.fillStyle = '#ff5555';
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
// 绘制蛇
ctx.fillStyle = '#55ff55';
snake.forEach((segment, index) => {
// 蛇头颜色稍微深一点
if (index === 0) ctx.fillStyle = '#33cc33';
else ctx.fillStyle = '#55ff55';
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
});
}
// 随机生成食物
function generateFood() {
food.x = Math.floor(Math.random() * tileCount);
food.y = Math.floor(Math.random() * tileCount);
// 确保食物不会生成在蛇身上
for (let segment of snake) {
if (food.x === segment.x && food.y === segment.y) {
generateFood();
return;
}
}
}
// 游戏结束处理
function gameOver() {
isGameRunning = false;
clearInterval(gameLoop);
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.font = '30px Arial';
ctx.textAlign = 'center';
ctx.fillText('游戏结束!', canvas.width / 2, canvas.height / 2 - 20);
ctx.font = '20px Arial';
ctx.fillText(`最终得分: ${score}`, canvas.width / 2, canvas.height / 2 + 20);
ctx.fillText('按空格键重新开始', canvas.width / 2, canvas.height / 2 + 55);
}
// 初始化/重置游戏
function initGame() {
snake = [{ x: 10, y: 10 }];
dx = 0;
dy = 0;
score = 0;
scoreElement.textContent = score;
generateFood();
if (gameLoop) clearInterval(gameLoop);
gameLoop = setInterval(drawGame, 100); // 100ms 刷新一次
isGameRunning = true;
}
// 键盘监听
document.addEventListener('keydown', (e) => {
if (!isGameRunning && e.code === 'Space') {
initGame();
return;
}
if (!isGameRunning) return;
switch(e.key) {
case 'ArrowUp': case 'w': case 'W':
if (dy === 0) { dx = 0; dy = -1; } break;
case 'ArrowDown': case 's': case 'S':
if (dy === 0) { dx = 0; dy = 1; } break;
case 'ArrowLeft': case 'a': case 'A':
if (dx === 0) { dx = -1; dy = 0; } break;
case 'ArrowRight': case 'd': case 'D':
if (dx === 0) { dx = 1; dy = 0; } break;
}
});
// 初始绘制等待界面
ctx.fillStyle = '#2d2d2d';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.font = '24px Arial';
ctx.textAlign = 'center';
ctx.fillText('按 空格键 开始游戏', canvas.width / 2, canvas.height / 2);
</script>
</body>
</html>

作者仅是分享此代码,不要去尝试,不要去尝试,不要去尝试,不然的话电脑出问题后果自己负责!!!!!!!!!!

作者只是分享,禁止尝试,否则电脑出了问题后果自负!

作者只是分享,禁止尝试,否则电脑出了问题,后果自负!!

作者只是分享,禁止尝试,否则电脑出了问题,后果自负!!!

OK?一定一定不要去尝试,否则电脑出了问题真的后果自负