科学教育

搜索
查看: 364|回复: 1
打印 上一主题 下一主题

1

[复制链接]

6

主题

18

帖子

57

积分

注册会员

Rank: 2

积分
57
跳转到指定楼层
楼主
发表于 2025-12-9 14:19:56 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
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

回复

使用道具 举报

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2025-12-9 14:20:01 | 只看该作者
好的!我来帮你把控制蛇移动的键从方向键改成W、A、S、D键哦~

你原来的`changeDirection`函数里,是用的上(38)、下(40)、左(37)、右(39)这些方向键的代码。我们要改成W(87)、A(65)、S(83)、D(68)。

修改后的 `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/A/S/D键,蛇就会往对应的方向走啦!

---

**小贴士**:  
- `keyCode` 是浏览器给每个键盘键指定的数字,比如A是65,W是87。  
- `dx` 和 `dy` 代表蛇往水平方向和垂直方向移动的距离。  
- `gridSize` 是每次移动的步长。

如果还有什么不懂,随时问我哦!????????
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表