科学教育

标题: aaa [打印本页]

作者: 张葉彬 时间: 2025-12-30 09:44
标题: aaa
解释css中position属性的4个取值，并简述它们的作用

作者: kaia 时间: 2025-12-30 09:44
你好！我来帮你讲讲CSS里面的position属性和它的4个主要取值。我们用一个“盒子”来形象理解它们的位置哦。

1. **static（静态）**
这是默认的状态，就像盒子站在排队的队伍里，按照大家排好的顺序一个接一个摆放。不会特别移动，也不会重叠。网页里的元素默认都是static的。

2. **relative（相对定位）**
想象盒子在原本的位置上打了个标记，现在可以稍微往上、下、左、右挪动一点点，但它还是占着原来的那个位置。就像你坐在椅子上，稍微挪挪身体，但椅子还在原地。

3. **absolute（绝对定位）**
这就像盒子突然“飞”出来，不管别的盒子怎么排，它都能自由移动到网页里指定的地方。它的位置是相对于最近的有定位的父盒子定的，如果没有，就以网页为参考点。

4. **fixed（固定定位）**
这个盒子好像“钉”在屏幕上，不管你滚动网页，它都不会动。比如网页上固定在角落的“返回顶部”按钮，就是用fixed定位做的。

总结一下：
- static：按正常顺序排队
- relative：稍微挪一挪，位置相对原点变化
- absolute：自由飞出，位置固定不跟随其他元素
- fixed：钉死在屏幕上，滚动页面也不动

希望这样讲你能懂啦！如果想要学习怎么写这些代码，也可以告诉我哦。

作者: 张葉彬 时间: 2025-12-30 09:47
编写一个java函数，实现鼠标划过一个元素时改变其颜色

作者: kaia 时间: 2025-12-30 09:47

张葉彬发表于 2025-12-30 09:47
编写一个java函数，实现鼠标划过一个元素时改变其颜色 ...

你好！你想让鼠标划过网页上的元素时改变颜色，这其实是网页编程里的一个常见效果。用Java本身是不直接控制网页的，但我们可以用JavaScript和CSS来实现这个效果。如果你是用Java做桌面程序，也不太一样哦。

这里我先给你讲怎样用**JavaScript**配合HTML实现“鼠标划过元素变颜色”的效果，因为这是网页上最常用的做法。

<!DOCTYPE html>
<html>
<head>
<style>
/* 元素的默认颜色 */
#myElement {
width: 150px;
height: 50px;
background-color: lightblue;
line-height: 50px;
text-align: center;
user-select: none; /* 不让文字被选中 */
cursor: pointer; /* 鼠标放上去变成手指 */
}
</style>
</head>
<body>
<div id="myElement">鼠标划过我</div>
<script>
// 获取页面上的元素
var elem = document.getElementById("myElement");
// 鼠标划入时触发函数，改变背景色
elem.addEventListener("mouseover", function() {
elem.style.backgroundColor = "orange";
});
// 鼠标移出时恢复原来的颜色
elem.addEventListener("mouseout", function() {
elem.style.backgroundColor = "lightblue";
});
</script>
</body>
</html>

复制代码

**解释：**
- 我们选中id是“myElement”的盒子，它默认是浅蓝色。
- 当鼠标划过它（mouseover事件）时，把背景改成橙色。
- 鼠标移开（mouseout事件）时，颜色改回浅蓝。

如果你学习了Java后，想做网页项目，JavaScript是跟网页交互的语言，和Java是不同的哦。

如果你想用Java写桌面程序（比如用Swing），可以告诉我，我再帮你写一个Java的例子。

希望这可以帮到你！如果想试试代码，可以复制到浏览器打开看看效果~

作者: 张葉彬 时间: 2025-12-30 09:53
写一个贪吃蛇游戏，html，多陷阱，多恐怖元素

作者: kaia 时间: 2025-12-30 09:53

张葉彬发表于 2025-12-30 09:53
写一个贪吃蛇游戏，html，多陷阱，多恐怖元素 ...

好哒！我帮你写一个简单版的贪吃蛇游戏，用HTML和JavaScript实现。里面会加一些“陷阱”和“恐怖元素”让游戏更刺激哦！

游戏规则：
- 用键盘上下左右控制蛇移动。
- 吃到食物，蛇会变长。
- 碰到陷阱或墙壁，游戏结束。
- “恐怖元素”会随机出现，让蛇速度变快。

