当前位置：首页 > news >正文

HTML贪吃蛇游戏实现

news 2025/8/29 6:48:41

HTML贪吃蛇游戏实现

创建一个完整的贪吃蛇游戏HTML页面，包含游戏功能、说明表格和相关技术链接。

思路分析

使用HTML5 Canvas绘制游戏区域
使用JavaScript实现游戏逻辑（蛇的移动、食物生成、碰撞检测）
添加游戏控制按键和功能说明表格
提供相关技术参考链接

最终实现

<!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 {font-family: 'Arial', sans-serif;display: flex;flex-direction: column;align-items: center;background-color: #f0f0f0;padding: 20px;}h1 {color: #2c3e50;}#gameCanvas {border: 3px solid #2c3e50;border-radius: 5px;background-color: #000;margin-bottom: 20px;}.score-container {font-size: 24px;margin-bottom: 15px;color: #2c3e50;}.controls {margin-bottom: 25px;text-align: center;}table {border-collapse: collapse;margin: 15px 0;width: 80%;max-width: 600px;}th, td {border: 1px solid #2c3e50;padding: 10px;text-align: left;}th {background-color: #2c3e50;color: white;}tr:nth-child(even) {background-color: #f2f2f2;}.links {margin-top: 30px;text-align: center;}.links a {display: block;margin: 10px 0;color: #3498db;text-decoration: none;}.links a:hover {text-decoration: underline;}.game-over {display: none;color: #e74c3c;font-weight: bold;font-size: 24px;margin: 15px 0;}</style>
</head>
<body><h1>贪吃蛇游戏</h1><div class="score-container">得分: <span id="score">0</span></div><canvas id="gameCanvas" width="400" height="400"></canvas><div id="gameOver" class="game-over">游戏结束! 按空格键重新开始</div><div class="controls"><p>使用键盘方向键控制蛇的移动</p><p>按空格键暂停/继续游戏</p></div><table><tr><th>按键</th><th>功能</th></tr><tr><td>↑</td><td>向上移动</td></tr><tr><td>↓</td><td>向下移动</td></tr><tr><td>←</td><td>向左移动</td></tr><tr><td>→</td><td>向右移动</td></tr><tr><td>空格键</td><td>暂停/继续游戏</td></tr></table><table><tr><th>游戏元素</th><th>描述</th></tr><tr><td>蛇</td><td>玩家控制的角色，吃到食物后会变长</td></tr><tr><td>食物</td><td>蛇的目标，吃到后得分增加</td></tr><tr><td>墙壁</td><td>游戏边界，撞到后游戏结束</td></tr><tr><td>自身</td><td>蛇撞到自己的身体也会导致游戏结束</td></tr></table><table><tr><th>功能</th><th>实现方法</th></tr><tr><td>移动控制</td><td>键盘事件监听</td></tr><tr><td>碰撞检测</td><td>坐标比较</td></tr><tr><td>食物生成</td><td>随机位置生成</td></tr><tr><td>得分系统</td><td>计数器</td></tr></table><div class="links"><h3>相关技术链接</h3><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API" target="_blank">MDN Canvas文档</a><a href="https://www.w3school.com.cn/html/html_links.asp" target="_blank">HTML链接教程</a><a href="https://www.runoob.com/js/js-games.html" target="_blank">JavaScript游戏开发</a></div><script>// 获取Canvas和上下文const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const scoreElement = document.getElementById('score');const gameOverElement = document.getElementById('gameOver');// 游戏配置const gridSize = 20;const tileCount = canvas.width / gridSize;// 游戏状态let snake = [{ x: 10, y: 10 }];let food = { x: 15, y: 15 };let direction = { x: 0, y: 0 };let score = 0;let isPaused = false;let gameOver = false;let gameSpeed = 100; // 毫秒// 游戏主循环function gameLoop() {if (isPaused || gameOver) {setTimeout(gameLoop, gameSpeed);return;}update();draw();setTimeout(gameLoop, gameSpeed);}// 更新游戏状态function update() {// 移动蛇头const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };// 检查游戏结束条件（撞墙或撞到自己）if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || snake.some(segment => segment.x === head.x && segment.y === head.y)) {gameOver = true;gameOverElement.style.display = 'block';return;}// 添加新蛇头snake.unshift(head);// 检查是否吃到食物if (head.x === food.x && head.y === food.y) {// 增加分数score += 10;scoreElement.textContent = score;// 生成新食物food = {x: Math.floor(Math.random() * tileCount),y: Math.floor(Math.random() * tileCount)};} else {// 如果没吃到食物，移除蛇尾snake.pop();}}// 绘制游戏function draw() {// 清空画布ctx.fillStyle = '#000';ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制食物ctx.fillStyle = '#f00';ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);// 绘制蛇ctx.fillStyle = '#0f0';snake.forEach(segment => {ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);});}// 键盘控制window.addEventListener('keydown', e => {if (gameOver && e.key === ' ') {resetGame();return;}switch (e.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;case ' ':isPaused = !isPaused;break;}});// 重置游戏function resetGame() {snake = [{ x: 10, y: 10 }];direction = { x: 0, y: 0 };score = 0;scoreElement.textContent = score;food = {x: Math.floor(Math.random() * tileCount),y: Math.floor(Math.random() * tileCount)};gameOver = false;isPaused = false;gameOverElement.style.display = 'none';}// 开始游戏gameLoop();</script>
</body>
</html>