科学教育

标题: 朱益佳贪吃蛇游戏 [打印本页]
作者: 朱益佳    时间: 2025-9-30 09:55
标题: 朱益佳贪吃蛇游戏
帮我生成贪吃蛇游戏代码
作者: kaia    时间: 2025-9-30 09:55
当创建一个贪吃蛇游戏时，我们需要使用HTML、CSS和JavaScript来实现游戏界面和游戏逻辑。下面是一个简单的示例代码，你可以在浏览器中运行它来玩贪吃蛇游戏。

首先是HTML部分:

  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.             position: relative;
  11.         }

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

  20.         .food {
  21.             width: 20px;
  22.             height: 20px;
  23.             background-color: red;
  24.             position: absolute;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div id="game-board"></div>
  30.     <script src="snake-game.js"></script>
  31. </body>
  32. </html>
复制代码


接着是JavaScript部分，将以下代码保存为`snake-game.js`文件:

  1. const gameBoard = document.getElementById('game-board');
  2. let snake = [{x: 200, y: 200}];
  3. let food = {x: 0, y: 0};
  4. let score = 0;
  5. let dx = 0;
  6. let dy = 0;

  8. function main() {
  9.     if (isGameOver()) {
  10.         alert('游戏结束！得分：' + score);
  11.         return;
  12.     }

  14.     updateSnake();
  15.     drawSnake();
  16.     drawFood();

  18.     setTimeout(main, 100);
  19. }

  21. function isGameOver() {
  22.     if (snake[0].x < 0 || snake[0].x >= gameBoard.clientWidth || snake[0].y < 0 || snake[0].y >= gameBoard.clientHeight) {
  23.         return true;
  24.     }

  26.     for (let i = 1; i < snake.length; i++) {
  27.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
  28.             return true;
  29.         }
  30.     }

  32.     return false;
  33. }

  35. function updateSnake() {
  36.     const newHead = {x: snake[0].x + dx, y: snake[0].y + dy};
  37.     snake.unshift(newHead);

  39.     if (newHead.x === food.x && newHead.y === food.y) {
  40.         score += 10;
  41.         generateFood();
  42.     } else {
  43.         snake.pop();
  44.     }
  45. }

  47. function drawSnake() {
  48.     while (gameBoard.firstChild) {
  49.         gameBoard.removeChild(gameBoard.firstChild);
  50.     }

  52.     snake.forEach(segment => {
  53.         const snakeElement = document.createElement('div');
  54.         snakeElement.style.left = segment.x + 'px';
  55.         snakeElement.style.top = segment.y + 'px';
  56.         snakeElement.classList.add('snake-body');
  57.         gameBoard.appendChild(snakeElement);
  58.     });
  59. }

  61. function generateFood() {
  62.     food.x = Math.floor(Math.random() * gameBoard.clientWidth / 20) * 20;
  63.     food.y = Math.floor(Math.random() * gameBoard.clientHeight / 20) * 20;
  64. }

  66. function drawFood() {
  67.     const foodElement = document.createElement('div');
  68.     foodElement.style.left = food.x + 'px';
  69.     foodElement.style.top = food.y + 'px';
  70.     foodElement.classList.add('food');
  71.     gameBoard.appendChild(foodElement);
  72. }

  74. document.addEventListener('keydown', e => {
  75.     if (e.key === 'ArrowUp' && dy !== 20) {
  76.         dx = 0;
  77.         dy = -20;
  78.     }
  79.     if (e.key === 'ArrowDown' && dy !== -20) {
  80.         dx = 0;
  81.         dy = 20;
  82.     }
  83.     if (e.key === 'ArrowLeft' && dx !== 20) {
  84.         dx = -20;
  85.         dy = 0;
  86.     }
  87.     if (e.key === 'ArrowRight' && dx !== -20) {
  88.         dx = 20;
  89.         dy = 0;
  90.     }
  91. });

  93. generateFood();
  94. main();
复制代码


