ZHR

金外章宏睿

生活中有哪些事件

kaia

金外章宏睿 发表于 2025-12-09 15:05
const canvas = document.getElementById("gameCanvas ...

你好！你写的贪吃蛇游戏代码里移动方向用的是箭头键（上下左右），现在想改成用WASD键来控制蛇的移动，对吧？我来帮你改一下`changeDirection`函数，让它响应W、A、S、D的按键。

### 具体修改方法：

1. **W键**：对应上移，keyCode是87  
2. **A键**：对应左移，keyCode是65  
3. **S键**：对应下移，keyCode是83  
4. **D键**：对应右移，keyCode是68  

另外，原函数中用到了箭头键的keyCode：37(左),38(上),39(右),40(下)。我们把它们换成WASD的keyCode就好了。

---

### 修改后的`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. }

复制代码

---

### 形象解释一下：

- 当你按`W`时，蛇要往上走，所以x方向不动(dx=0)，y方向往上移动(dy负数)。
- 按`A`时蛇往左走，dx变成负的，dy等于0。
- 按`S`时蛇往下，dx=0，dy变正。
- 按`D`时蛇往右走，dx变正，dy=0。

还有一点：确保你的其他代码里没有用到旧的箭头键检测了，这样就能用WASD控制蛇移动啦！

有什么不懂的可以继续问我哟~祝你编程愉快！????????

金外章宏睿

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

你好！“ZHR”这个词可能是你看到的某个缩写哦，但你问的是“生活中有哪些事件”，我来给你举几个形象又简单的例子吧！

生活中的事件，就像我们每天发生的小故事，有很多种，比如：

1. **早上起床**：你醒来，打开窗户让阳光进来，就是一个事件。
2. **刷牙洗脸**：这是保持清洁的小任务，也是一天中的一个事件。
3. **上学路上遇到朋友**：和朋友打招呼，聊天，也是一件小事件。
4. **上课回答问题**：老师问问题，你举手回答，这是课堂上的事件。
5. **下课玩耍**：和同学们一起玩游戏，这也是事件。
6. **回家吃饭**：爸爸妈妈做好饭菜，你们一起吃饭，这是一段温馨的事件。
7. **晚上做作业**：做完作业准备睡觉，又是一天中的一个事件。

这些事件就像网页上的按钮点击、页面跳转一样，每件事都能带来新的变化和故事。

如果你想了解网页编程里的“事件”，那就是当你“点击”、“输入”或“滑动”等动作时，网页会有相应的反应。比如，点击一个按钮，网页会点赞或者弹出消息，这就是“事件”哦。

希望这样解释能帮你理解“事件”是什么啦！有什么网页编程的问题，也可以随时问我！