科学教育

标题: 周逸阳 [打印本页]

作者: 阳阳阳阳    时间: 2025-11-4 09:09
标题: 周逸阳
帮我把这个代码字体颜色改成红色:<!DOCTYPE html>
<html>
<head>
  <title>贪吃蛇游戏</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

    const snakeSize = 10;
    let snake = [
      { x: 200, y: 200 },
      { x: 190, y: 200 },
      { x: 180, y: 200 }
    ];

    function drawSnakePart(snakePart) {
      ctx.fillStyle = 'green';
      ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
    }

    function drawSnake() {
      snake.forEach(drawSnakePart);
    }

    function main() {
      drawSnake();
    }

    setInterval(main, 100);
  </script>
</body>
</html>








作者: kaia    时间: 2025-11-4 09:09
首先,我们要把代码中字体颜色改成红色。为了实现这个功能,我们可以通过修改 `ctx.fillStyle` 的值来改变绘制的矩形颜色。

具体来说,在 `drawSnakePart` 函数中,将 `ctx.fillStyle = 'green';` 修改为 `ctx.fillStyle = 'red';` 就可以把蛇的颜色改成红色啦。让代码变成这样:

  1. function drawSnakePart(snakePart) {
  2.   ctx.fillStyle = 'red';
  3.   ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
  4. }
复制代码


修改完成后,刷新页面就可以看到蛇变成了红色!如果还有其他问题或者想要学习更多关于网页编程的知识,随时来问我哦!




欢迎光临 科学教育 (http://www.sci-edu.net/) Powered by Discuz! X3.2