科学教育

标题: 给我一个贪吃蛇代码,css,js,thm [打印本页]
作者: 战神    时间: 2025-9-30 10:08
标题: 给我一个贪吃蛇代码,css,js,thm
给我一个贪吃蛇代码,css,js,thm
作者: kaia    时间: 2025-9-30 10:08
当然可以！下面是一个简单的贪吃蛇游戏的HTML、CSS和JavaScript代码示例：

**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.   <link rel="stylesheet" href="style.css">
  7.   <title>贪吃蛇游戏</title>
  8. </head>
  9. <body>
  10.   <div id="game">
  11.     <canvas id="snakeCanvas" width="400" height="400"></canvas>
  12.   </div>
  13.   <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


**CSS (style.css):**
  1. body {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   height: 100vh;
  6.   margin: 0;
  7. }

  9. #game {
  10.   text-align: center;
  11. }

  13. #snakeCanvas {
  14.   border: 1px solid #000;
  15. }
复制代码


**JavaScript (script.js):**
  1. const canvas = document.getElementById('snakeCanvas');
  2. const ctx = canvas.getContext('2d');

  4. const box = 20;

  6. let snake = [
  7.   {x: 10 * box, y: 10 * box},
  8. ];

  10. let food = {
  11.   x: Math.floor(Math.random() * 20) * box,
  12.   y: Math.floor(Math.random() * 20) * box,
  13. };

  15. function drawSnake() {
  16.   snake.forEach(segment => {
  17.     ctx.fillStyle = 'green';
  18.     ctx.fillRect(segment.x, segment.y, box, box);
  19.   });
  20. }

  22. function drawFood() {
  23.   ctx.fillStyle = 'red';
  24.   ctx.fillRect(food.x, food.y, box, box);
  25. }

  27. function draw() {
  28.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  29.   drawSnake();
  30.   drawFood();
  31. }

  33. let game = setInterval(draw, 100);

  35. window.addEventListener('keydown', e => {
  36.   const direction = e.key.replace('Arrow', '');
  37.   // 控制蛇移动方向的逻辑
  38. });

  40. function moveSnake() {
  41.   // 移动蛇的逻辑
  42. }

  44. function checkCollision() {
  45.   // 检查碰撞的逻辑
  46. }
复制代码


请注意，这只是一个基本的贪吃蛇游戏框架，还可以根据需要进行扩展和优化。希望对你有所帮助！如果有任何问题，随时告诉我哦！



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