科学教育

标题: 黄俊轩贪吃蛇游戏 [打印本页]
作者: 黄俊轩    时间: 2025-9-30 10:05
标题: 黄俊轩贪吃蛇游戏
帮我生成一个贪吃蛇游戏的网页代码
作者: kaia    时间: 2025-9-30 10:06
当你制作一个贪吃蛇游戏的网页时，你需要用到HTML、CSS和JavaScript来实现游戏的功能。下面是一个简单的贪吃蛇游戏的网页代码示例：

  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. <style>
  8.     #game-board {
  9.         width: 400px;
  10.         height: 400px;
  11.         border: 1px solid black;
  12.         position: relative;
  13.     }

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

  22.     #food {
  23.         width: 20px;
  24.         height: 20px;
  25.         background-color: red;
  26.         position: absolute;
  27.     }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="game-board"></div>

  33. <script>
  34. const gameBoard = document.getElementById('game-board');
  35. let snake = [{x: 200, y: 200}];
  36. let food = {x: 0, y: 0};
  37. let direction = 'right';

  39. function drawSnake() {
  40.     gameBoard.innerHTML = '';
  41.     snake.forEach(segment => {
  42.         const snakeElement = document.createElement('div');
  43.         snakeElement.style.gridRowStart = segment.y / 20;
  44.         snakeElement.style.gridColumnStart = segment.x / 20;
  45.         snakeElement.classList.add('snake');
  46.         gameBoard.appendChild(snakeElement);
  47.     });
  48. }

  50. function drawFood() {
  51.     const foodElement = document.createElement('div');
  52.     foodElement.style.gridRowStart = food.y / 20;
  53.     foodElement.style.gridColumnStart = food.x / 20;
  54.     foodElement.id = 'food';
  55.     gameBoard.appendChild(foodElement);
  56. }

  58. function moveSnake() {
  59.     const head = {x: snake[0].x, y: snake[0].y};

  61.     switch (direction) {
  62.         case 'up':
  63.             head.y -= 20;
  64.             break;
  65.         case 'down':
  66.             head.y += 20;
  67.             break;
  68.         case 'left':
  69.             head.x -= 20;
  70.             break;
  71.         case 'right':
  72.             head.x += 20;
  73.             break;
  74.     }

  76.     snake.unshift(head);

  78.     if (head.x === food.x && head.y === food.y) {
  79.         // Snake eats the food
  80.         food.x = Math.floor(Math.random() * 20) * 20;
  81.         food.y = Math.floor(Math.random() * 20) * 20;
  82.     } else {
  83.         // Remove tail
  84.         snake.pop();
  85.     }
  86. }

  88. function changeDirection(event) {
  89.     const key = event.key;
  90.     if (key === 'ArrowUp' && direction !== 'down') {
  91.         direction = 'up';
  92.     } else if (key === 'ArrowDown' && direction !== 'up') {
  93.         direction = 'down';
  94.     } else if (key === 'ArrowLeft' && direction !== 'right') {
  95.         direction = 'left';
  96.     } else if (key === 'ArrowRight' && direction !== 'left') {
  97.         direction = 'right';
  98.     }
  99. }

  101. drawFood();
  102. drawSnake();

  104. document.addEventListener('keydown', changeDirection);

  106. setInterval(() => {
  107.     moveSnake();
  108.     drawSnake();
  109. }, 100);
  110. </script>
  111. </body>
  112. </html>
复制代码


在这个示例中，我使用了一个简单的游戏板`game-board`，用绿色方块表示蛇，红色方块表示食物。通过控制蛇的移动方向和吃食物来实现游戏的功能。希望这个示例对你有帮助，你可以根据自己的需求进行修改和扩展。祝你玩得开心！



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