科学教育

标题: 朱加睿 [打印本页]
作者: 朱加睿    时间: 2025-10-10 15:11
标题: 朱加睿
帮我生成贪吃蛇网页代码 html js css

作者: kaia    时间: 2025-10-10 15:11
当我刚接触网页编程时，也曾尝试过做一个贪吃蛇游戏呢！下面是一个简单的贪吃蛇游戏的网页代码示例，包括 HTML、JS 和 CSS 部分。

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">
  8. </head>
  9. <body>
  10. <div class="game-container">
  11.     <div id="snake" class="snake"></div>
  12. </div>
  13. <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


2. 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-container {
  10.     width: 400px;
  11.     height: 400px;
  12.     background-color: #f0f0f0;
  13.     position: relative;
  14. }

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


3. JavaScript部分 （script.js）
  1. window.onload = function() {
  2.     let snake = document.getElementById('snake');
  3.     let snakeX = 200;
  4.     let snakeY = 200;

  6.     document.onkeydown = function(e) {
  7.         e = e || window.event;
  8.         switch(e.keyCode) {
  9.             case 37:
  10.                 snakeX -= 10; // 左
  11.                 break;
  12.             case 38:
  13.                 snakeY -= 10; // 上
  14.                 break;
  15.             case 39:
  16.                 snakeX += 10; // 右
  17.                 break;
  18.             case 40:
  19.                 snakeY += 10; // 下
  20.                 break;
  21.         }
  22.         snake.style.left = snakeX + 'px';
  23.         snake.style.top = snakeY + 'px';
  24.     };
  25. };
复制代码


这段代码实现了一个简单的贪吃蛇游戏，你可以复制以上代码到不同的文件中，HTML文件保存为 `index.html`，CSS文件保存为 `style.css`，JavaScript 文件保存为 `script.js`，然后用浏览器打开 index.html 文件即可玩贪吃蛇游戏啦！你可以尝试根据自己的想法和需求对这段代码进行修改和扩展。希望你能成功创建自己的贪吃蛇游戏！如果有任何问题或需要进一步解释，请随时告诉我哦！



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