科学教育

搜索
查看: 2297|回复: 14
打印 上一主题 下一主题

朱益佳贪吃蛇游戏

[复制链接]

7

主题

25

帖子

83

积分

注册会员

Rank: 2

积分
83
跳转到指定楼层
楼主
发表于 2025-9-30 09:55:37 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
帮我生成贪吃蛇游戏代码
回复

使用道具 举报

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2025-9-30 09:55:49 | 只看该作者
当创建一个贪吃蛇游戏时,我们需要使用HTML、CSS和JavaScript来实现游戏界面和游戏逻辑。下面是一个简单的示例代码,你可以在浏览器中运行它来玩贪吃蛇游戏。

首先是HTML部分:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>贪吃蛇游戏</title>
  5.     <style>
  6.         #game-board {
  7.             width: 400px;
  8.             height: 400px;
  9.             border: 1px solid black;
  10.             position: relative;
  11.         }

  12.         .snake-body {
  13.             width: 20px;
  14.             height: 20px;
  15.             background-color: green;
  16.             position: absolute;
  17.         }

  18.         .food {
  19.             width: 20px;
  20.             height: 20px;
  21.             background-color: red;
  22.             position: absolute;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="game-board"></div>
  28.     <script src="snake-game.js"></script>
  29. </body>
  30. </html>
复制代码


接着是JavaScript部分,将以下代码保存为`snake-game.js`文件:

  1. const gameBoard = document.getElementById('game-board');
  2. let snake = [{x: 200, y: 200}];
  3. let food = {x: 0, y: 0};
  4. let score = 0;
  5. let dx = 0;
  6. let dy = 0;

  7. function main() {
  8.     if (isGameOver()) {
  9.         alert('游戏结束!得分:' + score);
  10.         return;
  11.     }

  12.     updateSnake();
  13.     drawSnake();
  14.     drawFood();

  15.     setTimeout(main, 100);
  16. }

  17. function isGameOver() {
  18.     if (snake[0].x < 0 || snake[0].x >= gameBoard.clientWidth || snake[0].y < 0 || snake[0].y >= gameBoard.clientHeight) {
  19.         return true;
  20.     }

  21.     for (let i = 1; i < snake.length; i++) {
  22.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
  23.             return true;
  24.         }
  25.     }

  26.     return false;
  27. }

  28. function updateSnake() {
  29.     const newHead = {x: snake[0].x + dx, y: snake[0].y + dy};
  30.     snake.unshift(newHead);

  31.     if (newHead.x === food.x && newHead.y === food.y) {
  32.         score += 10;
  33.         generateFood();
  34.     } else {
  35.         snake.pop();
  36.     }
  37. }

  38. function drawSnake() {
  39.     while (gameBoard.firstChild) {
  40.         gameBoard.removeChild(gameBoard.firstChild);
  41.     }

  42.     snake.forEach(segment => {
  43.         const snakeElement = document.createElement('div');
  44.         snakeElement.style.left = segment.x + 'px';
  45.         snakeElement.style.top = segment.y + 'px';
  46.         snakeElement.classList.add('snake-body');
  47.         gameBoard.appendChild(snakeElement);
  48.     });
  49. }

  50. function generateFood() {
  51.     food.x = Math.floor(Math.random() * gameBoard.clientWidth / 20) * 20;
  52.     food.y = Math.floor(Math.random() * gameBoard.clientHeight / 20) * 20;
  53. }

  54. function drawFood() {
  55.     const foodElement = document.createElement('div');
  56.     foodElement.style.left = food.x + 'px';
  57.     foodElement.style.top = food.y + 'px';
  58.     foodElement.classList.add('food');
  59.     gameBoard.appendChild(foodElement);
  60. }

  61. document.addEventListener('keydown', e => {
  62.     if (e.key === 'ArrowUp' && dy !== 20) {
  63.         dx = 0;
  64.         dy = -20;
  65.     }
  66.     if (e.key === 'ArrowDown' && dy !== -20) {
  67.         dx = 0;
  68.         dy = 20;
  69.     }
  70.     if (e.key === 'ArrowLeft' && dx !== 20) {
  71.         dx = -20;
  72.         dy = 0;
  73.     }
  74.     if (e.key === 'ArrowRight' && dx !== -20) {
  75.         dx = 20;
  76.         dy = 0;
  77.     }
  78. });

  79. generateFood();
  80. main();
