aaa

张葉彬 · 发表于 2025-12-30 09:57:49

完整代码

kaia · 发表于 2025-12-30 09:58:24

张葉彬发表于 2025-12-30 09:57
完整代码

你好！下面是帮你整合后的完整“恐怖贪吃蛇加强版”游戏代码，里面包含了更多陷阱、随机元素和丰富的恐怖文字提示。你可以直接复制这段代码到一个HTML文件里，然后用浏览器打开，就能体验这个更恐怖、更刺激的贪吃蛇游戏啦！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>恐怖贪吃蛇加强版</title>
<style>
body {
background-color: black;
color: white;
text-align: center;
font-family: '微软雅黑', sans-serif;
user-select: none;
}
#gameContainer {
position: relative;
width: 400px;
margin: 20px auto;
}
#gameCanvas {
background-color: #111;
border: 3px solid darkred;
display: block;
}
#fog {
position: absolute;
top: 0; left: 0;
width: 400px; height: 400px;
pointer-events: none;
z-index: 10;
}
#status {
margin-top: 10px;
font-size: 18px;
color: red;
font-weight: bold;
height: 24px;
min-height: 24px;
user-select: none;
}
h1 {
color: crimson;
}
p.instructions {
max-width: 400px;
margin: 0 auto 10px;
font-size: 14px;
color: #f55;
line-height: 1.4;
}
</style>
</head>
<body>
<h1>恐怖贪吃蛇加强版</h1>
<p class="instructions">
用方向键控制蛇移动。<br/>
红色陷阱碰了游戏结束。<br/>
绿色食物吃了变长。<br/>
紫色恐怖元素吃了让蛇速度忽快忽慢，不可预测！<br/>
黑暗迷雾让视野受限，随机闪烁黑暗增加恐怖气氛！<br/>
游戏结束后按 R 键重置游戏。<br/>
小心！陷阱和不定的速度会让你陷入恐惧深渊……
</p>
<div id="gameContainer">
<canvas id="gameCanvas" width="400" height="400"></canvas>
</div>
<div id="status">加载中……</div>
<script>
(() => {
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 创建并添加迷雾画布
const fogCanvas = document.createElement('canvas');
fogCanvas.id = 'fog';
fogCanvas.width = canvas.width;
fogCanvas.height = canvas.height;
document.getElementById('gameContainer').appendChild(fogCanvas);
const fogCtx = fogCanvas.getContext('2d');
const gridSize = 20; // 每格大小（像素）
const tileCount = canvas.width / gridSize; // 网格数量
let snake = [];
let direction = {x: 0, y: 0};
let food = null;
let traps = [];
let horrors = [];
let speed = 200; // 初始蛇速(ms)
let gameInterval = null;
let score = 0;
let gameOver = false;
const statusDiv = document.getElementById('status');
// 恐怖提示语句库
const scaryMessages = [
"黑暗如潮水般吞噬了视线……",
"你感到背后一阵寒意，仿佛有什么盯着你……",
"步步惊心，陷阱无处不在……",
"呼吸声渐重，你的心跳加速！",
"阴风吹过，空气中弥漫着死亡的气息……",
"幽灵般的低语萦绕耳畔，令人毛骨悚然。",
"眼前模糊，仿佛进入无尽黑夜……",
"脚下的土地开始颤抖，你的身体发冷。",
"你的影子似乎活了过来，紧跟不放。",
"无形的力量牵引着你，陷入无法逃脱的深渊。",
"远方传来令人心悸的尖叫声……",
"诡异的紫光在黑暗中闪耀，警告着你。",
"每一次吞噬，都让你离死亡更近一步……"
];
// 随机返回数组中一条提示
function getRandomScaryMessage() {
return scaryMessages[Math.floor(Math.random() * scaryMessages.length)];
}
// 显示恐怖提示
function showScaryMessage() {
statusDiv.innerText = getRandomScaryMessage();
}
// 随机生成位置，避免重叠
function randomPosition() {
let pos;
do {
pos = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
} while(
snake.some(s => s.x === pos.x && s.y === pos.y) ||
(food && food.x === pos.x && food.y === pos.y) ||
traps.some(t => t.x === pos.x && t.y === pos.y) ||
horrors.some(h => h.x === pos.x && h.y === pos.y)
);
return pos;
}
function generateFood() {
food = randomPosition();
}
function generateTraps(count = 15) {
traps = [];
for(let i=0; i < count; i++) {
traps.push(randomPosition());
}
}
function generateHorrors(count = 5) {
horrors = [];
for(let i=0; i < count; i++) {
horrors.push(randomPosition());
}
}
// 迷雾效果：只显示蛇头附近一圈区域
function drawFog() {
fogCtx.clearRect(0, 0, fogCanvas.width, fogCanvas.height);
fogCtx.fillStyle = 'rgba(0,0,0,0.95)';
fogCtx.fillRect(0, 0, fogCanvas.width, fogCanvas.height);
if(snake.length === 0) return;
const head = snake[0];
const radius = 70;
const centerX = head.x * gridSize + gridSize/2;
const centerY = head.y * gridSize + gridSize/2;
const gradient = fogCtx.createRadialGradient(centerX, centerY, radius/4, centerX, centerY, radius);
gradient.addColorStop(0, 'rgba(0,0,0,0)');
gradient.addColorStop(1, 'rgba(0,0,0,0.95)');
fogCtx.globalCompositeOperation = 'destination-out';
fogCtx.fillStyle = gradient;
fogCtx.beginPath();
fogCtx.arc(centerX, centerY, radius, 0, Math.PI * 2);
fogCtx.fill();
fogCtx.globalCompositeOperation = 'source-over';
}
// 画单个格子
function drawBlock(x, y, color) {
ctx.fillStyle = color;
// 格子之间留一点间隙更清晰
ctx.fillRect(x * gridSize, y * gridSize, gridSize - 1, gridSize - 1);
}
// 绘制整个游戏画面
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if(food) drawBlock(food.x, food.y, 'limegreen'); // 食物：绿色
traps.forEach(t => drawBlock(t.x, t.y, 'red')); // 陷阱：红色
horrors.forEach(h => drawBlock(h.x, h.y, 'purple')); // 恐怖元素：紫色
// 蛇身，蛇头白色，身体灰色
snake.forEach((segment, idx) => {
const color = idx === 0 ? 'white' : 'gray';
drawBlock(segment.x, segment.y, color);
});
drawFog();
}
// 游戏结束处理
function endGame(message) {
clearInterval(gameInterval);
gameOver = true;
statusDiv.innerText = message || `游戏结束！最终得分：${score}。带着恐惧离开吧...`;
}
// 游戏主循环
function gameLoop() {
if(gameOver) return;
if(direction.x === 0 && direction.y === 0) return; // 游戏开始前静止
const head = snake[0];
const newX = head.x + direction.x;
const newY = head.y + direction.y;
// 撞墙检测
if(newX < 0 || newX >= tileCount || newY < 0 || newY >= tileCount) {
endGame("你撞上了墙壁，死亡无处逃避...");
return;
}
// 撞自己检测
if(snake.some(s => s.x === newX && s.y === newY)) {
endGame("你吞噬了自己，陷入绝望永夜...");
return;
}
// 新蛇头加入
snake.unshift({x: newX, y: newY});
// 吃食物判断
if(food && newX === food.x && newY === food.y) {
score++;
generateFood();
// 吃完食物，陷阱与恐怖元素升级
generateTraps(15 + Math.floor(score / 2));
generateHorrors(5 + Math.floor(score / 3));
// 70%几率显示恐怖话
if(Math.random() < 0.7) {
showScaryMessage();
} else {
statusDiv.innerText = `幸存者，你击败了一部分陷阱！当前分数：${score}`;
}
// 50%几率触发黑暗闪烁
if(Math.random() < 0.5) {
flickerDarkness();
}
} else {
// 没吃食物则去尾保持长度
snake.pop();
}
// 碰到陷阱导致死亡
if(traps.some(t => t.x === newX && t.y === newY)) {
endGame("陷阱抓住了你，绝望笼罩一切……");
return;
}
// 吃到恐怖元素，随机调整速度加深恐怖感
for(let i = 0; i < horrors.length; i++) {
const h = horrors[i];
if(newX === h.x && newY === h.y) {
// 随机速度变化 +-30~60 ms，限制范围50~400 ms
const change = (Math.random() < 0.5 ? -1 : 1) * (30 + Math.random() * 30);
speed = Math.min(400, Math.max(50, speed + change));
clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, speed);
const feeling = change > 0
? "你的心跳骤然加快，仿佛被什么追赶！"
: "突然一阵寒意袭来，动作变得迟缓…";
statusDiv.innerText = `${feeling} 当前速度：${Math.round(speed)}ms`;
setTimeout(() => {
showScaryMessage();
}, 1000);
horrors.splice(i, 1);
break;
}
}
drawGame();
}
// 黑暗闪烁效果，吓人用
function flickerDarkness() {
let flickerTimes = 6;
let count = 0;
const flickerInterval = setInterval(() => {
if(count % 2 === 0) {
ctx.fillStyle = 'rgba(0,0,0,0.9)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
statusDiv.innerText = "黑暗如潮水般吞噬了视线……";
} else {
drawGame();
showScaryMessage();
}
count++;
if(count > flickerTimes * 2) {
clearInterval(flickerInterval);
}
}, 150);
}
// 监听键盘事件，控制蛇移动
window.addEventListener('keydown', e => {
if(e.key === 'ArrowUp' && direction.y !== 1) {
direction = {x: 0, y: -1};
} else if(e.key === 'ArrowDown' && direction.y !== -1) {
direction = {x: 0, y: 1};
} else if(e.key === 'ArrowLeft' && direction.x !== 1) {
direction = {x: -1, y: 0};
} else if(e.key === 'ArrowRight' && direction.x !== -1) {
direction = {x: 1, y: 0};
}
// 按R键重置游戏
if(e.key.toLowerCase() === 'r' && gameOver) {
initGame();
}
});
// 初始化游戏状态
function initGame() {
snake = [{x: Math.floor(tileCount/2), y: Math.floor(tileCount/2)}];
direction = {x: 0, y: 0};
score = 0;
speed = 200;
gameOver = false;
generateFood();
generateTraps(15);
generateHorrors(5);
statusDiv.innerText = '游戏开始！用方向键控制蛇，R键重置。小心陷阱和恐怖元素！';
clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, speed);
drawGame();
}
// 启动游戏
initGame();
})();
</script>
</body>
</html>

