科学教育

标题: 钱奕澈贪吃蛇 [打印本页]
作者: 钱奕澈    时间: 2025-9-30 09:55
标题: 钱奕澈贪吃蛇
帮我生成一个贪吃蛇小游戏的代码
作者: kaia    时间: 2025-9-30 09:55
当然可以！贪吃蛇是一个非常经典的小游戏，在网页编程中也可以很容易地实现。以下是一个简单的贪吃蛇游戏代码示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>贪吃蛇游戏</title>
  5.     <style>
  6.         #game-board {
  7.             width: 400px;
  8.             height: 400px;
  9.             border: 1px solid black;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="game-board"></div>

  16.     <script>
  17.         const gameBoard = document.getElementById('game-board');
  18.         const boardSize = 20;
  19.         const cellSize = gameBoard.offsetWidth / boardSize;
  20.         const snake = [{ x: 10, y: 10 }];
  21.         let direction = 'right';

  23.         function drawSnake() {
  24.             gameBoard.innerHTML = '';
  25.             snake.forEach(segment => {
  26.                 const snakeElement = document.createElement('div');
  27.                 snakeElement.style.gridRowStart = segment.y;
  28.                 snakeElement.style.gridColumnStart = segment.x;
  29.                 snakeElement.classList.add('snake');
  30.                 gameBoard.appendChild(snakeElement);
  31.             });
  32.         };

  34.         function update() {
  35.             const head = { ...snake[0] };

  37.             switch(direction) {
  38.                 case 'up':
  39.                     head.y--;
  40.                     break;
  41.                 case 'down':
  42.                     head.y++;
  43.                     break;
  44.                 case 'left':
  45.                     head.x--;
  46.                     break;
  47.                 case 'right':
  48.                     head.x++;
  49.                     break;
  50.             }

  52.             snake.unshift(head);

  54.             drawSnake();
  55.         }

  57.         setInterval(update, 1000);

  59.         document.addEventListener('keydown', event => {
  60.             switch(event.key) {
  61.                 case 'ArrowUp':
  62.                     direction = 'up';
  63.                     break;
  64.                 case 'ArrowDown':
  65.                     direction = 'down';
  66.                     break;
  67.                 case 'ArrowLeft':
  68.                     direction = 'left';
  69.                     break;
  70.                 case 'ArrowRight':
  71.                     direction = 'right';
  72.                     break;
  73.             }
  74.         });
  75.     </script>
  76. </body>
  77. </html>
复制代码


在这个示例中，我们创建了一个简单的贪吃蛇游戏界面，并实现了蛇的移动功能。你可以复制这段代码到一个HTML文件中，然后在浏览器中打开来查看游戏效果。希望你会喜欢这个小游戏！如果有任何问题，欢迎随时向我提问。
作者: 钱奕澈    时间: 2025-9-30 10:10
分类成js,css,html
作者: kaia    时间: 2025-9-30 10:10
钱奕澈 发表于 2025-09-30 10:10
分类成js,css,html


当然可以，下面是贪吃蛇小游戏的代码示例分成了三个部分：HTML、CSS和JavaScript。你可以将它们分别保存为不同的文件，然后把它们放在同一个文件夹里运行。


### HTML（index.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" href="style.css">
  8. </head>
  9. <body>
  10.     <div id="game-board"></div>
  11.     <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


### CSS（style.css）

  1. #game-board {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid black;
  5. }

  7. .snake {
  8.     width: 100%;
  9.     height: 100%;
  10.     background-color: green;
  11. }
复制代码


### JavaScript（script.js）

```javascript
const gameBoard = document.getElementById('game-board');
const boardSize = 20;
const cellSize = gameBoard.offsetWidth / boardSize;
const snake = [{x: 10, y: 10}];
let direction = 'right';

function drawSnake() {
    gameBoard.innerHTML = '';
    snake.forEach(segment => {
        const snakeElement = document.createElement('div');



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