先给你代码，你可以复制到浏览器里运行试试~

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>恐怖贪吃蛇</title>
<style>
body {
background-color: black;
color: white;
text-align: center;
font-family: '微软雅黑', sans-serif;
}
#gameCanvas {
background-color: #111; /* 深黑背景 */
display: block;
margin: 20px auto;
border: 2px solid red;
}
#status {
margin-top: 10px;
font-size: 20px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>恐怖贪吃蛇游戏????️????️</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="status"></div>
<p>用方向键控制蛇移动。<br>吃到绿色食物变长。撞到红色陷阱或边界游戏结束。出现紫色恐怖加速元素，吃了会加快蛇速！</p>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20; // 网格大小
const tileCount = canvas.width / gridSize;
let snake = [{x:10, y:10}];
let direction = {x:0, y:0};
let food = null;
let traps = [];
let horror = null;
let speed = 200; // 蛇移动间隔(ms)
let gameInterval;
let score = 0;
let statusDiv = document.getElementById('status');
let gameOver = false;
// 随机生成位置，不和蛇身体重叠
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) ||
(horror && horror.x === pos.x && horror.y === pos.y));
return pos;
}
// 生成食物、陷阱、恐怖块
function generateFood() {
food = randomPosition();
}
function generateTraps(count=5) {
traps = [];
for(let i=0;i<count;i++) {
traps.push(randomPosition());
}
}
function generateHorror() {
horror = randomPosition();
}
// 画方块
function drawBlock(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x*gridSize, y*gridSize, gridSize - 2, gridSize - 2);
}
// 游戏结束
function endGame() {
clearInterval(gameInterval);
gameOver = true;
statusDiv.innerText = `游戏结束！你的分数是: ${score} ????️????`;
}
// 主循环
function gameLoop() {
if(gameOver) return;
// 新蛇头位置
let newX = snake[0].x + direction.x;
let newY = snake[0].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();
// 每吃满3个，随机增加陷阱数量，增加难度
if(score % 3 === 0) {
generateTraps(traps.length + 2);
}
// 鼓励词
statusDiv.innerText = `太棒了！吃到食物，分数: ${score}`;
} else {
// 没吃食物，尾巴消失
snake.pop();
}
// 碰到陷阱
if(traps.some(t => t.x === newX && t.y === newY)) {
endGame();
return;
}
// 吃到恐怖元素，加速效果
if(horror && newX === horror.x && newY === horror.y) {
speed = Math.max(50, speed - 50); // 最快速度限制50ms
clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, speed);
statusDiv.innerText = `啊！被恐怖元素附身，速度+快！当前速度: ${speed}ms`;
horror = null;
// 3秒后重新生成恐怖元素
setTimeout(generateHorror, 3000);
}
// 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 画食物 - 绿色
if(food) drawBlock(food.x, food.y, 'limegreen');
// 画陷阱 - 红色
for(let t of traps) {
drawBlock(t.x, t.y, 'red');
}
// 画恐怖元素 - 紫色
if(horror) drawBlock(horror.x, horror.y, 'purple');
// 画蛇 - 白色
for(let i=0; i<snake.length; i++) {
drawBlock(snake[i].x, snake[i].y, i === 0 ? 'white' : 'gray');
}
}
// 控制方向
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};
}
});
// 初始化游戏
function initGame() {
snake = [{x: 10, y: 10}];
direction = {x:0, y:0};
score = 0;
speed = 200;
gameOver = false;
generateFood();
generateTraps(5);
generateHorror();
statusDiv.innerText = '游戏开始！使用方向键控制蛇移动！';
clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, speed);
}
initGame();
</script>
</body>
</html>

复制代码

### 说明：
- **红色陷阱**是游戏里的危险区，碰到就游戏结束。
- **紫色恐怖元素**吃到后蛇会变得更快，更刺激玩耍！
- 跟普通贪吃蛇游戏不一样，背景是漆黑的，边框是红色，增加恐怖气氛。
- 有提示文字告诉你当前状态。

你可以试试这个游戏，慢慢练习控制蛇多吃食物。玩累了可以刷新页面重新开始哦~

希望你喜欢这个小恐怖版贪吃蛇游戏！如果还有其他想法或者想加功能，告诉我，我帮你！

作者: 张葉彬 时间: 2025-12-30 09:55
更恐怖，更多陷阱，更多随机

作者: kaia 时间: 2025-12-30 09:55

张葉彬发表于 2025-12-30 09:55
更恐怖，更多陷阱，更多随机

好哒！我帮你把游戏变得更恐怖，增加更多陷阱和更多随机元素，让游戏更刺激惊险！
主要改进：
- 陷阱数量更多，而且每次吃完食物后陷阱会重新随机刷新。
- 增加迷雾效果，让视野变窄，看不到全局。
- 恐怖元素多个出现，速度波动更大更不稳定。
- 随机出现黑暗闪烁（画面瞬间变黑再恢复），增加惊悚感。
- 加一些恐怖文字提示。

你把下面完整代码复制到浏览器打开试试吧：

