科学教育

标题: 陈丁赫 [打印本页]
作者: 陈丁赫    时间: 2024-7-14 10:05
标题: 陈丁赫
你好，你是一名专业的代码设计师，请你用html、css、js生成一个贪吃蛇游戏。
作者: kaia    时间: 2024-7-14 10:05
当然可以！以下是一个简单的贪吃蛇游戏的实现，使用了HTML、CSS和JavaScript。这个示例包含一个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.         body {
  9.             display: flex;
  10.             justify-content: center;
  11.             align-items: center;
  12.             height: 100vh;
  13.             margin: 0;
  14.             background-color: #f0f0f0;
  15.         }

  17.         canvas {
  18.             border: 1px solid black;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  24.     <script>
  25.         const canvas = document.getElementById("gameCanvas");
  26.         const ctx = canvas.getContext("2d");

  28.         const gridSize = 20;
  29.         const tileCount = canvas.width / gridSize;

  31.         let snake = [{ x: 10, y: 10 }];
  32.         let direction = { x: 1, y: 0 };
  33.         let food = { x: 5, y: 5 };
  34.         let gameOver = false;

  36.         function drawTile(x, y, color) {
  37.             ctx.fillStyle = color;
  38.             ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
  39.         }

  41.         function update() {
  42.             if (gameOver) return;

  44.             const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

  46.             // 检查是否撞墙或撞自己
  47.             if (
  48.                 head.x < 0 ||
  49.                 head.x >= tileCount ||
  50.                 head.y < 0 ||
  51.                 head.y >= tileCount ||
  52.                 snake.some(segment => segment.x === head.x && segment.y === head.y)
  53.             ) {
  54.                 gameOver = true;
  55.                 alert("游戏结束！");
  56.                 return;
  57.             }

  59.             snake.unshift(head);

  61.             // 检查是否吃到食物
  62.             if (head.x === food.x && head.y === food.y) {
  63.                 placeFood();
  64.             } else {
  65.                 snake.pop();
  66.             }
  67.         }

  69.         function draw() {
  70.             ctx.clearRect(0, 0, canvas.width, canvas.height);
  71.             snake.forEach(segment => drawTile(segment.x, segment.y, "green"));
  72.             drawTile(food.x, food.y, "red");
  73.         }

  75.         function placeFood() {
  76.             let newFoodPosition;
  77.             while (true) {
  78.                 newFoodPosition = {
  79.                     x: Math.floor(Math.random() * tileCount),
  80.                     y: Math.floor(Math.random() * tileCount)
  81.                 };
  82.                 if (!snake.some(segment => segment.x === newFoodPosition.x && segment.y === newFoodPosition.y)) {
  83.                     break;
  84.                 }
  85.             }
  86.             food = newFoodPosition;
  87.         }

  89.         function changeDirection(event) {
  90.             switch (event.key) {
  91.                 case "ArrowUp":
  92.                     if (direction.y === 0) direction = { x: 0, y: -1 };
  93.                     break;
  94.                 case "ArrowDown":
  95.                     if (direction.y === 0) direction = { x: 0, y: 1 };
  96.                     break;
  97.                 case "ArrowLeft":
  98.                     if (direction.x === 0) direction = { x: -1, y: 0 };
  99.                     break;
  100.                 case "ArrowRight":
  101.                     if (direction.x === 0) direction = { x: 1, y: 0 };
  102.                     break;
  103.             }
  104.         }

  106.         document.addEventListener("keydown", changeDirection);

  108.         function gameLoop() {
  109.             update();
  110.             draw();
  111.             setTimeout(gameLoop, 100);
  112.         }

  114.         placeFood();
  115.         gameLoop();
  116.     </script>
  117. </body>
  118. </html>
复制代码


这个简化版的贪吃蛇游戏包含了基本的移动、吃食物以及碰撞检测功能。你可以在浏览器中直接运行这个HTML文件来玩贪吃蛇游戏。如果你有任何其他要求或需要进一步改进，可以告诉我！
作者: 陈丁赫    时间: 2024-7-14 10:21
那你可以把html、css、js分三部分，再生成一个贪吃蛇游戏吗？
作者: kaia    时间: 2024-7-14 10:21
陈丁赫 发表于 2024-07-14 10:21
那你可以把html、css、js分三部分，再生成一个贪吃蛇 ...


当然可以！以下是将HTML、CSS和JavaScript代码分离后的贪吃蛇游戏。

### HTML (`index.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="styles.css">
  8. </head>
  9. <body>
  10.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  11.     <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


### CSS (`styles.css`)
  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     margin: 0;
  7.     background-color: #f0f0f0;
  8. }

  10. canvas {
  11.     border: 1px solid black;
  12. }
复制代码


### JavaScript (`script.js`)
  1. const canvas = document.getElementById("gameCanvas");
  2. const ctx = canvas.getContext("2d");

  4. const gridSize = 20;
  5. const tileCount = canvas.width / gridSize;

  7. let snake = [{ x: 10, y: 10 }];
  8. let direction = { x: 1, y: 0 };
  9. let food = { x: 5, y: 5 };
  10. let gameOver = false;

  12. function drawTile(x, y, color) {
  13.     ctx.fillStyle = color;
  14.     ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
  15. }

  17. function update() {
  18.     if (gameOver) return;

  20.     const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

  22.     // 检查是否撞墙或撞自己
  23.     if (
  24.         head.x < 0 ||
  25.         head.x >= tileCount ||
  26.         head.y < 0 ||
  27.         head.y >= tileCount ||
  28.         snake.some(segment => segment.x === head.x && segment.y === head.y)
  29.     ) {
  30.         gameOver = true;
  31.         alert("游戏结束！");
  32.         return;
  33.     }

  35.     snake.unshift(head);

  37.     // 检查是否吃到食物
  38.     if (head.x === food.x && head.y === food.y) {
  39.         placeFood();
  40.     } else {
  41.         snake.pop();
  42.     }
  43. }

  45. function draw() {
  46.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  47.     snake.forEach(segment => drawTile(segment.x, segment.y, "green"));
  48.     drawTile(food.x, food.y, "red");
  49. }

  51. function placeFood() {
  52.     let newFoodPosition;
  53.     while (true) {
  54.         newFoodPosition = {
  55.             x: Math.floor(Math.random() * tileCount),
  56.             y: Math.floor(Math.random() * tileCount)
  57.         };
  58.         if (!snake.some(segment => segment.x === newFoodPosition.x && segment.y === newFoodPosition.y)) {
  59.             break;
  60.         }
  61.     }
  62.     food = newFoodPosition;
  63. }

  65. function changeDirection(event) {
  66.     switch (event.key) {
  67.         case "ArrowUp":
  68.             if (direction.y === 0) direction = { x: 0, y: -1 };
  69.             break;
  70.         case "ArrowDown":
  71.             if (direction.y === 0) direction = { x: 0, y: 1 };
  72.             break;
  73.         case "ArrowLeft":
  74.             if (direction.x === 0) direction = { x: -1, y: 0 };
  75.             break;
  76.         case "ArrowRight":
  77.             if (direction.x === 0) direction = { x: 1, y: 0 };
  78.             break;
  79.     }
  80. }

  82. document.addEventListener("keydown", changeDirection);

  84. function gameLoop() {
  85.     update();
  86.     draw();
  87.     setTimeout(gameLoop, 100);
  88. }

  90. placeFood();
  91. gameLoop();
复制代码


将这些代码分别保存到不同的文件中（`index.html`, `styles.css`, `script.js`），然后在浏览器中打开`index.html`即可运行贪吃蛇游戏。如果有需要进一步改进或增加功能，请告诉我！



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