科学教育

标题: www [打印本页]

作者: 张葉彬 时间: 2025-12-9 09:39
标题: www
const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");
const startButton = document.getElementById("startButton");

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

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
js

作者: kaia 时间: 2025-12-9 09:39
好的！你想把方向键（上下左右）改成用 W、A、S、D 来控制蛇的移动，对吧？我帮你改一下代码，并且解释给你听哦~

---

### 1. 先看原来的方向判断部分：

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;
}
}

复制代码

- 这里用的是 `keyCode`，箭头键的编码分别是：左37，上38，右39，下40。
- 用 `if` 判断按下哪个键，然后改变蛇运动的方向。

---

### 2. 改成用 W（上）、A（左）、S（下）、D（右）：

这些字母的 `keyCode` 分别是：

- W = 87
- A = 65
- S = 83
- D = 68

---

### 3. 修改后的代码：

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;
}
}

复制代码

---

### 4. 小贴士：

- 这里的 `dx` 和 `dy` 是蛇每次移动的步长方向。
- 注意要防止蛇往反方向直接倒退（所以判断了 `dx === 0` 或 `dy === 0`）。
- 现在按 W 就像按“上”，按 A 是“左”，S 是“下”，D 是“右”。

---

如果你想试试，可以把这段函数替换掉你原来的 `changeDirection` 函数，就能用 WASD 控制蛇走啦！

需要提醒你，现代更推荐用 `event.key` 替代 `keyCode`，因为 `keyCode` 已经被弃用了，但为了你简单理解，我先用你这个写法。

---

有什么不明白的，告诉我，我帮你讲得更清楚！加油玩转网页编程~????????

作者: 张葉彬 时间: 2025-12-9 09:42
网页代码里有哪些事件

作者: kaia 时间: 2025-12-9 09:43

张葉彬发表于 2025-12-09 09:42
网页代码里有哪些事件

小朋友，你好呀！你问网页代码里有哪些“事件”，这个问题问得非常棒！让我用一个简单又形象的方式给你介绍一下吧~

---

## 1. 什么是“事件”？

想象一下你和朋友玩游戏，突然敲门声响了，你们就注意到有人来了。这个“敲门声”就是一个“事件”——网页里面也一样：当网页上发生一些事情，比如你点击按钮、按键盘、移动鼠标，它们都会产生“事件”。

网页程序可以监听这些事件，然后做出响应，比如按钮被点击时显示一个对话框。

---

## 2. 常见的网页事件有哪些呢？

我给你举几个简单有趣的例子，好记又好玩：

### 鼠标事件（关于鼠标的动作）
- **click**：当你用鼠标单击（点）某个地方。
- **dblclick**：双击鼠标两下。
- **mouseover**：鼠标移到某个东西上面。
- **mouseout**：鼠标离开某个东西。
- **mousedown**：按下鼠标按键时。
- **mouseup**：松开鼠标按键时。
- **mousemove**：鼠标移动时。

### 键盘事件（关于按键盘）
- **keydown**：按下某个键时。
- **keyup**：松开某个键时。
- **keypress**：按键被按下并且产生字符时。

### 表单事件（输入框和表格相关）
- **focus**：输入框获得焦点（光标出现）。
- **blur**：输入框失去焦点。
- **change**：输入框内容改变后。
- **input**: 当输入框中的内容实时变化时。

### 窗口事件（浏览器窗口相关）
- **load**：网页全部加载完成时。
- **resize**：调整浏览器窗口大小时。
- **scroll**：页面滚动时。
- **beforeunload**：关闭或刷新网页前。

---

## 3. 形象比喻

你可以把网页想象成一个大舞台：
- 鼠标事件就像观众的手势动作（拍手、挥手、指点）。
- 键盘事件就像观众通过喊话或者敲击桌子发出信号。
- 表单事件像演员在舞台上输入信息、换场。
- 窗口事件类似舞台灯光变暗、换布景。

程序员叔叔阿姨们会告诉电脑：“当发生X事件时，做Y反应”。这样网页就活起来啦！

---

## 4. 小练习建议

你可以试试写个网页，当你点击按钮时，显示一句话；或者当按下“W”键时，让屏幕变色。这样你就能感受到事件魔法啦！

---

有兴趣了解更多具体怎么用事件写代码，或者想试试做小游戏，随时问我哦！我很乐意帮你~ ????????

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