✨用AI编写贪吃蛇小游戏，Coding从未如此简单！✨

本文链接：https://blog.csdn.net/qq_53843555/article/details/145633303

✨用AI编写贪吃蛇小游戏，Coding从未如此简单！✨

哈喽小伙伴们～今天要跟大家分享一个超酷的体验！💥我竟然用AI工具自动编写了一个经典的贪吃蛇小游戏！是不是听起来就很厉害？😏

🌟 为什么选择AI编程？

作为一名普通的开发者（或者说是“手残党”😂），每次写代码都让我头大。但这次，我尝试了AI编程工具，结果简直颠覆了我的认知！只需简单描述需求，AI就能自动生成高质量的代码，甚至还能优化逻辑！真的太强大了吧！🔥

🌟 贪吃蛇小游戏的背后

我只告诉AI：“我要一个贪吃蛇游戏，包含基本规则和简单的界面。” 结果它不仅完美还原了经典玩法，还加入了平滑的动画效果和分数统计功能！👏编码能力堪称一流，完全不输专业开发者！而且整个过程不到5分钟，效率高到飞起！🚀

🌟 使用AI的优势

高效省时：再也不用手动敲代码，AI分分钟搞定！
代码质量高：AI生成的代码结构清晰、注释完善，简直是学习的好范例！
创意无限：可以轻松实现复杂功能，让你的想法快速落地！
如果你也想尝试用AI开发自己的小游戏，不妨赶紧试试吧！相信我，你会爱上这种 Coding 的新方式！💖

快来留言告诉我，你想用AI实现什么有趣的功能呢？代码和运行截图以及运行方法放在下方了👇

🌟代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇小游戏</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    flex-direction: column;
  }
  canvas {
    border: 1px solid black;
    background-color: white;
  }
  #score, #highScore, .speed-controls {
    font-size: 24px;
    margin-top: 10px;
  }
  .speed-controls {
    display: flex;
    align-items: center;
  }
  button {
    margin: 5px;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="score">得分: 0</div>
<div id="highScore">历史最高分: 0</div>
<div class="speed-controls">
  <div id="speed">速度: 100ms</div>
  <button onclick="decreaseSpeed()">减慢速度</button>
  <button onclick="increaseSpeed()">加快速度</button>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const gridSize = 20;
const tileCount = canvas.width / gridSize;

let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: 0 };
let food = { x: 15, y: 15 };
let score = 0;
let speed = 100; // 初始速度为100ms
let highScore = localStorage.getItem('highScore') ? parseInt(localStorage.getItem('highScore')) : 0;

function drawRect(x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
}

function clearScreen() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function updateSnake() {
  const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
  snake.unshift(head);

  if (head.x === food.x && head.y === food.y) {
    placeFood();
    score += 10; // 每吃一个食物加10分
    document.getElementById('score').innerText = '得分: ' + score;
    if (score > highScore) {
      highScore = score;
      localStorage.setItem('highScore', highScore);
      document.getElementById('highScore').innerText = '历史最高分: ' + highScore;
    }
  } else {
    snake.pop();
  }

  if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || checkCollision(head)) {
    resetGame();
    alert('游戏结束，你的得分是: ' + score);
  }
}

function checkCollision(head) {
  return snake.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y);
}

function placeFood() {
  food = {
    x: Math.floor(Math.random() * tileCount),
    y: Math.floor(Math.random() * tileCount)
  };
}

function resetGame() {
  snake = [{ x: 10, y: 10 }];
  direction = { x: 0, y: 0 };
  placeFood();
  score = 0; // 重置分数
  document.getElementById('score').innerText = '得分: ' + score;
  speed = 100; // 重置速度
  document.getElementById('speed').innerText = '速度: ' + speed + 'ms';
  clearInterval(gameInterval);
  gameInterval = setInterval(gameLoop, speed);
}

function decreaseSpeed() {
  if (speed < 500) {
    speed += 50;
    document.getElementById('speed').innerText = '速度: ' + speed + 'ms';
    clearInterval(gameInterval);
    gameInterval = setInterval(gameLoop, speed);
  }
}

function increaseSpeed() {
  if (speed > 50) {
    speed -= 50;
    document.getElementById('speed').innerText = '速度: ' + speed + 'ms';
    clearInterval(gameInterval);
    gameInterval = setInterval(gameLoop, speed);
  }
}

function gameLoop() {
  clearScreen();
  drawRect(food.x, food.y, 'red');
  snake.forEach(segment => drawRect(segment.x, segment.y, 'green'));
  updateSnake();
}

document.addEventListener('keydown', event => {
  switch (event.key) {
    case 'ArrowUp':
      if (direction.y === 0) direction = { x: 0, y: -1 };
      break;
    case 'ArrowDown':
      if (direction.y === 0) direction = { x: 0, y: 1 };
      break;
    case 'ArrowLeft':
      if (direction.x === 0) direction = { x: -1, y: 0 };
      break;
    case 'ArrowRight':
      if (direction.x === 0) direction = { x: 1, y: 0 };
      break;
  }
});

placeFood();
document.getElementById('highScore').innerText = '历史最高分: ' + highScore;
let gameInterval = setInterval(gameLoop, speed);
</script>
</body>
</html>