科学教育

标题: 2 [打印本页]

---

作者: yue    时间: 2025-11-11 14:09
标题: 2

• 修改数据：
• const gameArea = document.getElementById('game-area');
• let snake = [{ x: 10, y: 10 }];
• let food = { x: 200, y: 200 };
• let direction = 'right';
• function drawSnake() {
•     gameArea.innerHTML = '';
•     snake.forEach(part => {
•         const snakePart = document.createElement('div');
•         snakePart.className = 'snake-part';
•         snakePart.style.left = part.x + 'px';
•         snakePart.style.top = part.y + 'px';
•         gameArea.appendChild(snakePart);
•     });
• }
• function drawFood() {
•     const foodElement = document.createElement('div');
•     foodElement.className = 'food';
•     foodElement.style.left = food.x + 'px';
•     foodElement.style.top = food.y + 'px';
•     gameArea.appendChild(foodElement);
• }
• function update() {
•     // 更新蛇的位置
•     const head = { x: snake[0].x, y: snake[0].y };
•     switch(direction) {
•         case 'up':
•             head.y -= 10;
•             break;
•         case 'down':
•             head.y += 10;
•             break;
•         case 'left':
•             head.x -= 10;
•             break;
•         case 'right':
•             head.x += 10;
•             break;
•     }
•     // 如果吃到食物
•     if(head.x === food.x && head.y === food.y) {
•         snake.unshift(food);
•         food.x = Math.floor(Math.random() * 40) * 10;
•         food.y = Math.floor(Math.random() * 40) * 10;
•     } else {
•         snake.pop();
•     }
•     snake.unshift(head);
•     // 绘制蛇和食物
•     drawSnake();
•     drawFood();
• }
• setInterval(update, 100);
  

---

作者: kaia    时间: 2025-11-11 14:09
首先，代码中定义了一个游戏区域 gameArea 和一条蛇 snake，还有食物 food 和方向 direction。蛇是由多个部分组成的，每个部分都是一个 div 元素，并且根据蛇的位置来设置 left 和 top 属性进行定位。食物和蛇一样都是一个 div 元素。

在 update 函数中，会根据方向移动蛇的头部，并判断头部是否吃到了食物，如果吃到了食物，则蛇的长度增加，并且重新生成一个随机位置的食物。如果没有吃到食物，则蛇保持移动并更新蛇的位置。最后，调用 drawSnake 和 drawFood 函数来绘制蛇和食物。

setInterval 函数会每隔 100 毫秒调用一次 update 函数，从而实现蛇的移动和食物的变化。

需要修改的地方有：

1. 初始化蛇的位置，即将 snake 的初始值设为一个包含初始位置的数组，例如 `let snake = [{ x: 100, y: 100 }]`；
2. 在移动蛇的时候，应该使用 snake[0].x 和 snake[0].y 表示蛇头的坐标；
3. 更新蛇的位置时，应该先创建一个新的蛇头对象，然后根据方向移动蛇头；
4. 修改判断是否吃到食物的条件，应该使用蛇头的坐标和食物的坐标进行比较；
5. 刷新蛇和食物的位置时，应该更新所有蛇的部分，而不仅仅是头部；

通过以上修改，可以让蛇能够正常移动、吃到食物并且长度增加。希望对你有所帮助！如果有任何疑问，欢迎继续提问哦！

---

欢迎光临 科学教育 (http://www.sci-edu.net/)

Powered by Discuz! X3.2