科学教育

标题: 陈子睿贪吃蛇 [打印本页]
作者: 陈子睿    时间: 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 name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>贪吃蛇游戏</title>
  7. <link rel="stylesheet" type="text/css" href="style.css">
  8. </head>
  9. <body>
  10. <div class="game-container">
  11.   <div id="snake"></div>
  12.   <div id="food"></div>
  13. </div>
  14. <script src="script.js"></script>
  15. </body>
  16. </html>
复制代码


### CSS (style.css)
  1. body {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   height: 100vh;
  6.   margin: 0;
  7. }

  9. .game-container {
  10.   width: 400px;
  11.   height: 400px;
  12.   border: 2px solid #000;
  13.   position: relative;
  14. }

  16. #snake {
  17.   width: 10px;
  18.   height: 10px;
  19.   background-color: green;
  20.   position: absolute;
  21. }

  23. #food {
  24.   width: 10px;
  25.   height: 10px;
  26.   background-color: red;
  27.   position: absolute;
  28. }
复制代码


### JavaScript (script.js)
  1. const gameContainer = document.querySelector('.game-container');
  2. const snake = document.getElementById('snake');
  3. const food = document.getElementById('food');

  5. let snakeX = 0;
  6. let snakeY = 0;
  7. let foodX = 0;
  8. let foodY = 0;

  10. function updateSnake() {
  11.   snake.style.left = snakeX + 'px';
  12.   snake.style.top = snakeY + 'px';
  13. }

  15. function updateFood() {
  16.   food.style.left = foodX + 'px';
  17.   food.style.top = foodY + 'px';
  18. }

  20. function generateFood() {
  21.   foodX = Math.floor(Math.random() * 39) * 10;
  22.   foodY = Math.floor(Math.random() * 39) * 10;
  23.   updateFood();
  24. }

  26. document.addEventListener('keydown', function(e) {
  27.   if (e.key === 'ArrowRight') {
  28.     snakeX += 10;
  29.   } else if (e.key === 'ArrowLeft') {
  30.     snakeX -= 10;
  31.   } else if (e.key === 'ArrowDown') {
  32.     snakeY += 10;
  33.   } else if (e.key === 'ArrowUp') {
  34.     snakeY -= 10;
  35.   }
  36.   updateSnake();

  38.   // Check if snake eats food
  39.   if (snakeX === foodX && snakeY === foodY) {
  40.     generateFood();
  41.   }
  42. });

  44. generateFood();
复制代码


以上就是一个简单的贪吃蛇游戏网页的代码示例。通过这段代码，你可以在网页上看到一个贪吃蛇游戏，并且可以通过方向键控制蛇的移动，让它吃到食物。希望对你有所帮助。如果还有其他问题，欢迎随时问我哦！



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