复制代码

---

### 使用说明
- 打开页面后，使用键盘的上下左右箭头控制蛇移动。
- 绿色的是食物，吃了蛇会变长。
- 红色是陷阱，碰到游戏结束。
- 紫色恐怖元素吃了会让速度忽快忽慢，更刺激。
- 屏幕周围有浓密的迷雾，只能看到蛇头附近的小范围。
- 游戏进行中，会随机出现“黑暗闪烁”，使屏幕瞬间变暗并伴随恐怖提示文字。
- 游戏结束后按键盘 **R** 键可以重新开始游戏。

---

祝你玩得开心又刺激！如果以后想加更多功能或者做别的小游戏，随时告诉我哈！????????????

张葉彬 · 发表于 2025-12-30 10:01:35

更多功能，恐怖元素更精美

kaia · 发表于 2025-12-30 10:02:13

张葉彬发表于 2025-12-30 10:01
更多功能，恐怖元素更精美

好的！我理解你想要一个功能更多、视觉和恐怖氛围更精美的贪吃蛇游戏。由于篇幅关系，我会帮你设计并提供一个功能丰富、画面恐怖风格明显的版本，包含：

- 多种陷阱（减速、加速、毒雾陷阱）
- 恐怖音效（你可自行添加音频文件）
- 迷雾效果限制视野，可逐渐增强
- 黑屏闪烁和幽灵出现动画
- 动态恐怖文字提示
- 暗色风格主题与血液飞溅特效
- 分数连击加成机制

