科学教育

标题: daima [打印本页]
作者: 周晓丽    时间: 2024-7-12 19:10
标题: daima
你好，你是一名专业的程序员，请你帮我生成一个贪吃蛇网页代码，用himl、css、js文件完成
作者: kaia    时间: 2024-7-12 19:10
当然可以！以下是一个简单的贪吃蛇网页游戏的代码示例，包含HTML、CSS和JavaScript文件。

1. 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.     <div class="game-container">
  11.         <canvas id="gameCanvas"></canvas>
  12.     </div>
  13.     <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


2. 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: #000;
  8. }

  10. .game-container {
  11.     position: relative;
  12.     width: 500px;
  13.     height: 500px;
  14. }

  16. canvas {
  17.     display: block;
  18.     border: 1px solid #fff;
  19.     background-color: #111;
  20. }
复制代码


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

  4. const tileSize = 20;
  5. const tileCount = canvas.width / tileSize;
  6. let snake = [{ x: tileCount / 2, y: tileCount / 2 }];
  7. let direction = { x: 0, y: 0 };
  8. let apple = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
  9. let score = 0;

  11. document.addEventListener('keydown', (event) => {
  12.     switch (event.key) {
  13.         case 'ArrowUp':
  14.             if (direction.y === 0) direction = { x: 0, y: -1 };
  15.             break;
  16.         case 'ArrowDown':
  17.             if (direction.y === 0) direction = { x: 0, y: 1 };
  18.             break;
  19.         case 'ArrowLeft':
  20.             if (direction.x === 0) direction = { x: -1, y: 0 };
  21.             break;
  22.         case 'ArrowRight':
  23.             if (direction.x === 0) direction = { x: 1, y: 0 };
  24.             break;
  25.     }
  26. });

  28. function gameLoop() {
  29.     const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

  31.     // Check collision with walls
  32.     if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
  33.         alert('Game Over!');
  34.         document.location.reload();
  35.     }

  37.     // Check collision with itself
  38.     for (let segment of snake) {
  39.         if (segment.x === head.x && segment.y === head.y) {
  40.             alert('Game Over!');
  41.             document.location.reload();
  42.         }
  43.     }

  45.     snake.unshift(head);

  47.     // Check if snake has eaten the apple
  48.     if (head.x === apple.x && head.y === apple.y) {
  49.         score++;
  50.         apple = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
  51.     } else {
  52.         snake.pop();
  53.     }

  55.     draw();
  56.     setTimeout(gameLoop, 100);
  57. }

  59. function draw() {
  60.     ctx.clearRect(0, 0, canvas.width, canvas.height);

  62.     // Draw snake
  63.     for (let segment of snake) {
  64.         ctx.fillStyle = 'lime';
  65.         ctx.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
  66.     }

  68.     // Draw apple
  69.     ctx.fillStyle = 'red';
  70.     ctx.fillRect(apple.x * tileSize, apple.y * tileSize, tileSize, tileSize);

  72.     // Draw score
  73.     ctx.fillStyle = 'white';
  74.     ctx.font = '20px Arial';
  75.     ctx.fillText(`Score: ${score}`, 10, 20);
  76. }

  78. window.onload = () => {
  79.     canvas.width = tileSize * tileCount;
  80.     canvas.height = tileSize * tileCount;
  81.     gameLoop();
  82. };
复制代码


将以上内容分别保存为 `index.html`、`styles.css` 和 `script.js` 文件，并将它们放在同一目录下。然后打开 `index.html` 即可在浏览器中运行这个简单的贪吃蛇游戏。希望你喜欢！



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