科学教育

标题: 金佳琸的贪吃蛇 [打印本页]
作者: 金外金佳琸    时间: 2025-9-30 15:35
标题: 金佳琸的贪吃蛇
帮我生成一个贪吃蛇，
作者: kaia    时间: 2025-9-30 15:35
嗨，我是学伴金佳琸！生成一个贪吃蛇其实可以用网页编程来完成哦。首先，你需要一个空白的网页，然后在网页中添加一些代码，让蛇可以移动和吃食物。

让我们先创建一个简单的贪吃蛇游戏吧！我们可以用HTML、CSS和JavaScript来实现。

1. HTML部分：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>金佳琸的贪吃蛇</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css">
  6. </head>
  7. <body>
  8.     <div id="gameArea"></div>
  9.     <script src="script.js"></script>
  10. </body>
  11. </html>
复制代码


2. CSS部分（style.css文件）：
  1. #gameArea {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid black;
  5.     position: relative;
  6. }
  7. .snake {
  8.     width: 10px;
  9.     height: 10px;
  10.     background-color: green;
  11.     position: absolute;
  12. }
  13. food {
  14.     width: 10px;
  15.     height: 10px;
  16.     background-color: red;
  17.     position: absolute;
  18. }
复制代码


3. JavaScript部分（script.js文件）：
  1. const gameArea = document.getElementById('gameArea');
  2. let snake = [{x: 10, y: 10}];
  3. let food = {x: 200, y: 200};
  4. let direction = 'right';

  6. function drawSnake() {
  7.     gameArea.innerHTML = '';
  8.     snake.forEach(segment => {
  9.         const snakeElement = document.createElement('div');
  10.         snakeElement.style.left = segment.x + 'px';
  11.         snakeElement.style.top = segment.y + 'px';
  12.         snakeElement.classList.add('snake');
  13.         gameArea.appendChild(snakeElement);
  14.     });
  15. }

  17. function drawFood() {
  18.     const foodElement = document.createElement('div');
  19.     foodElement.style.left = food.x + 'px';
  20.     foodElement.style.top = food.y + 'px';
  21.     foodElement.classList.add('food');
  22.     gameArea.appendChild(foodElement);
  23. }

  25. function moveSnake() {
  26.     const head = {x: snake[0].x, y: snake[0].y};
  27.     switch(direction) {
  28.         case 'up':
  29.             head.y -= 10;
  30.             break;
  31.         case 'down':
  32.             head.y += 10;
  33.             break;
  34.         case 'left':
  35.             head.x -= 10;
  36.             break;
  37.         case 'right':
  38.             head.x += 10;
  39.             break;
  40.     }

  42.     snake.unshift(head);

  44.     if (head.x === food.x && head.y === food.y) {
  45.         food.x = Math.floor(Math.random() * 40) * 10;
  46.         food.y = Math.floor(Math.random() * 40) * 10;
  47.     } else {
  48.         snake.pop();
  49.     }
  50. }

  52. function changeDirection(event) {
  53.     switch(event.key) {
  54.         case 'ArrowUp':
  55.             direction = 'up';
  56.             break;
  57.         case 'ArrowDown':
  58.             direction = 'down';
  59.             break;
  60.         case 'ArrowLeft':
  61.             direction = 'left';
  62.             break;
  63.         case 'ArrowRight':
  64.             direction = 'right';
  65.             break;
  66.     }
  67. }

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

  71. function gameLoop() {
  72.     moveSnake();
  73.     drawSnake();
  74.     drawFood();
  75. }

  77. setInterval(gameLoop, 100);
复制代码


这样，当你打开这个网页时，就会看到一个简单的贪吃蛇游戏了！你可以通过方向键控制蛇的移动方向，让蛇去吃食物。希望你玩得开心哦！如果有任何问题，记得随时来问我！



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