恐怖贪吃蛇加强版

  body {
background-color: black;
color: white;
text-align: center;
font-family: '微软雅黑', sans-serif;
  }
  #gameCanvas {
background-color: #111;
display: block;
margin: 20px auto;
border: 3px solid darkred;
filter: brightness(0.6);
position: relative;
  }
  #status {
margin-top: 10px;
font-size: 18px;
color: red;
font-weight: bold;
height: 24px;
  }
  #fog {
position: absolute;
top: 0; left: 0;
width: 400px; height: 400px;
pointer-events: none;
  }

恐怖贪吃蛇加强版????️????️

用方向键控制蛇移动。
红色陷阱碰了游戏结束。
绿色食物吃了变长。
紫色恐怖元素吃了让蛇速度更快或更慢，不可预测！
黑色迷雾让视野很有限，随机闪烁黑暗增加恐怖气氛！

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const fogCanvas = document.createElement('canvas');
fogCanvas.width = canvas.width;
fogCanvas.height = canvas.height;
const fogCtx = fogCanvas.getContext('2d');
document.getElementById('gameContainer').appendChild(fogCanvas);

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;
let gameInterval;
let score = 0;
let gameOver = false;

const statusDiv = document.getElementById('status');

// 生成随机坐标，不与蛇体、食物、陷阱和恐怖元素重叠
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=10) {
  traps = [];
  for(let i=0;i<count;i++) {
traps.push(randomPosition());
  }
}

function generateHorrors(count=3) {
  horrors = [];
  for(let i=0;i<count;i++) {
horrors.push(randomPosition());
  }
}

// 黑暗闪烁特效
function flickerDarkness(){
  let flickerTimes = 5;
  let count = 0;
  let flickerInterval = setInterval(() => {
if(count % 2 === 0){
   ctx.fillStyle = 'rgba(0,0,0,0.8)';
   ctx.fillRect(0,0,canvas.width,canvas.height);
} else {
   drawGame();
}
count++;
if(count > flickerTimes*2){
   clearInterval(flickerInterval);
}
  },100);
}

// 迷雾效果（只显示蛇头附近区域）
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 = 60;

  let centerX = head.x * gridSize + gridSize/2;
  let centerY = head.y * gridSize + gridSize/2;

  let 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');

  // 画陷阱
  for(let t of traps) drawBlock(t.x, t.y, 'red');

  // 画恐怖元素
  for(let h of horrors) drawBlock(h.x, h.y, 'purple');

  // 画蛇身
  for(let i=0; i< snake.length; i++) {
let col = i===0 ? 'white' : 'gray';
drawBlock(snake.x, snake.y, col);
  }

  drawFog();
}

function endGame() {
  clearInterval(gameInterval);
  gameOver = true;
  statusDiv.innerText = `游戏结束！最终得分: ${score}. 带着恐惧离开吧...`;
}

function gameLoop() {
  if(gameOver) return;
  if(direction.x === 0 && direction.y === 0) return; // 游戏开始前不动

  let head = snake[0];
  let newX = head.x + direction.x;
  let 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(10 + Math.floor(score/2)); // 陷阱越来越多
generateHorrors(3 + Math.floor(score/3)); // 恐怖元素越来越多
statusDiv.innerText = `幸存者，你击败了一部分陷阱！当前分数：${score}`;

// 每次吃完食物，随机触发恐怖闪烁
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++){
let h = horrors;
if(h.x === newX && h.y === newY){
   let oldSpeed = speed;
   if(Math.random() < 0.5){
      speed = Math.max(50, speed - 40); // 加速
      statusDiv.innerText = `???你感到心跳加速！！！速度提高啦！`;
   } else {
      speed = Math.min(500, speed + 60); // 减速
      statusDiv.innerText = `...脚步变得沉重，速度降低...`;
   }
   clearInterval(gameInterval);
   gameInterval = setInterval(gameLoop, speed);
   horrors.splice(i,1);
   break;
}
  }

  drawGame();
}

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:10, y:10}];
  direction = {x:0, y:0};
  score = 0;
  speed = 200;
  gameOver = false;
  generateFood();
  generateTraps(10);
  generateHorrors(3);
  statusDiv.innerText = '游戏开始！用方向键控制蛇，R键重置。';
  clearInterval(gameInterval);
  gameInterval = setInterval(gameLoop, speed);
}

initGame();



### 玩法提示：

- 红色陷阱是致命的，千万别撞上！
- 紫色恐怖元素吃了会让你速度忽快忽慢，小心脚步不稳！
- 屏幕中央有一圈模糊的迷雾，只能看到蛇头附近的区域。
- 随机黑暗闪烁会突然遮住整个屏幕，吓你一跳！
- 游戏结束后按“R”键重置，继续挑战恐怖深渊！