以下是完整HTML+CSS+JavaScript代码，打开后即可体验。如果想加音效文件，请将对应文件放在同目录下并去掉注释。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>恐怖风格贪吃蛇游戏</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
body {
margin:0; padding:0;
background: #0a0a0a;
overflow: hidden;
font-family: 'Nosifer', cursive, Arial, sans-serif;
color: #d42020;
user-select: none;
}
canvas {
background:#111;
display: block;
margin: 20px auto;
border: 3px solid #5a0b0b;
box-shadow: 0 0 20px 5px #7b1212;
}
#message {
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: #e03e3e;
text-shadow:
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 15px #aa0000;
pointer-events: none;
user-select:none;
}
#scoreboard {
position: absolute;
top: 50px;
left: 15px;
font-size: 18px;
color: #b91b1b;
text-shadow: 0 0 4px #ce2c2c;
}
</style>
</head>
<body>
<div id="message"></div>
<div id="scoreboard"></div>
<canvas id="game" width="600" height="600"></canvas>
<script>
// 设置画布和上下文
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const W = canvas.width;
const H = canvas.height;
const blockSize = 20;
const gridWidth = W / blockSize;
const gridHeight = H / blockSize;
// 变量
let snake = [{x:10,y:10}];
let direction = {x:1,y:0};
let food = {};
let traps = [];
let ghost = null;
let ghostTimer = 0;
let fogRadius = 6;
let fogMaxRadius = 6;
let fogMinRadius = 3;
let fogDirection = -0.05; // 迷雾范围变化速度
let speed = 150; // 初始速度，单位ms
let score = 0;
let combo = 0; // 连击计数
let gameover = false;
let moveInterval;
const messageDiv = document.getElementById('message');
const scoreboardDiv = document.getElementById('scoreboard');
// 预设恐怖文字数组
const terrorTexts = {
food: [
"鲜血的滋味...真甜...",
"吃下这口，你会变强！还是变弱？",
"一口毒药，一口救赎。",
"嗜血的本能被唤醒！"
],
trapHit: [
"陷阱！痛苦降临！",
"你的生命正一点点流失...",
"黑暗吞噬了你的灵魂。",
"无法逃脱的恶梦..."
],
ghostAppear: [
"幽灵出没，死神在凝视你！",
"冰冷的触感，来自阴间的问候。",
"别回头，那不是你的影子！",
"黑暗深处，有东西在盯着你..."
],
speedUp: [
"心跳加速，恐惧蔓延...",
"脑中嗡鸣，步伐狂乱。",
"速度提升，逃不掉的审判！"
],
speedDown: [
"冻结你的血液，缓慢的死亡。",
"时间拉长，恐惧无限延续。",
"变慢了，但危险没有减少..."
]
};
// 工具函数：随机整数
function randInt(min,max) {
return Math.floor(Math.random()*(max-min+1))+min;
}
// 显示恐怖文字弹幕
function showMessage(type){
const arr = terrorTexts[type];
if(!arr) return;
const txt = arr[randInt(0,arr.length-1)];
messageDiv.textContent = txt;
// 动画淡出
messageDiv.style.opacity = 1;
clearTimeout(messageDiv.timeout);
messageDiv.timeout = setTimeout(()=>{
let op = 1;
let fade = setInterval(()=>{
op -= 0.05;
if(op <= 0){
op = 0; clearInterval(fade);
}
messageDiv.style.opacity = op;
},50);
}, 2500);
}
// 初始化食物位置，避开蛇和陷阱
function placeFood(){
while(true){
let fx = randInt(0,gridWidth-1);
let fy = randInt(0,gridHeight-1);
if(snake.some(s => s.x === fx && s.y === fy)) continue;
if(traps.some(t => t.x === fx && t.y === fy)) continue;
food = {x:fx,y:fy};
break;
}
}
// 生成多重陷阱，类型不同
// types: 'slow' 渐慢陷阱，'fast' 加速陷阱， 'poison' 毒气陷阱(碰到结束)
function placeTraps(count=8){
traps = [];
let types = ['slow','fast','poison'];
while(traps.length < count){
let tx = randInt(0,gridWidth-1);
let ty = randInt(0,gridHeight-1);
if (snake.some(s=>s.x===tx&&s.y===ty)) continue;
if(food.x === tx && food.y === ty) continue;
if(traps.some(t=>t.x===tx&&t.y===ty)) continue;
let type = types[randInt(0, types.length-1)];
traps.push({x:tx,y:ty,type:type});
}
}
// 绘制迷雾效果，以蛇头为中心，半径fogRadius
function drawFog(){
let gradient = ctx.createRadialGradient(
snake[0].x*blockSize + blockSize/2,
snake[0].y*blockSize + blockSize/2,
fogRadius*blockSize*0.3,
snake[0].x*blockSize + blockSize/2,
snake[0].y*blockSize + blockSize/2,
fogRadius*blockSize
);
gradient.addColorStop(0,'rgba(10,10,10,0)');
gradient.addColorStop(1,'rgba(10,10,10,0.95)');
ctx.fillStyle = gradient;
ctx.fillRect(0,0,W,H);
}
// 绘制幽灵：半透明模糊圆圈，随机位置持续出现
function drawGhost(){
if(!ghost) return;
const alphaMax = 0.6;
let alpha = alphaMax * (1 - ghost.timer/ghost.duration);
ctx.save();
ctx.shadowColor = 'rgba(255,255,255,0.6)';
ctx.shadowBlur = 20;
ctx.globalAlpha = alpha;
ctx.fillStyle = '#eee';
ctx.beginPath();
ctx.ellipse(
ghost.x*blockSize + blockSize/2 + Math.sin(ghost.timer*0.3)*5,
ghost.y*blockSize + blockSize/2 + Math.cos(ghost.timer*0.3)*5,
blockSize*1.5,
blockSize*1,
0,0,Math.PI*2);
ctx.fill();
ctx.restore();
}
// 绘制场景
function draw(){
// 背景
ctx.fillStyle = '#111010';
ctx.fillRect(0,0,W,H);
// 绘制食物（用血红色圆珠，带光晕）
ctx.fillStyle = '#b00000';
ctx.shadowColor = '#ff0000';
ctx.shadowBlur = 8;
ctx.beginPath();
ctx.arc(food.x*blockSize+blockSize/2, food.y*blockSize+blockSize/2, blockSize/2-2, 0, Math.PI*2);
ctx.fill();
// 绘制陷阱（形状根据类型区分）
traps.forEach(t=>{
switch(t.type){
case 'slow':
ctx.fillStyle = '#003300';
ctx.shadowColor = '#00ff00';
ctx.shadowBlur = 15;
ctx.beginPath();
ctx.moveTo(t.x*blockSize+blockSize/2, t.y*blockSize+4);
ctx.lineTo(t.x*blockSize+blockSize-4, t.y*blockSize+blockSize-4);
ctx.lineTo(t.x*blockSize+4, t.y*blockSize+blockSize-4);
ctx.closePath();
ctx.fill();
ctx.shadowBlur = 0;
break;
case 'fast':
ctx.fillStyle = '#440000';
ctx.shadowColor = '#ff4400';
ctx.shadowBlur = 15;
ctx.beginPath();
ctx.arc(t.x*blockSize+blockSize/2, t.y*blockSize+blockSize/2, blockSize/3, 0, Math.PI*2);
ctx.fill();
ctx.shadowBlur = 0;
break;
case 'poison':
ctx.fillStyle = '#550055';
ctx.shadowColor = '#aa00aa';
ctx.shadowBlur = 20;
// 画骷髅样式的简单“X”
ctx.strokeStyle = '#ff00ff';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(t.x*blockSize+6, t.y*blockSize+6);
ctx.lineTo(t.x*blockSize+blockSize-6, t.y*blockSize+blockSize-6);
ctx.moveTo(t.x*blockSize+blockSize-6, t.y*blockSize+6);
ctx.lineTo(t.x*blockSize+6, t.y*blockSize+blockSize-6);
ctx.stroke();
ctx.shadowBlur = 0;
break;
}
});
// 绘制蛇（红色带血液飞溅的身体）
snake.forEach((segment,index)=>{
let x = segment.x * blockSize;
let y = segment.y * blockSize;
ctx.fillStyle = index === 0 ? '#ff0000' : '#8b0000';
ctx.shadowColor = '#ff2020';
ctx.shadowBlur = 15;
ctx.fillRect(x+2, y+2, blockSize-4, blockSize-4);
ctx.shadowBlur = 0;
// 血液飞溅效果—小红点随机散落在身体周围
if(index === 0 && Math.random() < 0.1){ // 蛇头周围效果
for(let i=0; i<3; i++){
let sx = x + randInt(2,blockSize-2);
let sy = y + randInt(2,blockSize-2);
ctx.fillStyle = `rgba(255,0,0,${Math.random()*0.8+0.2})`;
ctx.beginPath();
ctx.arc(sx, sy, randInt(1,3), 0, Math.PI*2);
ctx.fill();
}
}
});
// 绘制幽灵
if(ghost) drawGhost();
// 迷雾效果覆盖
drawFog();
// 显示得分和速度
scoreboardDiv.innerHTML = `分数: <strong>${score}</strong>   速度: <strong>${(1000/speed).toFixed(2)}</strong> 步/秒   连击: ${combo}`;
}
function resetGame(){
snake = [{x:10,y:10}];
direction = {x:1,y:0};
speed = 150;
score = 0;
combo = 0;
gameover = false;
fogRadius = fogMaxRadius;
placeFood();
placeTraps(8);
ghost = null;
ghostTimer = 0;
if(moveInterval) clearInterval(moveInterval);
moveInterval = setInterval(gameLoop, speed);
showMessage('food');
}
function gameLoop(){
if(gameover) {
return;
}
// 更新蛇头新位置
let head = {...snake[0]};
head.x += direction.x;
head.y += direction.y;
// 墙壁碰撞 -> 游戏结束
if(head.x < 0 || head.x >= gridWidth || head.y < 0 || head.y >= gridHeight){
gameOver("撞墙了！死亡降临...");
return;
}
// 自己身体碰撞 -> 游戏结束
if(snake.some(s=>s.x === head.x && s.y === head.y)){
gameOver("你咬到了自己，血流如注...");
return;
}
snake.unshift(head);
// 吃到食物
if(head.x === food.x && head.y === food.y){
score += 10 + combo*5;
combo++;
showMessage('food');
placeFood();
placeTraps(8); // 每次吃完刷新陷阱
// 进阶：迷雾变窄更恐怖
fogRadius -= 0.3;
if(fogRadius < fogMinRadius) fogRadius = fogMinRadius;
// 随机触发幽灵出现，概率30%
if(Math.random() < 0.3){
ghost = {
x: randInt(0,gridWidth-1),
y: randInt(0,gridHeight-1),
timer: 0,
duration: randInt(40,60)
};
showMessage('ghostAppear');
// 播放幽灵音效
// playSound('ghost.wav');
}
// 逐渐加快蛇速，但上限限制
speed *= 0.9;
if(speed < 40) speed = 40;
clearInterval(moveInterval);
moveInterval = setInterval(gameLoop, speed);
} else {
// 没吃到食物则移除尾巴保持长度
snake.pop();
combo = 0; // 连击断了
}
// 检测陷阱
let trapHere = traps.find(t=>t.x === head.x && t.y === head.y);
if(trapHere){
switch(trapHere.type){
case 'slow':
speed *= 1.3;
if(speed > 400) speed = 400;
showMessage('speedDown');
clearInterval(moveInterval);
moveInterval = setInterval(gameLoop, speed);
break;
case 'fast':
speed *= 0.7;
if(speed < 40) speed = 40;
showMessage('speedUp');
clearInterval(moveInterval);
moveInterval = setInterval(gameLoop, speed);
break;
case 'poison':
gameOver("你被毒气包围，窒息而死...");
return;
}
traps = traps.filter(t=>t!==trapHere); // 碰到陷阱后陷阱消失，避免重复碰撞
}
// 幽灵动画计时，到期幽灵消失
if(ghost){
ghost.timer++;
if(ghost.timer > ghost.duration){
ghost = null;
}
}
// 迷雾动态变化，让恐怖感控制视野大小
fogRadius += fogDirection;
if(fogRadius >= fogMaxRadius) {
fogRadius = fogMaxRadius; fogDirection = -fogDirection;
}
if(fogRadius <= fogMinRadius){
fogRadius = fogMinRadius; fogDirection = -fogDirection;
}
draw();
}
function gameOver(reason){
gameover = true;
showMessage('trapHit');
alert("游戏结束！\n原因：" + reason + "\n你的得分是：" + score);
resetGame();
}
// 监听按键控制方向，防止180度急转弯使蛇自杀
window.addEventListener('keydown', e=>{
if(gameover) return;
switch(e.key){
case 'ArrowUp':
case 'w':
if(direction.y !== 1) direction = {x:0,y:-1};
break;
case 'ArrowDown':
case 's':
if(direction.y !== -1) direction = {x:0,y:1};
break;
case 'ArrowLeft':
case 'a':
if(direction.x !== 1) direction = {x:-1,y:0};
break;
case 'ArrowRight':
case 'd':
if(direction.x !== -1) direction = {x:1,y:0};
break;
}
});
resetGame();
</script>
</body>
</html>

