使用 web 技术栈制作一个贪吃蛇游戏源码

PXP站长

2025-3-5

程序与源码

介绍

AI智能时代，我们用WEBweb 技术栈制作一个贪吃蛇游戏，一起来看看deepseek AI是怎么制作的这个游戏

游戏结构

index.html

script.js

style.css

共三个文件。

源码

index.html源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>经典贪吃蛇游戏</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="game-container">
    <div class="score-board">得分: <span id="score">0</span><span id="pauseStatus"></span></div>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div class="controls">
      <p>使用方向键控制蛇的移动，空格为暂停和开始</p>
      <button id="restartBtn">重新开始</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

script.js源码

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const restartBtn = document.getElementById('restartBtn');

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

let snake = [
  { x: 10, y: 10 },
];
let food = { x: 15, y: 15 };
let dx = 0;
let dy = 0;
let score = 0;
let gameLoop;
let isPaused = false;

function drawGame() {
  if (isPaused) return;
  
  // 移动蛇
  const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  snake.unshift(head);

  // 检测食物碰撞
  if (head.x === food.x && head.y === food.y) {
    score += 10;
    scoreElement.textContent = score;
    generateFood();
  } else {
    snake.pop();
  }

  // 清空画布
  ctx.fillStyle = '#2c3e50';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制食物
  ctx.fillStyle = '#e74c3c';
  ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);

  // 绘制蛇
  ctx.fillStyle = '#2ecc71';
  snake.forEach((segment, index) => {
    ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
  });

  // 碰撞检测
  if (checkCollision()) {
    gameOver();
  }
}

function generateFood() {
  food.x = Math.floor(Math.random() * tileCount);
  food.y = Math.floor(Math.random() * tileCount);
  // 确保食物不生成在蛇身上
  if (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
    generateFood();
  }
}

function checkCollision() {
  const head = snake[0];
  return (
    head.x < 0 || 
    head.x >= tileCount ||
    head.y < 0 ||
    head.y >= tileCount ||
    snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
  );
}

function gameOver() {
  clearInterval(gameLoop);
  alert(`游戏结束！得分：${score}`);
}

function startGame() {
  snake = [{ x: 10, y: 10 }];
  dx = 0;
  dy = 0;
  score = 0;
  scoreElement.textContent = score;
  generateFood();
  if (gameLoop) clearInterval(gameLoop);
  gameLoop = setInterval(drawGame, 100);
}

// 事件监听
document.addEventListener('keydown', (e) => {
  switch(e.key) {
    case 'ArrowUp':
      if (dy !== 1) { dx = 0; dy = -1; }
      break;
    case 'ArrowDown':
      if (dy !== -1) { dx = 0; dy = 1; }
      break;
    case 'ArrowLeft':
      if (dx !== 1) { dx = -1; dy = 0; }
      break;
    case 'ArrowRight':
      if (dx !== -1) { dx = 1; dy = 0; }
      break;
    case ' ':
      isPaused = !isPaused;
      document.getElementById('pauseStatus').textContent = isPaused ? ' (已暂停)' : '';
      break;
  }
});

restartBtn.addEventListener('click', startGame);

// 初始化游戏
startGame();

style.css源码

.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #2c3e50;
  padding: 20px;
  border-radius: 10px;
}

#gameCanvas {
  border: 3px solid #34495e;
  border-radius: 5px;
  margin: 20px 0;
}

.score-board {
  color: #ecf0f1;
  font-size: 24px;
  font-family: Arial, sans-serif;
  margin-bottom: 10px;
}

.controls {
  text-align: center;
}

#restartBtn {
  padding: 10px 20px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

#restartBtn:hover {
  background: #219a52;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #1a1a1a;
}

成品点击查看:经典贪吃蛇游戏

版权声明
1：文章：使用 web 技术栈制作一个贪吃蛇游戏源码
2：链接：https://www.panxp.com/508.html
3：文章内容来源于网络，仅供大家学习与交流，如下载了本站中的任何资源，请于24小时内删除，如有侵犯您的权益，请发送邮件至silverornament@qq.com，我们会在24小时内删除处理。
4 本站一切资源不代表本站立场，不代表本站赞同其观点和对其真实性负责。
5 如您发现本站提供资源链接失效或有违规现象，请联系我们处理。

THE END