第九课马紫萱

马紫萱2

在代码上什么是事件

kaia

你好呀！我来帮你讲讲“事件”是什么，好不好？

想象一下，你在玩一个游戏或者用网页的时候，比如：

- 你用鼠标点击一个按钮
- 你在键盘上按了一个键
- 你把鼠标移到一个图片上

这些动作就叫做“事件”。它们是发生在网页上的“事情”。

在网页编程里，“事件”就是指用户做了什么操作，网页会去“听”有没有发生这些操作，然后根据这个操作去做一些特别的反应，比如显示一个对话框、改变颜色或者弹出一个消息。

举个小例子：

1. <button onclick="alert('你点击了按钮！')">点击我</button>

复制代码

这里的`onclick`就是一个事件，当你点击这个按钮的时候（就是发生了“点击事件”），网页就会弹出一个提示框告诉你“你点击了按钮！”

所以，简单来说：

- **事件 = 用户做了某件事**
- **网页程序会“听”这些事件，然后做相应的动作**

希望这样讲你能明白啦！如果还有不懂的，随时问我哈！????

马紫萱2

const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");
const startButton = document.getElementById("startButton");

const gridSize = 20;
let snake = [{x: 200, y: 200}];\\1
let food = {x: 0, y: 0};
let dx = gridSize;
let dy = 0;
let score = 0;

\\....2
function drawSnake() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    snake.forEach(part => {
        context.fillStyle = "green";
        context.fillRect(part.x, part.y, gridSize, gridSize);
    });
}

function generateFood() {
    food.x = Math.floor(Math.random() * canvas.width / gridSize) * gridSize;
    food.y = Math.floor(Math.random() * canvas.height / gridSize) * gridSize;
}

function drawFood() {
    context.fillStyle = "red";
    context.fillRect(food.x, food.y, gridSize, gridSize);
}

function moveSnake() {
    const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        score++;
        generateFood();
    } else {
        snake.pop();
    }
}

function changeDirection(event) {
    const keyPressed = event.keyCode;
    if (keyPressed === 37 && dx === 0) {
        dx = -gridSize;
        dy = 0;
    }
    if (keyPressed === 38 && dy === 0) {
        dx = 0;
        dy = -gridSize;
    }
    if (keyPressed === 39 && dx === 0) {
        dx = gridSize;
        dy = 0;
    }
    if (keyPressed === 40 && dy === 0) {
        dx = 0;
        dy = gridSize;
    }
}

function gameLoop() {
    moveSnake();
    drawSnake();
    drawFood();
    if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
        clearInterval(game);
        alert("Game Over! Your score is " + score);
    }
}

startButton.addEventListener("click", () => {
    snake = [{x: 200, y: 200}];
    dx = gridSize;
    dy = 0;
    score = 0;
    generateFood();
    game = setInterval(gameLoop, 100);
});

document.addEventListener("keydown", changeDirection);
改wasd

kaia

