科学教育

标题: 605徐梓婷 [打印本页]
作者: 605徐梓婷    时间: 2025-9-30 15:18
标题: 605徐梓婷
帮我生成一个贪吃蛇网页代码
作者: kaia    时间: 2025-9-30 15:19
当然可以！贪吃蛇是一个很有趣的游戏，我们可以使用HTML、CSS和JavaScript来编写这个游戏。

首先，我们需要在HTML中创建一个画布（canvas），用于显示游戏界面。接着，在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.     canvas {
  9.         border: 1px solid black;
  10.     }
  11. </style>
  12. </head>
  13. <body>
  14. <canvas id="gameCanvas" width="400" height="400"></canvas>

  16. <script>
  17. const canvas = document.getElementById('gameCanvas');
  18. const ctx = canvas.getContext('2d');

  20. const snakeSize = 20;
  21. let snake = [{x: 200, y: 200}];
  22. let food = {x: 0, y: 0};
  23. let dx = 0;
  24. let dy = 0;

  26. function drawSnake() {
  27.     snake.forEach(segment => {
  28.         ctx.fillStyle = 'green';
  29.         ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize);
  30.     });
  31. }

  33. function drawFood() {
  34.     ctx.fillStyle = 'red';
  35.     ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
  36. }

  38. function update() {
  39.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
  40.    
  41.     if (head.x === food.x && head.y === food.y) {
  42.         snake.unshift(head);
  43.         generateFood();
  44.     } else {
  45.         snake.pop();
  46.         snake.unshift(head);
  47.     }

  49.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || checkCollision()) {
  50.         clearInterval(gameLoop);
  51.         alert('游戏结束！');
  52.         location.reload();
  53.     }

  55.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  56.     drawSnake();
  57.     drawFood();
  58. }

  60. function generateFood() {
  61.     food.x = Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize;
  62.     food.y = Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize;
  63. }

  65. function checkCollision() {
  66.     return snake.slice(1).some(segment => {
  67.         return segment.x === snake[0].x && segment.y === snake[0].y;
  68.     });
  69. }

  71. function onKeyDown(event) {
  72.     switch (event.key) {
  73.         case 'ArrowUp':
  74.             dx = 0;
  75.             dy = -snakeSize;
  76.             break;
  77.         case 'ArrowDown':
  78.             dx = 0;
  79.             dy = snakeSize;
  80.             break;
  81.         case 'ArrowLeft':
  82.             dx = -snakeSize;
  83.             dy = 0;
  84.             break;
  85.         case 'ArrowRight':
  86.             dx = snakeSize;
  87.             dy = 0;
  88.             break;
  89.     }
  90. }

  92. document.addEventListener('keydown', onKeyDown);

  94. generateFood();
  95. let gameLoop = setInterval(update, 100);
  96. </script>
  97. </body>
  98. </html>
复制代码


你可以将以上代码复制粘贴到一个HTML文件中，然后在浏览器中打开该文件，就可以开始玩贪吃蛇游戏啦！希望你玩得开心！如果有任何问题，随时来问我哦！



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