科学教育

标题: 赵123 [打印本页]

---

作者: yue    时间: 2025-12-9 14:09
标题: 赵123
帮我解释一下网页编程的事件

---

作者: kaia    时间: 2025-12-9 14:09
赵123同学你好！我来帮你讲讲网页编程里的“事件”是什么，听起来有点复杂，其实很简单哦！

你可以把网页上的“事件”想象成“发生的事情”或者“动作”。比如：

- 你用鼠标点击一个按钮，这就是一个“点击事件”。
- 你把鼠标移到图片上，这就是一个“鼠标移入事件”。
- 你在输入框里输入文字，这就是一个“输入事件”。

网页上的“事件”就是指这些用户做的动作。

网页编程里，你可以告诉网页：“嘿，当这个按钮被点击的时候，帮我做这件事！” 比如说，点击按钮后显示一句话，或者换一张图片。

举个简单例子：

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

复制代码

这里，`onclick`就是“点击事件”的意思，告诉网页“当按钮被点击时，弹出一个小窗口显示‘你点击了按钮！’”

所以，事件就是网页等着我们去“触发”的动作，而程序里写的代码就是事件发生后要做的事情。

你还有什么想知道的吗？我可以再帮你讲更多！

---

作者: yue    时间: 2025-12-9 14:23
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);
把代码改成用WAST控制

---

作者: kaia    时间: 2025-12-9 14:23

yue 发表于 2025-12-09 14:23
const canvas = document.getElementById("gameCanvas ...

赵123同学你好！你已经写了一个贪吃蛇游戏的网页代码，里面用的是键盘的方向键（↑←↓→）控制蛇的移动。你现在想要把控制改成用W、A、S、D这几个字母键来控制，对吗？我来帮你改一下，并且简单讲解哦！

首先，我们的原理是：  
- W对应上（↑）  
- A对应左（←）  
- S对应下（↓）  
- D对应右（→）

在代码里，我们监听键盘按键事件，用`event.keyCode`判断按的是哪个键。  

方向键的keyCode是37（左）、38（上）、39（右）、40（下）。  
字母W、A、S、D的keyCode分别是87（W）、65（A）、83（S）、68（D）。

所以，我们只要把监听方向键的地方换成监听WASD就可以啦！

---

这是修改后的 `changeDirection` 函数，给你看看：

1. function changeDirection(event) {
   
2.     const keyPressed = event.keyCode;
   
3.     if (keyPressed === 65 && dx === 0) { // A键，向左
   
4.         dx = -gridSize;
   
5.         dy = 0;
   
6.     }
   
7.     if (keyPressed === 87 && dy === 0) { // W键，向上
   
8.         dx = 0;
   
9.         dy = -gridSize;
   
10.     }
    
11.     if (keyPressed === 68 && dx === 0) { // D键，向右
    
12.         dx = gridSize;
    
13.         dy = 0;
    
14.     }
    
15.     if (keyPressed === 83 && dy === 0) { // S键，向下
    
16.         dx = 0;
    
17.         dy = gridSize;
    
18.     }
    
19. }

复制代码

---

另外，我发现你的代码里有两个小问题，我也帮你改了一下：

1. `let snake = ;\\1` 这里应该是给蛇初始化位置，比如一开始蛇由一个或几个格子组成，我改成：

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

复制代码

2. `const head = {x: snake.x + dx, y: snake.y + dy};` 这里`snake`是个数组，应该取数组第一个元素（蛇头）的位置：

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

复制代码

3. 还有你代码中`startButton`点击事件初始化蛇的时候，`snake = ;` 也要赋值，改成：

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

复制代码

4. 在游戏结束检测里，你也是用`snake.x`和`snake.y`，其实要用蛇头`snake[0].x`和`snake[0].y`。

---

这是完整修改后相关的代码部分：

1. let snake = [{x: 0, y: 0}];
   
2. 
   
3. function moveSnake() {
   
4.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
   
5.     snake.unshift(head);
   
6.     if (head.x === food.x && head.y === food.y) {
   
7.         score++;
   
8.         generateFood();
   
9.     } else {
   
10.         snake.pop();
    
11.     }
    
12. }
    
13. 
    
14. function changeDirection(event) {
    
15.     const keyPressed = event.keyCode;
    
16.     if (keyPressed === 65 && dx === 0) { // A
    
17.         dx = -gridSize;
    
18.         dy = 0;
    
19.     }
    
20.     if (keyPressed === 87 && dy === 0) { // W
    
21.         dx = 0;
    
22.         dy = -gridSize;
    
23.     }
    
24.     if (keyPressed === 68 && dx === 0) { // D
    
25.         dx = gridSize;
    
26.         dy = 0;
    
27.     }
    
28.     if (keyPressed === 83 && dy === 0) { // S
    
29.         dx = 0;
    
30.         dy = gridSize;
    
31.     }
    
32. }
    
33. 
    
34. function gameLoop() {
    
35.     moveSnake();
    
36.     drawSnake();
    
37.     drawFood();
    
38. 
    
39.     const head = snake[0];
    
40.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    
41.         clearInterval(game);
    
42.         alert("Game Over! Your score is " + score);
    
43.     }
    
44. }
    
45. 
    
46. startButton.addEventListener("click", () => {
    
47.     snake = [{x: 0, y: 0}];
    
48.     dx = gridSize;
    
49.     dy = 0;
    
50.     score = 0;
    
51.     generateFood();
    
52.     game = setInterval(gameLoop, 100);
    
53. });

复制代码

---

总结：  
- 把方向键的按键代码换成W、A、S、D的代码就行了！  
- 注意蛇头的位置要用`snake[0]`，因为`snake`是数组。  
- 初始化蛇的位置也要写对。

如果你想，我还能帮你继续完善游戏哦！祝你编程越来越棒，加油！????????

---

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

Powered by Discuz! X3.2