马紫萱2 发表于 2025-12-10 15:04
const canvas = document.getElementById("gameCanvas ...

你好！你这个代码是用来做贪吃蛇游戏的，很棒哦！你想把控制方向的按键从箭头键（↑↓←→）改成W、A、S、D对吧？我来帮你改一下，并且顺便修正一下代码里一些小问题，方便你能更好理解。

---

### 第一步：解释你代码里的几个地方需要注意

1. 你写了`let snake = ;`，这里需要给蛇的身体一个初始数组，比如从画布中间开始，像这样：

1. let snake = [{x: 100, y: 100}];

复制代码

2. `moveSnake`函数里的代码：

1. const head = {x: snake.x + dx, y: snake.y + dy};

复制代码

这里应该改成用蛇头部第一个元素`sank[0]`的位置，因为`snake`是个数组，不是对象。

改成：

1. const head = { x: snake[0].x + dx, y: snake[0].y + dy };

复制代码

3. 判断游戏结束的时候，你写的是

1. if (snake.x < 0 || snake.x >= canvas.width || snake.y < 0 || snake.y >= canvas.height) {

复制代码

同样要用`sanke[0]`表示蛇头

1. if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {

复制代码

4. 还有每次点击开始按钮时，要给`snake`赋一个起始位置，比如：

1. snake = [{x: 100, y: 100}];

复制代码

---

### 第二步：将方向键改成用 **W (上), A (左), S (下), D (右)** 控制

修改`changeDirection`函数里的监听代码，改成监听`key`属性（更直观），代码示范：

1. function changeDirection(event) {
   
2.     const keyPressed = event.key.toLowerCase();  // 把按键转换成小写字母
   
3. 
   
4.     if (keyPressed === 'a' && dx === 0) {  // 左
   
5.         dx = -gridSize;
   
6.         dy = 0;
   
7.     }
   
8.     if (keyPressed === 'w' && dy === 0) {  // 上
   
9.         dx = 0;
   
10.         dy = -gridSize;
    
11.     }
    
12.     if (keyPressed === 'd' && dx === 0) {  // 右
    
13.         dx = gridSize;
    
14.         dy = 0;
    
15.     }
    
16.     if (keyPressed === 's' && dy === 0) {  // 下
    
17.         dx = 0;
    
18.         dy = gridSize;
    
19.     }
    
20. }

复制代码

---

### 最后帮你整理一份修正后的完整关键代码片段：

1. const canvas = document.getElementById("gameCanvas");
   
2. const context = canvas.getContext("2d");
   
3. const startButton = document.getElementById("startButton");
   
4. 
   
5. const gridSize = 20;
   
6. let snake = [];
   
7. let food = {x: 0, y: 0};
   
8. let dx = gridSize;
   
9. let dy = 0;
   
10. let score = 0;
    
11. let game;  // 定时器变量
    
12. 
    
13. function drawSnake() {
    
14.     context.clearRect(0, 0, canvas.width, canvas.height);
    
15.     snake.forEach(part => {
    
16.         context.fillStyle = "green";
    
17.         context.fillRect(part.x, part.y, gridSize, gridSize);
    
18.     });
    
19. }
    
20. 
    
21. function generateFood() {
    
22.     food.x = Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize;
    
23.     food.y = Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize;
    
24. }
    
25. 
    
26. function drawFood() {
    
27.     context.fillStyle = "red";
    
28.     context.fillRect(food.x, food.y, gridSize, gridSize);
    
29. }
    
30. 
    
31. function moveSnake() {
    
32.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    
33.     snake.unshift(head);
    
34. 
    
35.     if (head.x === food.x && head.y === food.y) {
    
36.         score++;
    
37.         generateFood();
    
38.     } else {
    
39.         snake.pop();
    
40.     }
    
41. }
    
42. 
    
43. function changeDirection(event) {
    
44.     const keyPressed = event.key.toLowerCase();
    
45. 
    
46.     if (keyPressed === 'a' && dx === 0) {
    
47.         dx = -gridSize;
    
48.         dy = 0;
    
49.     }
    
50.     if (keyPressed === 'w' && dy === 0) {
    
51.         dx = 0;
    
52.         dy = -gridSize;
    
53.     }
    
54.     if (keyPressed === 'd' && dx === 0) {
    
55.         dx = gridSize;
    
56.         dy = 0;
    
57.     }
    
58.     if (keyPressed === 's' && dy === 0) {
    
59.         dx = 0;
    
60.         dy = gridSize;
    
61.     }
    
62. }
    
63. 
    
64. function gameLoop() {
    
65.     moveSnake();
    
66.     drawSnake();
    
67.     drawFood();
    
68.     if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
    
69.         clearInterval(game);
    
70.         alert("Game Over! Your score is " + score);
    
71.     }
    
72. }
    
73. 
    
74. startButton.addEventListener("click", () => {
    
75.     snake = [{x: 100, y: 100}];
    
76.     dx = gridSize;
    
77.     dy = 0;
    
78.     score = 0;
    
79.     generateFood();
    
80.     if (game) clearInterval(game);  // 防止多次点击start重复启动
    
81.     game = setInterval(gameLoop, 100);
    
82. });
    
83. 
    
84. document.addEventListener("keydown", changeDirection);

复制代码

---

### 小结

- 我帮你修正了蛇的初始化和坐标计算
- 把事件监听改成用 `W A S D` 控制方向啦
- 你可以在浏览器打开网页，用WASD试一下游戏哦~

如果哪里不懂，或者还想学怎么加得分显示、碰到自己就游戏结束等功能，随时问我！祝你编程开心~????????