html5小游戏代码：用HTML5 Canvas轻松创建小游戏，贪吃蛇实战代码解析
在前端开发领域,HTML5为游戏开发提供了强大支持，本文将通过一个经典贪吃蛇游戏的完整代码示例，带您了解如何使用HTML5 Canvas创建简单而有趣的小游戏。
游戏实现思路
贪吃蛇游戏主要包含以下核心功能：
- 使用Canvas绘制游戏界面
- 键盘控制蛇的移动方向
- 随机生成食物
- 碰撞检测（墙壁和自身）
- 分数计算与显示
下面是完整的贪吃蛇游戏代码实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5贪吃蛇游戏</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#game-container {
text-align: center;
}
canvas {
border: 2px solid #333;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#score {
font-size: 24px;
margin-bottom: 10px;
}
#game-over {
display: none;
color: red;
font-size: 20px;
margin-top: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #45a049;
}
</style>
<script>
// 游戏配置
const GRID_SIZE = 20;
const GRID_WIDTH = 30;
const GRID_HEIGHT = 20;
const GAME_SPEED = 150; // 游戏速度(毫秒)
// 游戏状态
let snake = [];
let food = {};
let direction = 'right';
let nextDirection = 'right';
let score = 0;
let gameRunning = false;
let gameLoop;
// 获取Canvas元素和上下文
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const gameOverElement = document.getElementById('game-over');
const startButton = document.getElementById('start-button');
// 初始化游戏
function initGame() {
// 设置Canvas尺寸
canvas.width = GRID_WIDTH * GRID_SIZE;
canvas.height = GRID_HEIGHT * GRID_SIZE;
// 初始化蛇
snake = [
{x: 5, y: 10},
{x: 4, y: 10},
{x: 3, y: 10}
];
// 生成第一个食物
generateFood();
// 重置游戏状态
direction = 'right';
nextDirection = 'right';
score = 0;
scoreElement.textContent = '分数: 0';
gameOverElement.style.display = 'none';
}
// 生成食物
function generateFood() {
// 随机生成食物位置
let newFood;
let onSnake;
do {
onSnake = false;
newFood = {
x: Math.floor(Math.random() * GRID_WIDTH),
y: Math.floor(Math.random() * GRID_HEIGHT)
};
// 检查食物是否生成在蛇身上
for (let segment of snake) {
if (segment.x === newFood.x && segment.y === newFood.y) {
onSnake = true;
break;
}
}
} while (onSnake);
food = newFood;
}
// 游戏主循环
function gameUpdate() {
if (!gameRunning) return;
// 更新蛇的方向
direction = nextDirection;
// 计算蛇头新位置
const head = {x: snake[0].x, y: snake[0].y};
switch (direction) {
case 'up': head.y--; break;
case 'down': head.y++; break;
case 'left': head.x--; break;
case 'right': head.x++; break;
}
// 检查游戏结束条件
if (
head.x < 0 || head.x >= GRID_WIDTH ||
head.y < 0 || head.y >= GRID_HEIGHT ||
checkCollision(head)
) {
gameOver();
return;
}
// 将新头部添加到蛇身
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
// 增加分数
score++;
scoreElement.textContent = `分数: ${score}`;
// 生成新食物
generateFood();
} else {
// 如果没吃到食物，移除尾部
snake.pop();
}
// 绘制游戏
drawGame();
}
// 检查碰撞
function checkCollision(head) {
// 检查是否与自身碰撞
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}
return false;
}
// 绘制游戏
function drawGame() {
// 清空Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制蛇
for (let i = 0; i < snake.length; i++) {
const segment = snake[i];
// 蛇头用不同颜色
if (i === 0) {
ctx.fillStyle = '#4CAF50'; // 蛇头颜色
} else {
ctx.fillStyle = '#8BC34A'; // 蛇身颜色
}
ctx.fillRect(
segment.x * GRID_SIZE,
segment.y * GRID_SIZE,
GRID_SIZE,
GRID_SIZE
);
// 绘制蛇身体边框
ctx.strokeStyle = '#333';
ctx.strokeRect(
segment.x * GRID_SIZE,
segment.y * GRID_SIZE,
GRID_SIZE,
GRID_SIZE
);
}
// 绘制食物
ctx.fillStyle = '#FF5722';
ctx.beginPath();
const foodX = food.x * GRID_SIZE + GRID_SIZE / 2;
const foodY = food.y * GRID_SIZE + GRID_SIZE / 2;
ctx.arc(foodX, foodY, GRID_SIZE / 2, 0, Math.PI * 2);
ctx.fill();
}
// 开始游戏
function startGame() {
if (gameRunning) return;
initGame();
gameRunning = true;
gameOverElement.style.display = 'none';
// 启动游戏循环
gameLoop = setInterval(gameUpdate, GAME_SPEED);
}
// 游戏结束
function gameOver() {
gameRunning = false;
clearInterval(gameLoop);
gameOverElement.style.display = 'block';
gameOverElement.textContent = `游戏结束! 最终分数: ${score}`;
}
// 键盘控制
document.addEventListener('keydown', function(event) {
// 防止按键滚动页面
if ([37, 38, 39, 40].includes(event.keyCode)) {
event.preventDefault();
}
// 根据按键设置方向
switch (event.keyCode) {
case 38: // 上箭头
if (direction !== 'down') nextDirection = 'up';
break;
case 40: // 下箭头
if (direction !== 'up') nextDirection = 'down';
break;
case 37: // 左箭头
if (direction !== 'right') nextDirection = 'left';
break;
case 39: // 右箭头
if (direction !== 'left') nextDirection = 'right';
break;
}
});
// 按钮事件监听
startButton.addEventListener('click', startGame);
// 初始化游戏
initGame();
</script>
</head>
<body>
<div id="game-container">
<div id="score">分数: 0</div>
<canvas id="game-canvas"></canvas>
<div id="game-over"></div>
<button id="start-button">开始游戏</button>
</div>
</body>
</html> 代码解析
- 游戏初始化：设置游戏区域、蛇的初始位置和食物生成机制
- 游戏循环：使用setInterval实现游戏的持续更新
- 碰撞检测：检查蛇是否撞墙或撞到自身
- 键盘控制：监听键盘事件来控制蛇的移动方向
- 绘制功能：使用Canvas API绘制游戏元素
扩展建议
您可以进一步扩展这个游戏：
- 添加不同类型的食物,提供不同的得分效果
- 实现游戏难度随分数增加而提高
- 添加音效和背景音乐
- 设计更精美的游戏界面和动画效果
HTML5游戏开发为前端开发者提供了无限可能,通过掌握Canvas绘图和游戏循环等基本概念，您可以创建出各种有趣的小游戏。
文章已关闭评论！