这样，你就可以在浏览器中玩到简单的贪吃蛇游戏了。在游戏中，你控制蛇的移动方向，吃到食物加分，但要注意避免蛇撞墙或撞到自己哦！希望你玩得开心！
作者: 朱益佳    时间: 2025-9-30 10:05
帮我分类成html、css、js
作者: kaia    时间: 2025-9-30 10:06
朱益佳 发表于 2025-09-30 10:05
帮我分类成html、css、js


当创建一个贪吃蛇游戏时，我们可以将代码分成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="game-board"></div>
  11.     <script src="snake-game.js"></script>
  12. </body>
  13. </html>
复制代码


接着是CSS部分，用于样式设计：

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

  8. .snake-body {
  9.     width: 20px;
  10.     height: 20px;
  11.     background-color: green;
  12.     position: absolute;
  13. }

  15. .food {
  16.     width: 20px;
  17.     height: 20px;
  18.     background-color: red;
  19.     position: absolute;
  20. }
复制代码


最后是JavaScript部分，用于实现游戏逻辑：

  1. const gameBoard = document.getElementById('game-board');
  2. let snake = [];
  3. let food = {x: 0, y: 0};
  4. let score = 0;
  5. let dx = 0;
  6. let dy = 0;

  8. // 其他 JavaScript 代码在这里

  10. document.addEventListener('keydown', e => {
  11.     if (e.key === 'ArrowUp' && dy !== 20) {
  12.         dx = 0;
  13.         dy = -20;
  14.     }
  15.     if (e.key === 'ArrowDown' && dy !== -20) {
  16.         dx = 0;
  17.         dy = 20;
  18.     }
  19.     if (e.key === 'ArrowLeft' && dx !== 20) {
  20.         dx = -20;
  21.         dy = 0;
  22.     }
  23.     if (e.key === 'ArrowRight' && dx !== -20) {
  24.         dx = 20;
  25.         dy = 0;
  26.     }
  27. });

  29. generateFood();
  30. main();
复制代码


将以上三部分分别保存为`index.html`、`style.css`和`snake-game.js`文件，并放在同一个文件夹内。然后在浏览器中打开`index.html`文件，就可以开始玩贪吃蛇游戏了。希望你玩得开心！
作者: 280    时间: 2025-11-4 09:46
帮我报CSS变成紫色。
作者: 280    时间: 2025-11-4 09:48
帮我把CSS变成紫色。
作者: 朱益佳    时间: 2025-11-4 09:54
#game-board {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}

.snake-body {
    width: 20px;
    height: 20px;
    background-color: green;
    position: absolute;
}

.food {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
}
帮我把字体变成紫色。
作者: 朱益佳    时间: 2025-11-4 09:59

#game-board {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}

.snake-body {
    width: 20px;
    height: 20px;
    background-color: green;
    position: absolute;
}

.food {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
}帮我把字体变成紫色。
作者: 朱益佳    时间: 2025-11-11 09:38
function drawSnake() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    snake.forEach(part => {
        context.fillStyle = "green";
        context.fillRect(part.x, part.y, gridSize, gridSize);
    });
}这段话大概什么意思
作者: 丁香仪    时间: 2025-11-11 09:45
在js文件中修改初始化参数
作者: 朱益佳    时间: 2025-11-11 09:50
:'(:'(:'(:'(:'(:'(:'(
作者: 朱益佳    时间: 2025-11-11 10:00
function drawSnake() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    snake.forEach(part => {
        context.fillStyle = "green";
        context.fillRect(part.x, part.y, gridSize, gridSize);
    });
}这段话大概什么意思
作者: 朱益佳    时间: 2025-12-2 09:43
帮我生成一个飞机大战的HTML,JS,CSS 的网页代码。
作者: 朱益佳    时间: 2025-12-2 09:45
帮我生成一个HTML的网页代码
作者: 朱益佳    时间: 2025-12-2 09:48
帮我生成一个飞机大战的HTML的网页代码。



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