科学教育

标题: 贪吃蛇代码 [打印本页]
作者: 13758623687    时间: 2024-7-17 11:20
标题: 贪吃蛇代码
请生成一个贪吃蛇游戏的代码
作者: kaia    时间: 2024-7-17 11:21
当然可以！贪吃蛇游戏是一个很有趣的项目，我们可以用HTML、CSS和JavaScript来实现。下面我会一步一步地给你讲解每一部分代码。

### 1. HTML 部分
首先，我们需要一个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.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  11.     <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


### 2. CSS 部分
接下来，我们写一些简单的CSS来让画布看起来更好看一些。

  1. /* style.css */
  2. body {
  3.     display: flex;
  4.     justify-content: center;
  5.     align-items: center;
  6.     height: 100vh;
  7.     margin: 0;
  8.     background-color: #f0f0f0;
  9. }
  10. canvas {
  11.     border: 1px solid #000;
  12. }
复制代码


### 3. JavaScript 部分
最后，这是我们的主要部分，也就是贪吃蛇的逻辑部分。

  1. // script.js
  2. const canvas = document.getElementById('gameCanvas');
  3. const ctx = canvas.getContext('2d');

  5. // 设置常量
  6. const unit = 20;
  7. let snake = [{ x: 80, y: 80 }];
  8. let food = { x: 160, y: 160 };
  9. let direction = 'RIGHT';
  10. let changingDirection = false;
  11. let score = 0;

  13. // 控制方向
  14. document.addEventListener('keydown', changeDirection);

  16. function main() {
  17.     if (checkGameOver()) return;

  19.     changingDirection = false;
  20.     setTimeout(() => {
  21.         clearCanvas();
  22.         drawFood();
  23.         moveSnake();
  24.         drawSnake();
  25.         main();
  26.     }, 100);
  27. }

  29. function clearCanvas() {
  30.     ctx.fillStyle = 'white';
  31.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  32. }

  34. function drawSnake() {
  35.     ctx.fillStyle = 'lightgreen';
  36.     ctx.strokeStyle = 'darkgreen';

  38.     snake.forEach(segment => {
  39.         ctx.fillRect(segment.x, segment.y, unit, unit);
  40.         ctx.strokeRect(segment.x, segment.y, unit, unit);
  41.     });
  42. }

  44. function drawFood() {
  45.     ctx.fillStyle = 'red';
  46.     ctx.fillRect(food.x, food.y, unit, unit);
  47. }

  49. function moveSnake() {
  50.     const head = { x: snake[0].x, y: snake[0].y };

  52.     switch (direction) {
  53.         case 'UP':
  54.             head.y -= unit;
  55.             break;
  56.         case 'DOWN':
  57.             head.y += unit;
  58.             break;
  59.         case 'LEFT':
  60.             head.x -= unit;
  61.             break;
  62.         case 'RIGHT':
  63.             head.x += unit;
  64.             break;
  65.     }

  67.     snake.unshift(head);

  69.     if (head.x === food.x && head.y === food.y) {
  70.         score += 10;
  71.         generateFood();
  72.     } else {
  73.         snake.pop();
  74.     }
  75. }

  77. function changeDirection(event) {
  78.     if (changingDirection) return;
  79.     changingDirection = true;

  81.     const keyPressed = event.keyCode;
  82.     const UP_KEY = 38;
  83.     const DOWN_KEY = 40;
  84.     const LEFT_KEY = 37;
  85.     const RIGHT_KEY = 39;

  87.     const goingUp = direction === 'UP';
  88.     const goingDown = direction === 'DOWN';
  89.     const goingRight = direction === 'RIGHT';
  90.     const goingLeft = direction === 'LEFT';

  92.     if (keyPressed === UP_KEY && !goingDown) {
  93.         direction = 'UP';
  94.     }
  95.     if (keyPressed === DOWN_KEY && !goingUp) {
  96.         direction = 'DOWN';
  97.     }
  98.     if (keyPressed === LEFT_KEY && !goingRight) {
  99.         direction = 'LEFT';
  100.     }
  101.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  102.         direction = 'RIGHT';
  103.     }
  104. }

  106. function checkGameOver() {
  107.     for (let i = 4; i < snake.length; i++) {
  108.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
  109.     }

  111.     const hitLeftWall = snake[0].x < 0;
  112.     const hitRightWall = snake[0].x >= canvas.width;
  113.     const hitToptWall = snake[0].y < 0;
  114.     const hitBottomWall = snake[0].y >= canvas.height;

  116.     return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall;
  117. }

  119. function generateFood() {
  120.     food.x = Math.floor(Math.random() * canvas.width / unit) * unit;
  121.     food.y = Math.floor(Math.random() * canvas.height / unit) * unit;

  123.     snake.forEach(segment => {
  124.         if (segment.x === food.x && segment.y === food.y) {
  125.             generateFood();
  126.         }
  127.     });
  128. }

  130. main();
复制代码


### 总结
1. **HTML**定义了画布，用来显示游戏。
2. **CSS**简单地美化了画布。
3. **JavaScript**负责游戏的逻辑，包括蛇的移动、食物的生成、碰撞检测等。

你可以将这些代码分别保存到不同的文件中：`index.html`、`style.css`、`script.js`。打开`index.html`，就能在浏览器中玩这个简单的贪吃蛇游戏了！

希望你能喜欢这个游戏，祝你编程愉快！如果有任何问题，请随时问我哦！



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