玩的开心！需要更酷的功能随时告诉我哦～
作者: 张葉彬 时间: 2025-12-30 09:56
更多恐怖文字
作者: kaia 时间: 2025-12-30 09:57

张葉彬发表于 2025-12-30 09:56
更多恐怖文字

好的！我帮你在游戏里增加更多恐怖气氛的文字提示，每当发生特别事情（比如吃到食物、碰到陷阱、速度变化，或者黑暗闪烁）时，都会弹出一些吓人的话让你更有沉浸感。

这是修改版代码中的关键部分，你可以把它们替换到之前的代码里：

// 增加恐怖提示文字列表

const scaryMessages = [

  "你听到了脚步声……",

  "黑暗中有什么东西在盯着你！",

  "呼吸变得急促……你感到不安",

  "远处传来诡异的低语……",

  "一股寒意顺着脊背爬上来……",

  "迷雾中突然闪过一双红眼！",

  "你的心跳开始加速……",

  "沉默的房间里传来敲击声……",

  "不远处似乎有人在追踪你！",

  "恐惧席卷而来，无法逃脱……"

];

// 在状态栏显示随机恐怖提示

function showScaryMessage() {

  let msg = scaryMessages[Math.floor(Math.random() * scaryMessages.length)];

  statusDiv.innerText = msg;

}

// 修改以下事件调用showScaryMessage()

// 吃食物时随机显示

if(food && newX === food.x && newY === food.y){

  score++;

  generateFood();

  generateTraps(10 + Math.floor(score/2));

  generateHorrors(3 + Math.floor(score/3));

  if(Math.random() < 0.7) {

showScaryMessage();

  } else {

statusDiv.innerText = `幸存者，你击败了一部分陷阱！当前分数：${score}`;

  }

  // 恐怖闪烁有额外信息

  if(Math.random() < 0.5) {

flickerDarkness();

setTimeout(() => {

   showScaryMessage();

}, 500);

  }

}

// 碰到陷阱时显示特别文字

if(traps.some(t => t.x === newX && t.y === newY)){

  statusDiv.innerText = "陷阱抓住了你，绝望笼罩一切……";

  endGame();

  return;

}

// 吃恐怖元素，加速或减速时显示恐怖感受

for(let i=0;i < horrors.length; i++){

  let h = horrors[i];

  if(newX === h.x && newY === h.y){

let oldSpeed = speed;

let change = (Math.random() < 0.5 ? -1 : 1) * 30 * (1 + Math.random());

speed = Math.min(400, Math.max(50, speed + change));

clearInterval(gameInterval);

gameInterval = setInterval(gameLoop, speed);

let feeling = change > 0 ? "你的心跳骤然加快" : "突然一阵寒意袭来，速度放慢";

statusDiv.innerText = feeling + "。当前速度: " + Math.round(speed) + "ms";

setTimeout(() => {

   showScaryMessage();

}, 1000);

horrors.splice(i,1);

break;

  }

}

// 黑暗闪烁时增加恐怖提示

function flickerDarkness(){

  let flickerTimes = 6;

  let count = 0;

  let 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);

}
复制代码

这段代码是给你：

- 一个`scaryMessages`数组，里面装着各种恐怖的句子。
- 每当吃食物后，或者恐怖闪烁出现时，会随机显示一句恐怖话。
- 遇到陷阱有专门的恐怖提示。
- 吃到恐怖元素让速度变化时，也会显示对应的恐怖心理描写，并且之后出现一句恐怖话。
- 黑暗闪烁的时候屏幕覆盖黑色同时出现恐怖文字，震撼效果更加明显。

你只要把这些代码合并到之前的游戏代码里，就能让游戏的恐怖氛围更加浓厚啦！

如果你需要我帮你整合完整代码版本，或者想加别的特殊恐怖机制，告诉我，我乐意继续帮你打磨！祝你玩得刺激又开心～～????????
作者: 张葉彬 时间: 2025-12-30 09:57
完整代码
作者: kaia 时间: 2025-12-30 09:58

张葉彬发表于 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
更多功能，恐怖元素更精美

作者: kaia 时间: 2025-12-30 10:02

张葉彬发表于 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
增加主页面，增加更多陷阱，更精美，更多恐怖文字，更多可在主页面中选择的游戏模式和皮肤
作者: kaia 时间: 2026-1-6 09:42

张葉彬发表于 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
增加迷雾，恐怖元素，更精美，主界面更精美，功能更多

作者: kaia 时间: 2026-1-6 09:54

张葉彬发表于 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>
复制代码

**功能

欢迎光临科学教育 (http://sci-edu.net/) Powered by Discuz! X3.2