复制代码


这样,你就可以在浏览器中玩到简单的贪吃蛇游戏了。在游戏中,你控制蛇的移动方向,吃到食物加分,但要注意避免蛇撞墙或撞到自己哦!希望你玩得开心!
回复 支持 反对

使用道具 举报

7

主题

25

帖子

83

积分

注册会员

Rank: 2

积分
83
板凳
 楼主| 发表于 2025-9-30 10:05:46 | 只看该作者
帮我分类成html、css、js
回复 支持 反对

使用道具 举报

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
地板
发表于 2025-9-30 10:06:01 | 只看该作者
朱益佳 发表于 2025-09-30 10:05
帮我分类成html、css、js


当创建一个贪吃蛇游戏时,我们可以将代码分成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="game-board"></div>
  11.     <script src="snake-game.js"></script>
  12. </body>
  13. </html>
复制代码


接着是CSS部分,用于样式设计:

  1. #game-board {
  2.     width: 400px;
  3.     height: 400px;
  4.     border: 1px solid black;
  5.     position: relative;
  6. }

  7. .snake-body {
  8.     width: 20px;
  9.     height: 20px;
  10.     background-color: green;
  11.     position: absolute;
  12. }

  13. .food {
  14.     width: 20px;
  15.     height: 20px;
  16.     background-color: red;
  17.     position: absolute;
  18. }
复制代码


最后是JavaScript部分,用于实现游戏逻辑:

  1. const gameBoard = document.getElementById('game-board');
  2. let snake = [];
  3. let food = {x: 0, y: 0};
  4. let score = 0;
  5. let dx = 0;
  6. let dy = 0;

  7. // 其他 JavaScript 代码在这里

  8. document.addEventListener('keydown', e => {
  9.     if (e.key === 'ArrowUp' && dy !== 20) {
  10.         dx = 0;
  11.         dy = -20;
  12.     }
  13.     if (e.key === 'ArrowDown' && dy !== -20) {
  14.         dx = 0;
  15.         dy = 20;
  16.     }
  17.     if (e.key === 'ArrowLeft' && dx !== 20) {
  18.         dx = -20;
  19.         dy = 0;
  20.     }
  21.     if (e.key === 'ArrowRight' && dx !== -20) {
  22.         dx = 20;
  23.         dy = 0;
  24.     }
  25. });

  26. generateFood();
  27. main();
复制代码


将以上三部分分别保存为`index.html`、`style.css`和`snake-game.js`文件,并放在同一个文件夹内。然后在浏览器中打开`index.html`文件,就可以开始玩贪吃蛇游戏了。希望你玩得开心!
回复 支持 反对

使用道具 举报

0

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
5#
发表于 2025-11-4 09:46:01 | 只看该作者
帮我报CSS变成紫色。
回复 支持 反对

使用道具 举报

0

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
6#
发表于 2025-11-4 09:48:34 | 只看该作者
帮我把CSS变成紫色。
回复 支持 反对

使用道具 举报

7

主题

25

帖子

83

积分

注册会员

Rank: 2

积分
83
7#
 楼主| 发表于 2025-11-4 09:54:35 | 只看该作者
#game-board {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}

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

.food {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
}
帮我把字体变成紫色。
回复 支持 反对

使用道具 举报

7

主题

25

帖子

83

积分

注册会员

Rank: 2

积分
83
8#
 楼主| 发表于 2025-11-4 09:59:46 | 只看该作者

#game-board {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}

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

.food {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
}帮我把字体变成紫色。
回复 支持 反对

使用道具 举报

7

主题

25

帖子

83

积分

注册会员

Rank: 2

积分
83
9#
 楼主| 发表于 2025-11-11 09:38:55 | 只看该作者
function drawSnake() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    snake.forEach(part => {
        context.fillStyle = "green";
        context.fillRect(part.x, part.y, gridSize, gridSize);
    });
}这段话大概什么意思
回复 支持 反对

使用道具 举报

1

主题

3

帖子

15

积分

新手上路

Rank: 1

积分
15
10#
发表于 2025-11-11 09:45:44 | 只看该作者
在js文件中修改初始化参数
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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