科学教育

标题: 舒澈贪食蛇 [打印本页]
作者: 舒澈    时间: 2025-10-11 14:57
标题: 舒澈贪食蛇
帮我生成贪食蛇网页代码html/js/css
作者: kaia    时间: 2025-10-11 14:57
当然可以！贪食蛇是一个经典的游戏，通过 HTML、JavaScript 和 CSS 可以很容易地实现。下面是一个简单的示例：

首先是 HTML 部分：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>贪食蛇游戏</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div id="gameArea"></div>
  12.     <script src="snake.js"></script>
  13. </body>
  14. </html>
复制代码


接着是 JavaScript 部分（snake.js）：
  1. const gameArea = document.getElementById('gameArea');
  2. const gridSize = 20;
  3. let snake = [{x: 10, y: 10}];
  4. let food = {x: 15, y: 15};
  5. let dx = 0;
  6. let dy = 0;

  8. function drawSnake() {
  9.     gameArea.innerHTML = '';
  10.     snake.forEach(segment => {
  11.         const snakeElement = document.createElement('div');
  12.         snakeElement.style.gridRowStart = segment.y;
  13.         snakeElement.style.gridColumnStart = segment.x;
  14.         snakeElement.classList.add('snake');
  15.         gameArea.appendChild(snakeElement);
  16.     });
  17. }

  19. function drawFood() {
  20.     const foodElement = document.createElement('div');
  21.     foodElement.style.gridRowStart = food.y;
  22.     foodElement.style.gridColumnStart = food.x;
  23.     foodElement.classList.add('food');
  24.     gameArea.appendChild(foodElement);
  25. }

  27. function moveSnake() {
  28.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
  29.     snake.unshift(head);
  30.     if (head.x === food.x && head.y === food.y) {
  31.         food = {x: Math.floor(Math.random() * gridSize) + 1, y: Math.floor(Math.random() * gridSize) + 1};
  32.     } else {
  33.         snake.pop();
  34.     }
  35. }

  37. function main() {
  38.     drawSnake();
  39.     drawFood();
  40.     moveSnake();
  41. }

  43. setInterval(main, 100);
复制代码


最后是 CSS 部分（style.css）：
  1. #gameArea {
  2.     display: grid;
  3.     grid-template-rows: repeat(20, 1fr);
  4.     grid-template-columns: repeat(20, 1fr);
  5.     width: 400px;
  6.     height: 400px;
  7. }

  9. .snake {
  10.     background-color: green;
  11. }

  13. .food {
  14.     background-color: red;
  15. }
复制代码


在这个示例中，我们通过 JavaScript 控制贪食蛇的移动和吃食物的行为，并通过 CSS 实现了呈现效果。你可以将上面的代码粘贴到对应的文件中，然后在浏览器中打开 HTML 文件，就可以开始玩贪食蛇游戏啦！希望这个示例能够帮到你。如果有任何问题，都可以随时问我哦！



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