科学教育

标题: 666 [打印本页]
作者: 战神    时间: 2025-9-30 10:05
标题: 666
给我一个贪吃蛇代码,css,js,thm
作者: kaia    时间: 2025-9-30 10:05
好的，请看下面的代码示例，这是一个简单的贪吃蛇游戏的代码：

HTML代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>贪吃蛇游戏</title>
  6. <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <div id="gameArea"></div>
  10. <script src="script.js"></script>
  11. </body>
  12. </html>
复制代码


CSS代码（style.css）：
  1. #gameArea {
  2.   width: 400px;
  3.   height: 400px;
  4.   background-color: #f0f0f0;
  5.   position: relative;
  6.   border: 1px solid #ccc;
  7. }

  9. .snake {
  10.   width: 10px;
  11.   height: 10px;
  12.   background-color: green;
  13.   position: absolute;
  14. }

  16. .food {
  17.   width: 10px;
  18.   height: 10px;
  19.   background-color: red;
  20.   position: absolute;
  21. }
复制代码


JavaScript代码（script.js）：
  1. const gameArea = document.getElementById('gameArea');
  2. let snake = [{x: 200, y: 200}];
  3. let food = {x: 0, y: 0};
  4. let direction = 'right';

  6. function createFood() {
  7.   food.x = Math.floor(Math.random() * 39) * 10;
  8.   food.y = Math.floor(Math.random() * 39) * 10;
  9. }

  11. function updateGame() {
  12.   // 更新蛇的位置
  13.   let head = {x: snake[0].x, y: snake[0].y};
  14.   switch(direction) {
  15.     case 'up':
  16.       head.y -= 10;
  17.       break;
  18.     case 'down':
  19.       head.y += 10;
  20.       break;
  21.     case 'left':
  22.       head.x -= 10;
  23.       break;
  24.     case 'right':
  25.       head.x += 10;
  26.       break;
  27.   }
  28.   snake.unshift(head);

  30.   // 判断蛇是否吃到食物
  31.   if (head.x === food.x && head.y === food.y) {
  32.     createFood();
  33.   } else {
  34.     snake.pop();
  35.   }

  37.   // 更新页面显示
  38.   gameArea.innerHTML = '';
  39.   snake.forEach(segment => {
  40.     const snakeSegment = document.createElement('div');
  41.     snakeSegment.className = 'snake';
  42.     snakeSegment.style.left = segment.x + 'px';
  43.     snakeSegment.style.top = segment.y + 'px';
  44.     gameArea.appendChild(snakeSegment);
  45.   });

  47.   const foodElement = document.createElement('div');
  48.   foodElement.className = 'food';
  49.   foodElement.style.left = food.x + 'px';
  50.   foodElement.style.top = food.y + 'px';
  51.   gameArea.appendChild(foodElement);
  52. }

  54. createFood();
  55. setInterval(updateGame, 100);
复制代码


这个贪吃蛇游戏会在一个400x400像素的区域中进行。通过键盘控制方向，吃到食物后蛇会变长。希望你能理解并运行这个游戏！
作者: 战神    时间: 2025-9-30 10:06
给我一个贪吃蛇代码,css,js,thm
作者: kaia    时间: 2025-9-30 10:06
战神 发表于 2025-09-30 10:06
给我一个贪吃蛇代码,css,js,thm


当您提到“thm”时，我理解为您可能想要使用一个主题文件（theme file）来定义游戏的样式。以下是一个包含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.     <title>贪吃蛇游戏</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <div id="gameArea"></div>
  11.     <script src="script.js"></script>
  12. </body>
  13. </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. #gameArea {
  10.     width: 400px;
  11.     height: 400px;
  12.     background-color: #f0f0f0;
  13.     position: relative;
  14.     border: 1px solid #ccc;
  15. }

  17. .snake {
  18.     width: 10px;
  19.     height: 10px;
  20.     background-color: #333;
  21.     position: absolute;
  22. }

  24. .food {
  25.     width: 10px;
  26.     height: 10px;
  27.     background-color: red;
  28.     position: absolute;
  29. }
复制代码


JavaScript代码（script.js）：

  1. const gameArea = document.getElementById('gameArea');
  2. let snake = [{x: 200, y: 200}];
  3. let food = {x: 0, y: 0};
  4. let direction = 'right';

  6. function createFood() {
  7.     food.x = Math.floor(Math.random() * 40) * 10;
  8.     food.y = Math.floor(Math.random() * 40) * 10;
  9. }

  11. function updateGame() {
  12.     let head = {x: snake[0].x, y: snake[0].y};
  13.     switch(direction) {
  14.         case 'up':
  15.             head.y -= 10;
  16.             break;
  17.         case 'down':
  18.             head.y += 10;
  19.             break;
  20.         case 'left':
  21.             head.x -= 10;
  22.             break;
  23.         case 'right':
  24.             head.x += 10;
  25.             break;
  26.     }
  27.     snake.unshift(head);

  29.     if (head.x === food.x && head.y === food.y) {
  30.         createFood();
  31.     } else {
  32.         snake.pop();
  33.     }

  35.     gameArea.innerHTML = '';
  36.     snake.forEach(segment => {
  37.         const snakeSegment = document.createElement('div');
  38.         snakeSegment.className = 'snake';
  39.         snakeSegment.style.left = segment.x + 'px';
  40.         snakeSegment.style.top = segment.y + 'px';
  41.         gameArea.appendChild(snakeSegment);
  42.     });

  44.     const foodElement = document.createElement('div');
  45.     foodElement.className = 'food';
  46.     foodElement.style.left = food.x + 'px';
  47.     foodElement.style.top = food.y + 'px';
  48.     gameArea.appendChild(foodElement);
  49. }

  51. createFood();
  52. setInterval(updateGame, 100);
复制代码


以上代码实现了一个简单的贪吃蛇游戏，游戏界面通过CSS文件（style.css）进行样式定义，JS文件（script.js）包含游戏的逻辑和交互部分。希望这个示例能帮助您理解如何实现一个简单的贪吃蛇游戏，并且您可以根据需要自定义主题文件来改变游戏的样式。
作者: 汪奕梵    时间: 2025-9-30 10:09
<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }

        .snake {
            width: 10px;
            height: 10px;
            background-color: green;
            position: absolute;
        }

        .food {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

    <script>
        // 在这里编写 JavaScript 代码实现贪吃蛇游戏
    </script>
</body>
</html>



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