科学教育

标题: 关于贪吃蛇代码 [打印本页]
作者: admin    时间: 2024-7-16 20:23
标题: 关于贪吃蛇代码
可以为我写一个贪吃蛇代码吗？
作者: kaia    时间: 2024-7-16 20:23
当然可以！让我们一起来写一个简单的贪吃蛇游戏吧。为了让你更好地理解，我们会用HTML、CSS和JavaScript这三种语言来完成这个小项目。

1. **HTML部分（index.html）**:
首先，我们需要一个基本的结构，包含一个画布（canvas），用来绘制我们的游戏。请将以下代码保存为 `index.html` 文件。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇</title>
  6.     <style>
  7.         canvas {
  8.             background-color: #000;
  9.             display: block;
  10.             margin: 0 auto;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  16.     <script src="snake.js"></script>
  17. </body>
  18. </html>
复制代码


2. **CSS部分**:
CSS部分已经在上面的HTML文件里包含了，用于给我们的画布（canvas）一个背景颜色，让它看起来更像是个游戏界面。

3. **JavaScript部分（snake.js）**:
这是最重要的部分，在这里我们将实现在画布上绘制贪吃蛇和控制它运动的逻辑。请将以下代码保存为 `snake.js` 文件。

  1. let canvas = document.getElementById('gameCanvas');
  2. let ctx = canvas.getContext('2d');

  4. const gridSize = 20;      // 每个方格的大小
  5. const gridCount = 20;     // 网格数量
  6. let snake = [ {x: 10, y: 10} ];  // 蛇的初始位置
  7. let snakeLength = 1;      // 蛇的初始长度
  8. let food = {x: 15, y: 15};   // 食物的初始位置
  9. let direction = 'RIGHT';  // 蛇的初始方向

  11. // 绘制游戏场景
  12. function drawGame() {
  13.     // 清除画布
  14.     ctx.clearRect(0, 0, canvas.width, canvas.height);

  16.     // 绘制食物
  17.     ctx.fillStyle = 'red';
  18.     ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

  20.     // 绘制蛇
  21.     ctx.fillStyle = 'lime';
  22.     for (let part of snake) {
  23.         ctx.fillRect(part.x * gridSize, part.y * gridSize, gridSize, gridSize);
  24.     }

  26.     // 移动蛇
  27.     let head = { x: snake[0].x, y: snake[0].y }; // 获取蛇头的位置
  28.     if (direction == 'LEFT') head.x--;
  29.     if (direction == 'UP') head.y--;
  30.     if (direction == 'RIGHT') head.x++;
  31.     if (direction == 'DOWN') head.y++;

  33.     // 检查蛇是否吃到食物
  34.     if (head.x === food.x && head.y === food.y) {
  35.         snakeLength++;  // 增加蛇的长度
  36.         food = {          // 生成新的食物位置
  37.             x: Math.floor(Math.random() * gridCount),
  38.             y: Math.floor(Math.random() * gridCount)
  39.         };
  40.     }

  42.     // 把新的头部加到蛇上
  43.     snake.unshift(head);

  45.     // 保持蛇的长度
  46.     if (snake.length > snakeLength) {
  47.         snake.pop();
  48.     }

  50.     // 检查蛇是否撞到自己或墙壁
  51.     if (head.x < 0 || head.x >= gridCount || head.y < 0 || head.y >= gridCount || isSnakeCollideSelf(snake)) {
  52.         alert("游戏结束！");
  53.         resetGame();
  54.     }

  56.     requestAnimationFrame(drawGame); // 不断调用drawGame
  57. }

  59. // 检查蛇是否撞到自己
  60. function isSnakeCollideSelf(snake) {
  61.     for (let i = 1; i < snake.length; i++) {
  62.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
  63.             return true;
  64.         }
  65.     }
  66.     return false;
  67. }

  69. // 处理键盘输入
  70. document.addEventListener('keydown', function (event) {
  71.     if (event.key === 'ArrowLeft' && direction !== 'RIGHT') direction = 'LEFT';
  72.     if (event.key === 'ArrowUp' && direction !== 'DOWN') direction = 'UP';
  73.     if (event.key === 'ArrowRight' && direction !== 'LEFT') direction = 'RIGHT';
  74.     if (event.key === 'ArrowDown' && direction !== 'UP') direction = 'DOWN';
  75. });

  77. // 重置游戏
  78. function resetGame() {
  79.     snake = [ {x: 10, y: 10} ];
  80.     snakeLength = 1;
  81.     direction = 'RIGHT';
  82.     food = {
  83.         x: Math.floor(Math.random() * gridCount),
  84.         y: Math.floor(Math.random() * gridCount)
  85.     };
  86. }

  88. requestAnimationFrame(drawGame); // 开始游戏
复制代码


看，这就是一个简单的贪吃蛇游戏代码。你可以把这些文件放在同一个目录下，然后用浏览器打开 `index.html` 文件，就可以玩这个游戏啦！

有不明白的地方随时问我哦！祝你玩的开心！



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