设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 叶梦昕贪吃蛇
返回列表 发新帖
查看: 533|回复: 1
打印 上一主题 下一主题

叶梦昕贪吃蛇

[复制链接]
叶梦昕

1

主题

3

帖子

23

积分

新手上路

Rank: 1

积分
23
跳转到指定楼层
楼主
发表于 2025-9-30 15:27:54 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
帮我生成一个贪吃蛇网页代码，用html.css.js
回复

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2025-9-30 15:28:02 | 只看该作者
当我们创建一个简单的贪吃蛇游戏，需要使用HTML、CSS和JavaScript来实现。下面是一个简单的示例代码：

首先是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="style.css">
  8. </head>
  9. <body>
  10.     <div id="gameArea">
  11.         <div id="snake"></div>
  12.         <div id="food"></div>
  13.     </div>
  14.    
  15.     <script src="script.js"></script>
  16. </body>
  17. </html>
复制代码


接着是CSS代码（style.css）：

  1. #gameArea {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid #000;
  5.     position: relative;
  6. }

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

  15. #snake {
  16.     background-color: green;
  17. }

  19. #food {
  20.     background-color: red;
  21. }
复制代码


最后是JavaScript代码（script.js）：

  1. let snake = [{x: 200, y: 200}];
  2. let direction = 'right';

  4. function createFood() {
  5.     let x = Math.floor(Math.random() * 40) * 10;
  6.     let y = Math.floor(Math.random() * 40) * 10;

  8.     let food = document.getElementById('food');
  9.     food.style.left = x + 'px';
  10.     food.style.top = y + 'px';
  11. }

  13. function updateSnake() {
  14.     let head = { x: snake[0].x, y: snake[0].y };

  16.     if (direction === 'right') {
  17.         head.x += 10;
  18.     } else if (direction === 'left') {
  19.         head.x -= 10;
  20.     } else if (direction === 'up') {
  21.         head.y -= 10;
  22.     } else if (direction === 'down') {
  23.         head.y += 10;
  24.     }

  26.     snake.unshift(head);
  27.     snake.pop();

  29.     let snakeElement = document.getElementById('snake');
  30.     snakeElement.style.left = snake[0].x + 'px';
  31.     snakeElement.style.top = snake[0].y + 'px';
  32. }

  34. createFood();
  35. setInterval(updateSnake, 100);
复制代码


这个示例只包含了基本的贪吃蛇游戏功能，你可以根据自己的需求对游戏进行扩展和优化。希望对你有帮助！
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表