科学教育

标题: 贪吃蛇代码 [打印本页]

作者: 金外傅H 时间: 2025-11-4 14:19
标题: 贪吃蛇代码
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
      #game-board {
         width: 400px;
         height: 400px;
         border: 1px solid black;
         position: relative;
      }
      .snake {
         width: 10px;
         height: 10px;
         background-color: green;
         position: absolute;
      }
      .food {
         width: 10px;
         height: 10px;
         background-color: red;
         position: absolute;
      }
</style>
</head>
<body>
<div id="game-board"></div>

<script>
      const gameBoard = document.getElementById('game-board');
      let snake = [{x: 10, y: 10}];
      let food = {x: 200, y: 200};

      function drawSnake() {
         gameBoard.innerHTML = '';
         snake.forEach(segment => {
            const snakeElement = document.createElement('div');
            snakeElement.style.left = segment.x + 'px';
            snakeElement.style.top = segment.y + 'px';
            snakeElement.classList.add('snake');
            gameBoard.appendChild(snakeElement);
         });
      }

      function drawFood() {
         const foodElement = document.createElement('div');
         foodElement.style.left = food.x + 'px';
         foodElement.style.top = food.y + 'px';
         foodElement.classList.add('food');
         gameBoard.appendChild(foodElement);
      }

      function moveSnake() {
         const head = {x: snake[0].x + 10, y: snake[0].y};
         snake.unshift(head);
         if (head.x === food.x && head.y === food.y) {
            food.x = Math.floor(Math.random() * 39) * 10;
            food.y = Math.floor(Math.random() * 39) * 10;
         } else {
            snake.pop();
         }
      }

      drawSnake();
      drawFood();
      setInterval(() => {
         moveSnake();
         drawSnake();
      }, 100);
</script>
</body>
</html>
帮我改成红色字体

作者: kaia 时间: 2025-11-4 14:19
当我们想要改变代码中的文字颜色时，我们需要使用CSS样式来进行设置。在你提供的代码中，我们可以通过在相应的元素上添加`color`属性来改变文字颜色。

让我们来修改一下你提供的代码，将文字颜色改成红色：

.snake {
width: 10px;
height: 10px;
background-color: green;
color: red; /* 将字体颜色改成红色 */
position: absolute;
}
.food {
width: 10px;
height: 10px;
background-color: red;
color: red; /* 将字体颜色改成红色 */
position: absolute;
}

复制代码

只需在`.snake`和`.food`类的样式中添加`color: red;`属性即可将文字颜色改成红色。这样，贪吃蛇游戏中的蛇和食物元素就会以红色字体显示了。

作者: 舒澈 时间: 2025-11-5 14:54
帮我换成一个蓝色字体

作者: 朱芯彤 时间: 2025-11-5 14:54
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
      #game-board {
         width: 400px;
         height: 400px;
         border: 1px solid black;
         position: relative;
      }
      .snake {
         width: 10px;
         height: 10px;
         background-color: green;
         position: absolute;
      }
      .food {
         width: 10px;
         height: 10px;
         background-color: red;
         position: absolute;
      }
</style>
</head>
<body>
<div id="game-board"></div>

<script>
      const gameBoard = document.getElementById('game-board');
      let snake = [{x: 10, y: 10}];
      let food = {x: 200, y: 200};

      function drawSnake() {
         gameBoard.innerHTML = '';
         snake.forEach(segment => {
            const snakeElement = document.createElement('div');
            snakeElement.style.left = segment.x + 'px';
            snakeElement.style.top = segment.y + 'px';
            snakeElement.classList.add('snake');
            gameBoard.appendChild(snakeElement);
         });
      }

      function drawFood() {
         const foodElement = document.createElement('div');
         foodElement.style.left = food.x + 'px';
         foodElement.style.top = food.y + 'px';
         foodElement.classList.add('food');
         gameBoard.appendChild(foodElement);
      }

      function moveSnake() {
         const head = {x: snake[0].x + 10, y: snake[0].y};
         snake.unshift(head);
         if (head.x === food.x && head.y === food.y) {
            food.x = Math.floor(Math.random() * 39) * 10;
            food.y = Math.floor(Math.random() * 39) * 10;
         } else {
            snake.pop();
         }
      }

      drawSnake();
      drawFood();
      setInterval(() => {
         moveSnake();
         drawSnake();
      }, 100);
</script>
</body>
</html>
帮我改成红色字体

作者: 马紫萱1 时间: 2025-11-5 14:56
<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
      #game-board {
         width: 400px;
         height: 400px;
         border: 1px solid black;
         position: relative;
      }
      .snake {
         width: 10px;
         height: 10px;
         background-color: green;
         position: absolute;
      }
      .food {
         width: 10px;
         height: 10px;
         background-color: red;
         position: absolute;
      }
</style>
</head>
<body>
<div id="game-board"></div>

<script>
      const gameBoard = document.getElementById('game-board');
      let snake = [{x: 10, y: 10}];
      let food = {x: 200, y: 200};

      function drawSnake() {
         gameBoard.innerHTML = '';
         snake.forEach(segment => {
            const snakeElement = document.createElement('div');
            snakeElement.style.left = segment.x + 'px';
            snakeElement.style.top = segment.y + 'px';
            snakeElement.classList.add('snake');
            gameBoard.appendChild(snakeElement);
         });
      }

      function drawFood() {
         const foodElement = document.createElement('div');
         foodElement.style.left = food.x + 'px';
         foodElement.style.top = food.y + 'px';
         foodElement.classList.add('food');
         gameBoard.appendChild(foodElement);
      }

      function moveSnake() {
         const head = {x: snake[0].x + 10, y: snake[0].y};
         snake.unshift(head);
         if (head.x === food.x && head.y === food.y) {
            food.x = Math.floor(Math.random() * 39) * 10;
            food.y = Math.floor(Math.random() * 39) * 10;
         } else {
            snake.pop();
         }
      }

      drawSnake();
      drawFood();
      setInterval(() => {
         moveSnake();
         drawSnake();
      }, 100);
</script>
</body>
</html>
帮我改成红色字体

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