科学教育

标题: 朱乔安 [打印本页]
作者: 朱乔安    时间: 2025-9-30 10:16
标题: 朱乔安

给我一个贪吃蛇代码,css,js,thm

作者: kaia    时间: 2025-9-30 10:16
当然可以！下面是一个简单的贪吃蛇的网页编程代码，包括HTML、CSS和JavaScript：

1. 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"> <!-- 引入CSS文件 -->
  8. </head>
  9. <body>
  10.     <div class="game-container">
  11.         <canvas id="gameCanvas"></canvas>
  12.     </div>

  14.     <script src="script.js"></script> <!-- 引入JavaScript文件 -->
  15. </body>
  16. </html>
复制代码


2. CSS代码(style.css):
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     overflow: hidden;
  5. }

  7. .game-container {
  8.     display: flex;
  9.     justify-content: center;
  10.     align-items: center;
  11.     height: 100vh;
  12. }

  14. #gameCanvas {
  15.     border: 1px solid black;
  16. }
复制代码


3. JavaScript代码(script.js):
  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. const gridSize = 20;
  5. const tileCount = 20;
  6. let snake = [{ x: 10, y: 10 }];
  7. let apple = { x: 15, y: 15 };
  8. let xVelocity = 0;
  9. let yVelocity = 0;

  11. function update() {
  12.     snake.unshift({ x: snake[0].x + xVelocity, y: snake[0].y + yVelocity });

  14.     if (snake[0].x === apple.x && snake[0].y === apple.y) {
  15.         apple.x = Math.floor(Math.random() * tileCount);
  16.         apple.y = Math.floor(Math.random() * tileCount);
  17.     } else {
  18.         snake.pop();
  19.     }

  21.     if (snake[0].x < 0 || snake[0].x >= tileCount || snake[0].y < 0 || snake[0].y >= tileCount || checkCollision()) {
  22.         snake = [{ x: 10, y: 10 }];
  23.         xVelocity = 0;
  24.         yVelocity = 0;
  25.     }
  26. }

  28. function draw() {
  29.     ctx.clearRect(0, 0, canvas.width, canvas.height);

  31.     ctx.fillStyle = 'red';
  32.     ctx.fillRect(apple.x * gridSize, apple.y * gridSize, gridSize, gridSize);

  34.     ctx.fillStyle = 'green';
  35.     snake.forEach((segment) => {
  36.         ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
  37.     });
  38. }

  40. function checkCollision() {
  41.     for (let i = 1; i < snake.length; i++) {
  42.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
  43.             return true;
  44.         }
  45.     }
  46.     return false;
  47. }

  49. function moveSnake(event) {
  50.     switch(event.key) {
  51.         case 'ArrowUp':
  52.             xVelocity = 0;
  53.             yVelocity = -1;
  54.             break;
  55.         case 'ArrowDown':
  56.             xVelocity = 0;
  57.             yVelocity = 1;
  58.             break;
  59.         case 'ArrowLeft':
  60.             xVelocity = -1;
  61.             yVelocity = 0;
  62.             break;
  63.         case 'ArrowRight':
  64.             xVelocity = 1;
  65.             yVelocity = 0;
  66.             break;
  67.     }
  68. }

  70. setInterval(() => {
  71.     update();
  72.     draw();
  73. }, 100);

  75. window.addEventListener('keydown', moveSnake);
复制代码


这个代码实现了一个简单的贪吃蛇游戏。希望你可以在浏览器中尝试运行并玩一下这个小游戏！如果有任何问题，欢迎随时询问。



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