复制代码

---

### 怎么玩

- 用键盘箭头或者 WASD 控制蛇头移动。
- **红色圆点**是食物，吃了会加分，同时陷阱刷新、蛇变快、迷雾缩小，恐怖气氛加强。
- **绿色三角陷阱（slow）**：踩了让蛇变慢（更难控制），带有绿色血色氛围。
- **红色圆形陷阱（fast）**：踩了让蛇加速，速度突然提升，增加紧张感。
- **紫色叉叉陷阱（poison）**：踩上立即游戏

张葉彬 · 发表于 2026-1-6 09:41:35

增加主页面，增加更多陷阱，更精美，更多恐怖文字，更多可在主页面中选择的游戏模式和皮肤

kaia · 发表于 2026-1-6 09:42:26

张葉彬发表于 2026-01-06 09:41
增加主页面，增加更多陷阱，更精美，更多恐怖文字，更 ...

你好！你想做一个功能丰富、视觉恐怖精美，还包含主页面能选择游戏模式和皮肤的贪吃蛇游戏，这是个很棒的想法呢！由于这个项目比较大，需要用HTML、CSS和JavaScript一起写出整套代码。

我先帮你设计并写一个简化版的示范，包含以下内容：

1. **主页面**
- 可以选择不同的游戏模式（普通模式、陷阱模式、极限模式）
- 可以切换皮肤（经典蛇皮肤、恐怖风格皮肤）

