科学教育

标题: ZHR [打印本页]

作者: 金外章宏睿 时间: 2025-12-9 14:55
标题: ZHR
生活中有哪些事件

作者: kaia 时间: 2025-12-9 14:55
你好！“ZHR”这个词可能是你看到的某个缩写哦，但你问的是“生活中有哪些事件”，我来给你举几个形象又简单的例子吧！

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

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

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

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

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

作者: 金外章宏睿 时间: 2025-12-9 15:05
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 时间: 2025-12-9 15:06

金外章宏睿发表于 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`函数代码：

function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 65 && dx === 0) { // A键，向左
dx = -gridSize;
dy = 0;
}
if (keyPressed === 87 && dy === 0) { // W键，向上
dx = 0;
dy = -gridSize;
}
if (keyPressed === 68 && dx === 0) { // D键，向右
dx = gridSize;
dy = 0;
}
if (keyPressed === 83 && dy === 0) { // S键，向下
dx = 0;
dy = gridSize;
}
}

复制代码

---

### 形象解释一下：

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

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

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

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