设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 给我一个贪吃蛇代码,css,js,thm
返回列表 发新帖
查看: 502|回复: 1
打印 上一主题 下一主题

给我一个贪吃蛇代码,css,js,thm

[复制链接]
战神

2

主题

3

帖子

17

积分

新手上路

Rank: 1

积分
17
跳转到指定楼层
楼主
发表于 2025-9-30 10:08:45 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
给我一个贪吃蛇代码,css,js,thm
回复

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2025-9-30 10:08:51 | 只看该作者
当然可以！下面是一个简单的贪吃蛇游戏的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. }
复制代码


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

使用道具 举报

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

本版积分规则

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