2. **游戏页面**
- 根据模式增加不同数量和种类的陷阱
- 不同皮肤会改变蛇的颜色和样式
- 加入恐怖文字提示和简单动画

---

### 完整代码示范

你可以把以下代码保存为`index.html`，在浏览器打开即可体验：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>恐怖贪吃蛇 - 主页面</title>
<style>
/* 全局基础样式 */
body {
margin: 0; padding: 0;
font-family: "黑体", "微软雅黑", sans-serif;
background-color: #0a0a0a;
color: #f55;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
text-align: center;
padding: 30px 20px 10px;
font-size: 3rem;
letter-spacing: 6px;
text-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 30px #ff0000,
0 0 40px #ff0000;
}
main {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background: #111;
border: 2px solid #f33;
padding: 30px;
border-radius: 12px;
box-shadow:
0 0 8px #f33,
inset 0 0 15px #800;
text-align: center;
width: 320px;
}
.menu h2 {
margin-bottom: 20px;
text-shadow: 0 0 6px #f44;
}
label {
display: block;
margin: 15px 0 10px;
font-weight: bold;
font-size: 1.1rem;
}
select {
width: 100%;
padding: 8px;
font-size: 1rem;
background-color: #220000;
color: #f77;
border: 1px solid #f33;
border-radius: 6px;
}
button {
margin-top: 25px;
padding: 10px 0;
width: 100%;
background: #a00;
border: none;
color: white;
font-weight: 700;
font-size: 1.4rem;
cursor: pointer;
border-radius: 8px;
box-shadow:
0 0 15px #f33,
0 0 40px #900 inset;
transition: background 0.3s ease;
}
button:hover {
background: #f55;
}
/* 游戏画面隐藏 */
#game-container {
display: none;
flex-direction: column;
align-items: center;
padding: 10px;
position: relative;
}
#game-canvas {
background-color: #111;
border: 3px solid #f33;
box-shadow:
0 0 10px #f33,
inset 0 0 15px #600;
}
#status-text {
margin-top: 15px;
color: #f88;
font-weight: bold;
font-size: 1.2rem;
height: 1.5em;
text-shadow: 0 0 7px #f44;
}
#back-btn {
margin-top: 20px;
padding: 8px 16px;
font-size: 1rem;
font-weight: 700;
color: #eee;
background-color: #400;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow:
0 0 10px #f66,
inset 0 0 20px #a00;
}
#back-btn:hover {
background-color: #f33;
}
</style>
</head>
<body>
<header>
恐怖贪吃蛇
</header>
<main>
<section class="menu" id="menu">
<h2>选择游戏模式和皮肤</h2>
<label for="mode-select">游戏模式</label>
<select id="mode-select">
<option value="normal">普通模式</option>
<option value="trap">陷阱模式</option>
<option value="extreme">极限模式</option>
</select>
<label for="skin-select">蛇皮肤</label>
<select id="skin-select">
<option value="classic">经典绿色</option>
<option value="red">血红恐怖</option>
<option value="ghost">幽灵蓝光</option>
</select>
<button id="start-btn">开始游戏</button>
</section>
<section id="game-container">
<canvas id="game-canvas" width="400" height="400"></canvas>
<div id="status-text"></div>
<button id="back-btn">返回菜单</button>
</section>
</main>
<script>
(() => {
const menu = document.getElementById('menu');
const gameContainer = document.getElementById('game-container');
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const statusText = document.getElementById('status-text');
const backBtn = document.getElementById('back-btn');
const startBtn = document.getElementById('start-btn');
const modeSelect = document.getElementById('mode-select');
const skinSelect = document.getElementById('skin-select');
const gridSize = 20; // 格子大小
const tileCount = canvas.width / gridSize;
// 游戏变量
let snake = [];
let direction = { x: 0, y: 0 };
let food = null;
let traps = [];
let trapTypes = ['slow', 'speed', 'poison'];
let speed = 8; // 初始速率，每秒几帧
let frameCount = 0;
let gameInterval = null;
let score = 0;
let mode = 'normal';
let skin = 'classic';
let isGameOver = false;
// 皮肤配色方案
const skins = {
classic: {
snakeHead: '#0f0',
snakeBody: '#070',
food: '#ff0',
trapSlow: '#5555ff',
trapSpeed: '#ffaa00',
trapPoison: '#aa0055',
bg: '#111',
},
red: {
snakeHead: '#ff4444',
snakeBody: '#aa1111',
food: '#ffdd22',
trapSlow: '#cc77ff',
trapSpeed: '#ff7744',
trapPoison: '#770055',
bg: '#220000',
},
ghost: {
snakeHead: '#88ffff',
snakeBody: '#55bbbb',
food: '#ffff88',
trapSlow: '#4444aa',
trapSpeed: '#ffaaff',
trapPoison: '#aa4499',
bg: '#001122',
}
};
// 恐怖文字库
const scaryTexts = [
"你感觉到背后有什么东西盯着你……",
"脚步声越来越近……",
"别回头！危险就在身后！",
"这个地方不属于活人……",
"呼吸变得沉重，阴冷环绕……",
"陷阱？还是死亡的预告？",
"你的心跳加快，屏息凝神……",
"当心！一不小心就会成为猎物……",
"食物味道怪异，背后让你发凉……",
"你听见低语：‘继续前进，还是逃命？’"
];
// 显示随机恐怖文字
function showScaryText() {
const msg = scaryTexts[Math.floor(Math.random() * scaryTexts.length)];
statusText.textContent = msg;
// 文字闪烁效果
statusText.style.opacity = '1';
let opacity = 1;
const anim = setInterval(() => {
opacity -= 0.05;
if (opacity <= 0) {
clearInterval(anim);
statusText.textContent = "";
} else {
statusText.style.opacity = opacity.toString();
}
}, 100);
}
// 初始化蛇
function initSnake() {
snake = [
{ x: Math.floor(tileCount/2), y: Math.floor(tileCount/2) },
{ x: Math.floor(tileCount/2)-1, y: Math.floor(tileCount/2) },
{ x: Math.floor(tileCount/2)-2, y: Math.floor(tileCount/2) },
];
direction = { x: 1, y: 0 };
}
// 生成食物
function createFood() {
while (true) {
const fx = Math.floor(Math.random() * tileCount);
const fy = Math.floor(Math.random() * tileCount);
if (!snake.some(seg => seg.x === fx && seg.y === fy) &&
!traps.some(tr => tr.x === fx && tr.y === fy)) {
food = { x: fx, y: fy };
break;
}
}
}
// 生成陷阱
function createTraps(count) {
traps = [];
for(let i=0; i<count; i++) {
while(true) {
const tx = Math.floor(Math.random() * tileCount);
const ty = Math.floor(Math.random() * tileCount);
if (!snake.some(seg => seg.x === tx && seg.y === ty) &&
!traps.some(tr => tr.x === tx && tr.y === ty) &&
!(food && food.x === tx && food.y === ty)) {
const type = trapTypes[Math.floor(Math.random() * trapTypes.length)];
traps.push({ x: tx, y: ty, type });
break;
}
}
}
}
// 绘制背景
function drawBackground() {
ctx.fillStyle = skins[skin].bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// 绘制蛇
function drawSnake() {
snake.forEach((seg, idx) => {
ctx.fillStyle = idx === 0 ? skins[skin].snakeHead : skins[skin].snakeBody;
ctx.fillRect(seg.x * gridSize, seg.y * gridSize, gridSize, gridSize);
// 细节阴影
ctx.strokeStyle = "#222";
ctx.strokeRect(seg.x * gridSize, seg.y * gridSize, gridSize, gridSize);
});
}
// 绘制食物
function drawFood() {
if (!food) return;
ctx.fillStyle = skins[skin].food;
ctx.beginPath();
const cx = food.x * gridSize + gridSize/2;
const cy = food.y * gridSize + gridSize/2;
ctx.arc(cx, cy, gridSize/2.5, 0, Math.PI*2);
ctx.fill();
}
// 绘制陷阱
function drawTraps() {
traps.forEach(trap => {
switch(trap.type) {
case 'slow':
ctx.fillStyle = skins[skin].trapSlow;
break;
case 'speed':
ctx.fillStyle = skins[skin].trapSpeed;
break;
case 'poison':
ctx.fillStyle = skins[skin].trapPoison;
break;
}
ctx.fillRect(trap.x * gridSize, trap.y * gridSize, gridSize, gridSize);
// 简单恐怖符号表现
ctx.strokeStyle = "#330000";
ctx.beginPath();
ctx.moveTo(trap.x * gridSize + 3, trap.y * gridSize + 3);
ctx.lineTo(trap.x * gridSize + gridSize - 3, trap.y * gridSize + gridSize - 3);
ctx.moveTo(trap.x * gridSize + 3, trap.y * gridSize + gridSize - 3);
ctx.lineTo(trap.x * gridSize + gridSize - 3, trap.y * gridSize + 3);
ctx.stroke();
});
}
// 移动蛇
function moveSnake() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// 墙壁撞击判定（无穿墙）
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
gameOver("撞墙了！你失败了……");
return;
}
// 碰到自己身体
if (snake.some(s => s.x === head.x && s.y === head.y)) {
gameOver("咬到自己了！结束了……");
return;
}
// 蛇移动
snake.unshift(head);
// 吃到食物
if (food && head.x === food.x && head.y === food.y) {
score++;
showScaryText();
speed = Math.min(speed + 0.5, 15); // 逐渐加速，但有限制
createFood();
if (mode !== 'normal') {
// 每吃一次食物刷新陷阱
const trapCount = mode === 'trap' ? 5 : 10;
createTraps(trapCount);
}
} else {
snake.pop();
}
// 碰到陷阱处理
if (mode !== 'normal') {
const trapHit = traps.find(t => t.x === head.x && t.y === head.y);
if (trapHit) {
switch(trapHit.type) {
case 'slow':
speed = Math.max(speed - 3, 4);
statusText.textContent = "踩到减速陷阱！行动迟缓……";
break;
case 'speed':
speed = Math.min(speed + 3, 20);
statusText.textContent = "踩到加速陷阱！速度暴涨，谨慎！";
break;
case 'poison':
gameOver("中毒陷阱！你被黑暗吞噬了……");
return;
}
showScaryText();
// 踩到陷阱后清除它
traps = traps.filter(t => !(t.x === trapHit.x && t.y === trapHit.y));
}
}
}
// 绘制所有元素
function draw() {
drawBackground();
drawFood();
drawTraps();
drawSnake();
}
// 游戏逻辑入口
function gameLoop() {
frameCount++;
if (frameCount % Math.floor(60 / speed) === 0) {
moveSnake();
draw();
}
}
// 游戏结束
function gameOver(msg) {
isGameOver = true;
statusText.textContent = msg + ` 得分：${score}`;
clearInterval(gameInterval);
}
// 清理事件绑定和计时器
function cleanup() {
document.removeEventListener('keydown', keydownHandler);
clearInterval(gameInterval);
}
// 监听键盘控制
function keydownHandler(e) {
if(isGameOver) return;
switch(e.key){
case 'ArrowUp':
case 'w':
case 'W':
if(direction.y === 1) break;
direction = { x: 0, y: -1 };
break;
case 'ArrowDown':
case 's':
case 'S':
if(direction.y === -1) break;
direction = { x: 0, y: 1 };
break;
case 'ArrowLeft':
case 'a':
case 'A':
if(direction.x === 1) break;
direction = { x: -1, y: 0 };
break;
case 'ArrowRight':
case 'd':
case 'D':
if(direction.x === -1) break;
direction = { x: 1, y: 0 };
break;
}
}
// 主函数，启动游戏
function startGame() {
mode = modeSelect.value;
skin = skinSelect.value;
score = 0;
speed = 8;
frameCount = 0;
isGameOver = false;
snake = [];
traps = [];
food = null;
initSnake();
createFood();
// 根据模式设置陷阱数量
if(mode === 'trap'){
createTraps(5);
} else if(mode === 'extreme'){
createTraps(10);
}
menu.style.display = 'none';
gameContainer.style.display = 'flex';
ctx.imageSmoothingEnabled = false;
document.addEventListener('keydown', keydownHandler);
draw();
statusText.textContent = "";
if(gameInterval) clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, 1000/60);
}
// 返回菜单
backBtn.onclick = () => {
cleanup();
menu.style.display = 'block';
gameContainer.style.display = 'none';
statusText.textContent = "";
};
startBtn.onclick = () => {
startGame();
};
})();
</script>
</body>
</html>

