科学教育

标题: 陈若冰601 [打印本页]
作者: 陈若冰601.    时间: 2025-10-9 12:03
标题: 陈若冰601
生成贪吃蛇网页代码
作者: kaia    时间: 2025-10-9 12:03
当然可以！贪吃蛇是一个很有趣的游戏，你可以使用 HTML、CSS 和 JavaScript 来创建一个简单的贪吃蛇游戏。下面是一个简单的示例代码：

首先是 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="gameArea"></div>
  11. <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


接着是 CSS 部分（style.css）：

  1. #gameArea {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid black;
  5. }
复制代码


最后是 JavaScript 部分（script.js）：

  1. const gameArea = document.getElementById("gameArea");
  2. const blockSize = 20;
  3. let snake = [{x: 10, y: 10}];
  4. let food = {x: 15, y: 15};
  5. let dx = 1;
  6. let dy = 0;

  8. function draw() {
  9.     gameArea.innerHTML = '';
  10.    
  11.     snake.forEach(segment => {
  12.         const element = document.createElement('div');
  13.         element.style.width = blockSize + 'px';
  14.         element.style.height = blockSize + 'px';
  15.         element.style.position = 'absolute';
  16.         element.style.backgroundColor = 'green';
  17.         element.style.left = segment.x * blockSize + 'px';
  18.         element.style.top = segment.y * blockSize + 'px';
  19.         gameArea.appendChild(element);
  20.     });

  22.     const foodElement = document.createElement('div');
  23.     foodElement.style.width = blockSize + 'px';
  24.     foodElement.style.height = blockSize + 'px';
  25.     foodElement.style.position = 'absolute';
  26.     foodElement.style.backgroundColor = 'red';
  27.     foodElement.style.left = food.x * blockSize + 'px';
  28.     foodElement.style.top = food.y * blockSize + 'px';
  29.     gameArea.appendChild(foodElement);
  30. }

  32. function update() {
  33.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
  34.     snake.unshift(head);

  36.     if (head.x === food.x && head.y === food.y) {
  37.         food.x = Math.floor(Math.random() * (gameArea.offsetWidth / blockSize));
  38.         food.y = Math.floor(Math.random() * (gameArea.offsetHeight / blockSize));
  39.     } else {
  40.         snake.pop();
  41.     }
  42. }

  44. function loop() {
  45.     update();
  46.     draw();
  47.     setTimeout(() => {
  48.         requestAnimationFrame(loop);
  49.     }, 100);
  50. }

  52. document.addEventListener('keydown', e => {
  53.     switch(e.key) {
  54.         case 'ArrowUp':
  55.             dx = 0;
  56.             dy = -1;
  57.             break;
  58.         case 'ArrowDown':
  59.             dx = 0;
  60.             dy = 1;
  61.             break;
  62.         case 'ArrowLeft':
  63.             dx = -1;
  64.             dy = 0;
  65.             break;
  66.         case 'ArrowRight':
  67.             dx = 1;
  68.             dy = 0;
  69.             break;
  70.     }
  71. });

  73. loop();
复制代码


在这个简单的示例中，我们创建了一个贪吃蛇游戏，玩家可以控制贪吃蛇的移动方向，吃到食物后贪吃蛇会变长。希望对你有所帮助！如果有任何问题欢迎随时提出哦~



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