复制代码

---

### 使用说明：

- 打开页面后，你会看到主菜单，可以选择三种模式和三款皮肤。
- 普通模式没有陷

张葉彬 · 发表于 2026-1-6 09:53:26

增加迷雾，恐怖元素，更精美，主界面更精美，功能更多

kaia · 发表于 2026-1-6 09:54:08

张葉彬发表于 2026-01-06 09:53
增加迷雾，恐怖元素，更精美，主界面更精美，功能更多 ...

你好！做一个带迷雾效果、精美恐怖元素，功能丰富且主界面漂亮的贪吃蛇游戏，确实很有挑战。我这里给你一个示范项目的思路和简化实现代码，帮你入门。

你可以按照下面的例子，逐步完善。另外，声音、动画等资源可能需要自己找合适素材替换。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>恐怖风贪吃蛇游戏</title>
<style>
/* 页面整体布局 */
body {
background: radial-gradient(circle at center, #0b0b0b 0%, #000000 100%);
color: #f44336;
font-family: "Microsoft YaHei", sans-serif;
margin: 0; padding: 0;
user-select: none;
overflow: hidden;
}
#main-menu {
height: 100vh;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
background: url('https://images.unsplash.com/photo-1572072393748-508d14aaa99d?auto=format&fit=crop&w=1950&q=80') no-repeat center center / cover;
box-shadow: inset 0 0 50px #900;
}
h1 {
font-size: 4em;
text-shadow: 0 0 15px #f44336;
margin-bottom: 0.5em;
letter-spacing: 0.1em;
}
.menu-button {
background: rgba(255, 0, 0, 0.6);
border: 2px solid #f44336;
color: #fff;
padding: 1em 3em;
margin: 0.5em;
font-size: 1.5em;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 10px #f44336;
user-select: none;
}
.menu-button:hover {
background: rgba(255, 0, 0, 0.9);
box-shadow: 0 0 20px #ff0000;
transform: scale(1.05);
}
#game-container {
position: relative;
margin: auto;
width: 600px;
height: 600px;
background: #111;
border: 3px solid #f44336;
box-shadow: 0 0 30px #f44336 inset;
display: none;
}
canvas {
display: block;
background: linear-gradient(180deg, #220000, #110000);
box-shadow: 0 0 30px #900 inset;
border-radius: 8px;
}
/* 迷雾层 */
#fog-canvas {
position: absolute;
top: 0; left: 0;
pointer-events: none;
filter: blur(8px);
}
/* 状态栏 */
#status-bar {
margin-top: 10px;
color: #f44336;
font-size: 1.2em;
text-align: center;
letter-spacing: 0.05em;
user-select: none;
}
/* 恐怖文字弹窗 */
#scary-message {
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.85);
border: 3px solid #f44336;
border-radius: 10px;
padding: 1em 2em;
color: #ff4444;
font-size: 1.8em;
font-weight: bold;
text-shadow: 0 0 15px #f44336;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
user-select: none;
max-width: 80vw;
z-index: 9999;
}
/* 游戏皮肤选择 */
#skin-selector {
margin-top: 1em;
display: flex;
justify-content: center;
}
.skin-option {
width: 40px; height: 40px;
margin: 0 10px;
border-radius: 50%;
border: 2px solid #f44336;
cursor: pointer;
box-shadow: 0 0 10px #f44336;
transition: transform 0.3s ease;
}
.skin-option:hover {
transform: scale(1.3);
box-shadow: 0 0 20px #ff0000;
}
.skin-selected {
border: 4px solid #ff0000 !important;
box-shadow: 0 0 30px #ff0000 !important;
}
</style>
</head>
<body>
<div id="main-menu">
<h1>恐怖贪吃蛇</h1>
<div>
<button class="menu-button" id="start-normal">普通模式</button>
<button class="menu-button" id="start-hard">困难模式</button>
<button class="menu-button" id="start-nightmare">噩梦模式</button>
</div>
<div id="skin-selector" title="选择蛇的皮肤">
<div class="skin-option skin-selected" data-color="#ff2d2d" style="background:#ff2d2d"></div>
<div class="skin-option" data-color="#00ff66" style="background:#00ff66"></div>
<div class="skin-option" data-color="#ff00ff" style="background:#ff00ff"></div>
<div class="skin-option" data-color="#ffaa00" style="background:#ffaa00"></div>
</div>
</div>
<div id="game-container">
<canvas id="game-canvas" width="600" height="600"></canvas>
<canvas id="fog-canvas" width="600" height="600"></canvas>
<div id="status-bar">得分: 0 | 速度: 正常</div>
</div>
<div id="scary-message"></div>
<script>
(() => {
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const fogCanvas = document.getElementById('fog-canvas');
const fogCtx = fogCanvas.getContext('2d');
const startNormalBtn = document.getElementById('start-normal');
const startHardBtn = document.getElementById('start-hard');
const startNightmareBtn = document.getElementById('start-nightmare');
const mainMenu = document.getElementById('main-menu');
const gameContainer = document.getElementById('game-container');
const statusBar = document.getElementById('status-bar');
const scaryMessageEl = document.getElementById('scary-message');
const skinOptions = document.querySelectorAll('.skin-option');
const GRID_SIZE = 20; // 单元格尺寸20x20
const WIDTH = canvas.width / GRID_SIZE; // 30格
const HEIGHT = canvas.height / GRID_SIZE; // 30格
let snake = [];
let direction = { x: 1, y: 0 };
let nextDirection = direction;
let food = null;
let traps = [];
let score = 0;
let speed = 150; // 毫秒刷新一次
let gameInterval = null;
let fogRadius = 6; // 迷雾半径，视野范围
let isGameOver = false;
let snakeColor = '#ff2d2d';
let modeSettings = {
normal: { trapCount: 5, speed: 150, fogRadius: 6 },
hard: { trapCount: 10, speed: 120, fogRadius: 5 },
nightmare: { trapCount: 15, speed: 90, fogRadius: 3 },
};
let currentMode = 'normal';
function showScaryMessage(text) {
scaryMessageEl.textContent = text;
scaryMessageEl.style.opacity = '1';
setTimeout(() => {
scaryMessageEl.style.opacity = '0';
}, 2500);
}
function rnd(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function resetGame() {
snake = [];
for (let i = 5; i >= 0; i--) {
snake.push({ x: i, y: Math.floor(HEIGHT / 2) });
}
direction = { x: 1, y: 0 };
nextDirection = direction;
score = 0;
traps = [];
isGameOver = false;
// 根据模式调整参数
const setting = modeSettings[currentMode];
speed = setting.speed;
fogRadius = setting.fogRadius;
generateFood();
generateTraps(setting.trapCount);
updateStatus();
}
function generateFood() {
while(true) {
const pos = { x: rnd(0, WIDTH), y: rnd(0, HEIGHT) };
if (!isOccupied(pos)) {
food = pos;
break;
}
}
}
function generateTraps(count) {
traps = [];
let tries = 0;
while (traps.length < count && tries < 500) {
let pos = { x: rnd(0, WIDTH), y: rnd(0, HEIGHT) };
if (!isOccupied(pos) && !posEqual(pos, food)) {
traps.push(pos);
}
tries++;
}
}
function isOccupied(pos) {
return snake.some(s => posEqual(s, pos)) || traps.some(t => posEqual(t, pos));
}
function posEqual(a, b) {
return a.x === b.x && a.y === b.y;
}
function setDirection(newDir) {
// 不能直接让蛇倒退
if (newDir.x === -direction.x && newDir.y === -direction.y) return;
nextDirection = newDir;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 画食物 - 就是鲜红的心脏样子
ctx.fillStyle = '#ff1744';
drawHeart(food.x, food.y);
// 画陷阱 - 用鬼火图案和紫黑色
traps.forEach(trap => {
drawGhostFlame(trap.x, trap.y);
});
// 画蛇
ctx.fillStyle = snakeColor;
snake.forEach((segment, idx) => {
let alpha = 1.0;
// 蛇尾部慢慢透明
if (idx > 0) alpha = Math.max(0.2, 1 - idx / snake.length);
ctx.globalAlpha = alpha;
drawRect(segment.x, segment.y);
ctx.globalAlpha = 1.0;
});
// 绘制迷雾，除了蛇头周围 fogRadius 范围内可见
drawFog();
}
function drawRect(x, y) {
ctx.fillRect(x * GRID_SIZE, y * GRID_SIZE, GRID_SIZE - 1, GRID_SIZE -1);
}
function drawHeart(x, y) {
// 用基本图形拼个心脏形状
const px = x * GRID_SIZE + GRID_SIZE/2;
const py = y * GRID_SIZE + GRID_SIZE/2;
ctx.beginPath();
ctx.moveTo(px, py + 5);
ctx.bezierCurveTo(px + 12, py - 15, px + 25, py + 10, px, py + 28);
ctx.bezierCurveTo(px - 25, py + 10, px - 12, py - 15, px, py + 5);
ctx.fill();
}
function drawGhostFlame(x, y) {
const px = x * GRID_SIZE;
const py = y * GRID_SIZE;
// 外层紫黑色底
ctx.fillStyle = '#330022';
ctx.beginPath();
ctx.ellipse(px + GRID_SIZE/2, py + GRID_SIZE/2, GRID_SIZE/2, GRID_SIZE*0.7, 0, 0, 2 * Math.PI);
ctx.fill();
// 里层幽蓝色火焰
let gradient = ctx.createRadialGradient(px + GRID_SIZE/2, py + GRID_SIZE/2, 2, px + GRID_SIZE/2, py + GRID_SIZE/2, GRID_SIZE/2);
gradient.addColorStop(0, '#66ccff');
gradient.addColorStop(1, 'transparent');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.ellipse(px + GRID_SIZE/2, py + GRID_SIZE/2, GRID_SIZE/3, GRID_SIZE/2, 0, 0, 2 * Math.PI);
ctx.fill();
}
function update() {
if (isGameOver) return;
direction = nextDirection;
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// 撞墙判死
if (head.x < 0 || head.x >= WIDTH || head.y < 0 || head.y >= HEIGHT) {
gameOver("撞墙了，游戏结束...");
return;
}
// 撞自己判死
if (snake.some(s => posEqual(s, head))) {
gameOver("你被自己吞噬了，死亡降临...");
return;
}
// 如果踩陷阱，掉血或减速
let steppedTrapIndex = traps.findIndex(t => posEqual(t, head));
if (steppedTrapIndex !== -1) {
traps.splice(steppedTrapIndex,1);
score = Math.max(0, score - 5);
showScaryMessage("陷阱！你的生命在黑暗中流逝...");
speed += 30; // 速度变慢
clearInterval(gameInterval);
gameInterval = setInterval(update, speed);
}
snake.unshift(head);
if (posEqual(head, food)) {
score++;
showScaryMessage("你吃掉了鲜血之心，感觉力量汹涌...");
generateFood();
generateTraps(modeSettings[currentMode].trapCount);
// 随机加速或者减速
if (Math.random() < 0.5) {
speed = Math.max(50, speed - 20);
showScaryMessage("你感到一阵狂热，速度提升！");
} else {
speed += 20;
showScaryMessage("血液冰冷，你的动作变缓慢...");
}
clearInterval(gameInterval);
gameInterval = setInterval(update, speed);
} else {
snake.pop(); // 不吃食物就尾巴缩短
}
updateStatus();
draw();
}
function drawFog() {
fogCtx.clearRect(0, 0, fogCanvas.width, fogCanvas.height);
// 先画满黑色半透明
fogCtx.fillStyle = 'rgba(0, 0, 0, 0.85)';
fogCtx.fillRect(0,0,fogCanvas.width, fogCanvas.height);
// 在蛇头四周画透明圆，制造迷雾视野效果
const head = snake[0];
let cx = head.x * GRID_SIZE + GRID_SIZE / 2;
let cy = head.y * GRID_SIZE + GRID_SIZE / 2;
let radius = fogRadius * GRID_SIZE;
let gradient = fogCtx.createRadialGradient(cx, cy, radius*0.6, cx, cy, radius);
gradient.addColorStop(0, 'rgba(0,0,0,0)');
gradient.addColorStop(1, 'rgba(0,0,0,0.85)');
fogCtx.globalCompositeOperation = 'destination-out';
fogCtx.fillStyle = gradient;
fogCtx.beginPath();
fogCtx.arc(cx, cy, radius, 0, Math.PI * 2);
fogCtx.fill();
fogCtx.globalCompositeOperation = 'source-over';
}
function updateStatus() {
let speedDesc = '';
if (speed < 80) speedDesc = '极快';
else if (speed < 120) speedDesc = '快速';
else speedDesc = '正常';
statusBar.textContent = `得分: ${score} | 速度: ${speedDesc} | 模式: ${currentMode}`;
}
function gameOver(msg) {
isGameOver = true;
showScaryMessage(msg);
clearInterval(gameInterval);
setTimeout(() => {
alert(`游戏结束！\n你的最终得分：${score}`);
mainMenu.style.display = 'flex';
gameContainer.style.display = 'none';
}, 1500);
}
function startGame(mode) {
currentMode = mode;
resetGame();
mainMenu.style.display = 'none';
gameContainer.style.display = 'block';
draw();
clearInterval(gameInterval);
gameInterval = setInterval(update, speed);
}
window.addEventListener('keydown', e => {
if (e.key === 'ArrowUp' || e.key === 'w') setDirection({ x: 0, y: -1 });
if (e.key === 'ArrowDown' || e.key === 's') setDirection({ x: 0, y: 1 });
if (e.key === 'ArrowLeft' || e.key === 'a') setDirection({ x: -1, y: 0 });
if (e.key === 'ArrowRight' || e.key === 'd') setDirection({ x: 1, y: 0 });
});
startNormalBtn.onclick = () => startGame('normal');
startHardBtn.onclick = () => startGame('hard');
startNightmareBtn.onclick = () => startGame('nightmare');
skinOptions.forEach(el => {
el.onclick = () => {
skinOptions.forEach(s => s.classList.remove('skin-selected'));
el.classList.add('skin-selected');
snakeColor = el.getAttribute('data-color');
};
});
})();
</script>
</body>
</html>

复制代码

**功能