HTML游戏(1)
2025-12-11 23:30:56
发布于：浙江
11阅读
0回复
0点赞
要用HTML格式打开
注：不止1段
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏 - 最终测试</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/tailwindcss">
@layer utilities {
.pixel-borders {
box-shadow:
-4px 0 0 0 #000,
4px 0 0 0 #000,
0 -4px 0 0 #000,
0 4px 0 0 #000;
}
.pixel-button {
image-rendering: pixelated;
transition: all 0.1s;
}
.pixel-button:hover {
transform: scale(1.05);
}
.pixel-button:active {
transform: scale(0.95);
}
.animate-score-pop {
animation: scorePop 0.5s ease-out;
}
@keyframes scorePop {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
.animate-explosion {
animation: explosion 0.5s ease-out;
}
@keyframes explosion {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2); opacity: 0; }
}
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
<div class="container mx-auto max-w-4xl">
<!-- 游戏标题 -->
<h1 class="text-4xl md:text-5xl font-bold text-center mb-6 text-pink-400">贪吃蛇游戏</h1>
<!-- 游戏容器 -->
<div class="relative bg-gray-800 rounded-lg p-4 md:p-6 shadow-2xl">
<!-- 游戏信息 -->
<div class="flex justify-between items-center mb-4">
<div class="text-xl font-bold">分数: <span id="score" class="text-yellow-400">0</span></div>
<div class="flex space-x-2">
<button id="pauseBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded pixel-button">
<i class="fa fa-pause mr-1"></i> 暂停
</button>
<button id="restartBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded pixel-button">
<i class="fa fa-refresh mr-1"></i> 重新开始
</button>
</div>
</div>
<!-- 游戏画布 -->
<canvas id="gameCanvas" class="mx-auto bg-gray-900 border-4 border-gray-700 pixel-borders"></canvas>
<!-- 移动设备控制按钮 -->
<div id="mobileControls" class="mt-6 grid grid-cols-3 gap-2 md:hidden">
<div class="col-start-2">
<button id="upBtn" class="w-full bg-gray-700 hover:bg-gray-600 text-white p-4 rounded pixel-button">
<i class="fa fa-arrow-up text-xl"></i>
</button>
</div>
<div class="col-start-1">
<button id="leftBtn" class="w-full bg-gray-700 hover:bg-gray-600 text-white p-4 rounded pixel-button">
<i class="fa fa-arrow-left text-xl"></i>
</button>
</div>
<div class="col-start-2">
<button id="downBtn" class="w-full bg-gray-700 hover:bg-gray-600 text-white p-4 rounded pixel-button">
<i class="fa fa-arrow-down text-xl"></i>
</button>
</div>
<div class="col-start-3">
<button id="rightBtn" class="w-full bg-gray-700 hover:bg-gray-600 text-white p-4 rounded pixel-button">
<i class="fa fa-arrow-right text-xl"></i>
</button>
</div>
</div>
<!-- 食物图片上传 -->
<div class="mt-6">
<h3 class="text-lg font-semibold mb-2">自定义食物图片:</h3>
<div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2">
<input type="file" id="foodImageUpload" accept="image/*" class="bg-gray-700 text-white px-4 py-2 rounded">
<button id="resetFoodImageBtn" class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded pixel-button">
<i class="fa fa-undo mr-1"></i> 重置
</button>
</div>
<p class="text-sm text-gray-400 mt-1">上传图片后，游戏中的食物将显示为您上传的图片</p>
</div>
</div>
<!-- 游戏说明 -->
<div class="mt-8 bg-gray-800 rounded-lg p-4 md:p-6 shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-pink-400">游戏说明</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h3 class="text-lg font-semibold mb-2">控制方式:</h3>
<ul class="list-disc list-inside space-y-1">
<li>键盘方向键 ↑ ↓ ← → 控制蛇的移动</li>
<li>空格键 暂停/继续游戏</li>
<li>移动设备：点击屏幕上的方向按钮</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">游戏规则:</h3>
<ul class="list-disc list-inside space-y-1">
<li>吃到食物增加分数</li>
<li>蛇身会随着分数增加而变色</li>
<li>撞到边界或自己的身体游戏结束</li>
<li>支持自定义食物图片</li>
</ul>
</div>
</div>
</div>
<!-- 开始屏幕 -->
<div id="startScreen" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg shadow-2xl text-center max-w-md w-full mx-4">
<h2 class="text-3xl font-bold mb-6 text-pink-400">贪吃蛇游戏</h2>
<button id="startBtn" class="bg-pink-500 hover:bg-pink-600 text-white text-xl px-8 py-3 rounded pixel-button">
开始游戏
</button>
</div>
</div>
<!-- 游戏结束屏幕 -->
<div id="gameOverScreen" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 p-8 rounded-lg shadow-2xl text-center max-w-md w-full mx-4">
<h2 class="text-3xl font-bold mb-2 text-red-500">游戏结束</h2>
<p class="text-xl mb-2">最终得分: <span id="finalScore" class="text-yellow-400 font-bold">0</span></p>
<button id="tryAgainBtn" class="bg-green-500 hover:bg-green-600 text-white text-xl px-8 py-3 rounded pixel-button">
再来一次
</button>
</div>
</div>
</div>
<script>
// 游戏配置
const config = {
gridSize: 30, // 每个格子的大小（像素）
initialSpeed: 150, // 初始速度（毫秒）
speedIncrease: 5, // 每次得分后速度增加量（毫秒）
minSpeed: 50, // 最小速度限制（毫秒）
foodBlinkSpeed: 500, // 食物闪烁速度（毫秒）
snakeColors: [
'#ff6b6b', // 红色
'#ffa06b', // 橙色
'#ffd56b', // 黄色
'#6bffa0', // 绿色
'#6bc5ff', // 蓝色
'#d56bff' // 紫色
],
foodColors: [
'#ff4757', // 亮红色
'#ff6b6b', // 红色
'#ff8e9b' // 粉红色
]
};
// 游戏状态
const gameState = {
canvas: null,
ctx: null,
gridWidth: 0,
gridHeight: 0,
snake: [],
direction: 'RIGHT',
nextDirection: 'RIGHT',
food: null,
foodColorIndex: 0,
foodBlinkTimer: null,
score: 0,
speed: config.initialSpeed,
isGameOver: false,
isPaused: false,
gameLoop: null,
explosions: [],
customFoodImage: null,
isMobile: false
};
// DOM元素
const elements = {
canvas: document.getElementById('gameCanvas'),
scoreElement: document.getElementById('score'),
finalScoreElement: document.getElementById('finalScore'),
startScreen: document.getElementById('startScreen'),
gameOverScreen: document.getElementById('gameOverScreen'),
startBtn: document.getElementById('startBtn'),
tryAgainBtn: document.getElementById('tryAgainBtn'),
pauseBtn: document.getElementById('pauseBtn'),
restartBtn: document.getElementById('restartBtn'),
upBtn: document.getElementById('upBtn'),
downBtn: document.getElementById('downBtn'),
leftBtn: document.getElementById('leftBtn'),
rightBtn: document.getElementById('rightBtn'),
mobileControls: document.getElementById('mobileControls'),
foodImageUpload: document.getElementById('foodImageUpload'),
resetFoodImageBtn: document.getElementById('resetFoodImageBtn')
};
// 半调图案类型
const halftonePatterns = [
'half-tone',
'half-tone-dense',
'half-tone-sparse'
];
// 初始化游戏
function initGame() {
// 设置画布
setupCanvas();
// 检查是否为移动设备
checkMobileDevice();
// 添加事件监听器
addEventListeners();
// 初始化游戏状态
resetGameState();
}
// 设置画布
function setupCanvas() {
gameState.canvas = elements.canvas;
gameState.ctx = gameState.canvas.getContext('2d');
// 设置画布大小为750px x 540px（25x18格）
gameState.canvas.width = 750;
gameState.canvas.height = 540;
// 计算网格数量（25x18）
gameState.gridWidth = Math.floor(gameState.canvas.width / config.gridSize);
gameState.gridHeight = Math.floor(gameState.canvas.height / config.gridSize);
}
// 检查是否为移动设备
function checkMobileDevice() {
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
gameState.isMobile = isMobile;
// 根据设备类型显示/隐藏移动控制按钮
if (isMobile) {
elements.mobileControls.classList.remove('hidden');
} else {
elements.mobileControls.classList.add('hidden');
}
}
// 添加事件监听器
function addEventListeners() {
// 键盘控制
document.addEventListener('keydown', handleKeyDown);
// 按钮控制
elements.startBtn.addEventListener('click', startGame);
elements.tryAgainBtn.addEventListener('click', restartGame);
elements.pauseBtn.addEventListener('click', togglePause);
elements.restartBtn.addEventListener('click', restartGame);
// 移动设备控制
elements.upBtn.addEventListener('click', () => changeDirection('UP'));
elements.downBtn.addEventListener('click', () => changeDirection('DOWN'));
elements.leftBtn.addEventListener('click', () => changeDirection('LEFT'));
elements.rightBtn.addEventListener('click', () => changeDirection('RIGHT'));
// 食物图片上传
elements.foodImageUpload.addEventListener('change', handleFoodImageUpload);
elements.resetFoodImageBtn.addEventListener('click', resetFoodImage);
}
// 处理键盘按下事件
function handleKeyDown(event) {
switch (event.key) {
case 'ArrowUp':
changeDirection('UP');
break;
case 'ArrowDown':
changeDirection('DOWN');
break;
case 'ArrowLeft':
changeDirection('LEFT');
break;
case 'ArrowRight':
changeDirection('RIGHT');
break;
case ' ':
togglePause();
break;
}
}
// 改变蛇的移动方向
function changeDirection(newDirection) {
// 防止蛇直接反向移动
const oppositeDirections = {
'UP': 'DOWN',
'DOWN': 'UP',
'LEFT': 'RIGHT',
'RIGHT': 'LEFT'
};
if (newDirection !== oppositeDirections[gameState.direction]) {
gameState.nextDirection = newDirection;
}
}
// 处理食物图片上传
function handleFoodImageUpload(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const image = new Image();
image.onload = function() {
// 创建30x30的画布
const canvas = document.createElement('canvas');
canvas.width = config.gridSize;
canvas.height = config.gridSize;
const ctx = canvas.getContext('2d');
// 清除画布
ctx.clearRect(0, 0, config.gridSize, config.gridSize);
// 绘制图片，缩放到30x30
ctx.drawImage(image, 0, 0, config.gridSize, config.gridSize);
// 创建最终的食物图片
gameState.customFoodImage = new Image();
gameState.customFoodImage.src = canvas.toDataURL('image/png');
// 重绘游戏
drawGame();
};
image.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
// 重置食物图片
function resetFoodImage() {
gameState.customFoodImage = null;
elements.foodImageUpload.value = '';
drawGame();
}
// 重置游戏状态
function resetGameState() {
// 初始化蛇
const centerX = Math.floor(gameState.gridWidth / 2);
const centerY = Math.floor(gameState.gridHeight / 2);
gameState.snake = [
{ x: centerX, y: centerY },
{ x: centerX - 1, y: centerY },
{ x: centerX - 2, y: centerY }
];
// 初始方向
gameState.direction = 'RIGHT';
gameState.nextDirection = 'RIGHT';
// 分数和速度
gameState.score = 0;
gameState.speed = config.initialSpeed;
// 生成食物
generateFood();
// 游戏状态
gameState.isGameOver = false;
gameState.isPaused = false;
// 清除爆炸效果
gameState.explosions = [];
// 更新分数显示
updateScore();
// 绘制游戏
drawGame();
}
// 生成食物
function generateFood() {
let newFood;
// 确保食物不与蛇身重叠
do {
newFood = {
x: Math.floor(Math.random() * gameState.gridWidth),
y: Math.floor(Math.random() * gameState.gridHeight)
};
} while (gameState.snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
gameState.food = newFood;
// 重置食物颜色索引
gameState.foodColorIndex = 0;
// 启动食物闪烁计时器
if (gameState.foodBlinkTimer) {
clearInterval(gameState.foodBlinkTimer);
}
gameState.foodBlinkTimer = setInterval(() => {
gameState.foodColorIndex = (gameState.foodColorIndex + 1) % config.foodColors.length;
if (!gameState.isGameOver && !gameState.isPaused) {
drawGame();
}
}, config.foodBlinkSpeed);
}
// 开始游戏
function startGame() {
elements.startScreen.classList.add('hidden');
resetGameState();
gameLoop();
}
// 重新开始游戏
function restartGame() {
elements.gameOverScreen.classList.add('hidden');
resetGameState();
gameLoop();
}
// 游戏主循环
function gameLoop() {
if (gameState.isGameOver || gameState.isPaused) return;
// 更新游戏状态
updateGame();
// 绘制游戏
drawGame();
// 设置下一次循环
gameState.gameLoop = setTimeout(gameLoop, gameState.speed);
}
// 更新游戏状态
function updateGame() {
// 更新方向
gameState.direction = gameState.nextDirection;
// 计算新的蛇头位置
const head = { ...gameState.snake[0] };
switch (gameState.direction) {
case 'UP':
head.y -= 1;
break;
case 'DOWN':
head.y += 1;
break;
case 'LEFT':
head.x -= 1;
break;
case 'RIGHT':
head.x += 1;
break;
}
// 检查碰撞
if (checkCollision(head)) {
endGame();
return;
}
// 将新蛇头添加到蛇的前面
gameState.snake.unshift(head);
// 检查是否吃到食物
if (head.x === gameState.food.x && head.y === gameState.food.y) {
// 增加分数
gameState.score += 10;
updateScore();
// 增加速度
if (gameState.speed > config.minSpeed) {
gameState.speed -= config.speedIncrease;
}
// 添加爆炸效果
addExplosion(head.x, head.y);
// 生成新的食物
generateFood();
} else {
// 移除蛇尾
gameState.snake.pop();
}
// 更新爆炸效果
updateExplosions();
}
// 检查碰撞
function checkCollision(head) {
// 检查边界碰撞
if (
head.x < 0 ||
head.x >= gameState.gridWidth ||
head.y < 0 ||
head.y >= gameState.gridHeight
) {
return true;
}
// 检查自身碰撞
for (let i = 1; i < gameState.snake.length; i++) {
if (head.x === gameState.snake[i].x && head.y === gameState.snake[i].y) {
return true;
}
}
return false;
}
// 添加爆炸效果（像素风格）
function addExplosion(x, y) {
// 创建像素爆炸效果的数据
const pixelExplosion = {
x,
y,
frame: 0,
maxFrames: 12, // 爆炸动画帧数
pixelSize: config.gridSize / 3, // 像素格子大小
color: '#ffffff', // 爆炸像素颜色
pixels: [] // 存储所有像素格子的位置和透明度
};
// 初始化爆炸像素格子
// 根据爆炸中心位置生成3x3、5x5或7x7的像素格子矩阵
const gridSize = 3 + Math.floor(Math.random() * 3) * 2; // 3, 5, 或 7
const offset = Math.floor(gridSize / 2);
for (let dy = -offset; dy <= offset; dy++) {
for (let dx = -offset; dx <= offset; dx++) {
// 计算每个像素格子的位置和初始透明度
pixelExplosion.pixels.push({
dx,
dy,
opacity: 1,
// 随机决定是否显示这个像素，创建不规则爆炸效果
visible: Math.random() > 0.2
});
}
}
gameState.explosions.push(pixelExplosion);
}
// 更新爆炸效果（像素风格）
function updateExplosions() {
for (let i = gameState.explosions.length - 1; i >= 0; i--) {
const explosion = gameState.explosions[i];
// 增加帧数
explosion.frame++;
// 更新每个像素格子的状态
explosion.pixels.forEach(pixel => {
if (pixel.visible) {
// 随着爆炸进行，像素透明度逐渐降低
// 距离中心越远的像素消失得越快
const distance = Math.sqrt(pixel.dx * pixel.dx + pixel.dy * pixel.dy);
const distanceFactor = 1 - (distance / Math.sqrt(2) / 3); // 根据最大爆炸范围调整
// 计算透明度衰减，考虑帧数和距离因素
pixel.opacity = 1 - (explosion.frame / explosion.maxFrames) * (2 - distanceFactor);
// 确保透明度不小于0
if (pixel.opacity < 0) {
pixel.opacity = 0;
pixel.visible = false;
}
}
});
// 检查是否所有像素都已消失
const allPixelsInvisible = explosion.pixels.every(pixel => !pixel.visible);
// 如果爆炸效果结束（帧数用完或所有像素消失），移除它
if (explosion.frame >= explosion.maxFrames || allPixelsInvisible) {
gameState.explosions.splice(i, 1);
}
}
}
// 更新分数显示
function updateScore() {
elements.scoreElement.textContent = gameState.score;
elements.finalScoreElement.textContent = gameState.score;
// 添加分数动画
elements.scoreElement.classList.add('animate-score-pop');
setTimeout(() => {
elements.scoreElement.classList.remove('animate-score-pop');
}, 500);
}
// 切换暂停/继续
function togglePause() {
if (gameState.isGameOver) return;
gameState.isPaused = !gameState.isPaused;
if (!gameState.isPaused) {
gameLoop();
}
}
// 结束游戏
function endGame() {
gameState.isGameOver = true;
clearInterval(gameState.foodBlinkTimer);
elements.gameOverScreen.classList.remove('hidden');
}
// 绘制游戏
function drawGame() {
const ctx = gameState.ctx;
const gridSize = config.gridSize;
// 清除画布
ctx.clearRect(0, 0, gameState.canvas.width, gameState.canvas.height);
// 绘制蛇
drawSnake(ctx, gridSize);
// 绘制食物
drawFood(ctx, gridSize);
// 绘制爆炸效果
drawExplosions(ctx, gridSize);
// 如果游戏暂停，绘制暂停提示
if (gameState.isPaused) {
drawPauseScreen(ctx);
}
}
// 绘制蛇
function drawSnake(ctx, gridSize) {
const snakeLength = gameState.snake.length;
gameState.snake.forEach((segment, index) => {
// 根据蛇的长度和位置选择颜色
const colorIndex = Math.floor((gameState.score / 10 + index / snakeLength) % config.snakeColors.length);
const color = config.snakeColors[colorIndex];
// 根据位置选择半调图案
const patternIndex = index % halftonePatterns.length;
const pattern = halftonePatterns[patternIndex];
// 绘制蛇段
ctx.fillStyle = color;
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
// 如果是蛇头，添加高亮效果
if (index === 0) {
ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
ctx.lineWidth = 2;
ctx.strokeRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
}
// 添加半调图案
if (pattern) {
// 创建半调图案
const patternCanvas = document.createElement('canvas');
patternCanvas.width = gridSize;
patternCanvas.height = gridSize;
const patternCtx = patternCanvas.getContext('2d');
// 根据图案类型绘制不同的半调效果
if (pattern === 'half-tone') {
drawHalftonePattern(patternCtx, gridSize, 4, 1);
} else if (pattern === 'half-tone-dense') {
drawHalftonePattern(patternCtx, gridSize, 2, 1);
} else if (pattern === 'half-tone-sparse') {
drawHalftonePattern(patternCtx, gridSize, 6, 1);
}
// 创建图案
const texture = ctx.createPattern(patternCanvas, 'repeat');
// 绘制图案
ctx.fillStyle = texture;
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
}
});
}
// 绘制半调图案（有序格子状分布）
function drawHalftonePattern(ctx, size, dotSize, opacity) {
ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
for (let y = 0; y < size; y += dotSize) {
for (let x = 0; x < size; x += dotSize) {
// 计算正方形大小（约为点间距的1/3）
const squareSize = dotSize / 3;
// 绘制正方形（有序排列，无随机性）
ctx.fillRect(
x + dotSize/2 - squareSize/2,
y + dotSize/2 - squareSize/2,
squareSize,
squareSize
);
}
}
}
// 绘制食物
function drawFood(ctx, gridSize) {
const food = gameState.food;
// 检查是否有自定义食物图片
if (gameState.customFoodImage && gameState.customFoodImage.complete) {
// 绘制自定义食物图片
ctx.drawImage(
gameState.customFoodImage,
food.x * gridSize,
food.y * gridSize,
gridSize,
gridSize
);
} else {
// 使用像素风格樱桃图片
const cherryImage = new Image();
cherryImage.src = 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/42ba020e55fd44dd98d8ddcfc882b6ec.png~tplv-a9rns2rl98-image-qvalue.image?rcl=2025091814571282B9F17558F2AE9C3BEC&rk3s=8e244e95&rrcfp=b669a9d6&x-expires=1758265032&x-signature=H1vJ%2F1cJOsieMUfYgZVTepHJVt0%3D';
// 直接绘制图片（如果已缓存）
if (cherryImage.complete) {
ctx.drawImage(cherryImage, food.x * gridSize, food.y * gridSize, gridSize, gridSize);
} else {
// 使用备用方法绘制食物
const color = config.foodColors[gameState.foodColorIndex];
// 绘制食物
ctx.fillStyle = color;
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
// 添加闪烁效果
const gradient = ctx.createLinearGradient(
food.x * gridSize,
food.y * gridSize,
(food.x + 1) * gridSize,
(food.y + 1) * gridSize
);
gradient.addColorStop(0, color);
gradient.addColorStop(1, 'rgba(255, 255, 255, 0.5)');
ctx.fillStyle = gradient;
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
// 添加半调图案
const patternCanvas = document.createElement('canvas');
patternCanvas.width = gridSize;
patternCanvas.height = gridSize;
const patternCtx = patternCanvas.getContext('2d');
drawHalftonePattern(patternCtx, gridSize, 6, 0.2);
const texture = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = texture;
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
}
}
}
// 绘制爆炸效果（像素风格）
function drawExplosions(ctx, gridSize) {
gameState.explosions.forEach(explosion => {
// 计算爆炸中心位置（像素坐标）
const centerX = (explosion.x + 0.5) * gridSize;
const centerY = (explosion.y + 0.5) * gridSize;
// 绘制每个像素格子
explosion.pixels.forEach(pixel => {
if (pixel.visible && pixel.opacity > 0) {
ctx.save();
// 设置像素透明度
ctx.globalAlpha = pixel.opacity;
// 设置像素颜色
ctx.fillStyle = explosion.color;
// 计算像素格子的位置
// 根据帧数让像素向外扩散
const spreadFactor = 1 + (explosion.frame / explosion.maxFrames) * 2;
const pixelX = centerX + pixel.dx * explosion.pixelSize * spreadFactor;
const pixelY = centerY + pixel.dy * explosion.pixelSize * spreadFactor;
// 绘制正方形像素格子
ctx.fillRect(
pixelX - explosion.pixelSize / 2,
pixelY - explosion.pixelSize / 2,
explosion.pixelSize,
explosion.pixelSize
);
ctx.restore();
}
});
});
}
// 绘制暂停屏幕
function drawPauseScreen(ctx) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, gameState.canvas.width, gameState.canvas.height);
ctx.font = '40px VT323, monospace';
ctx.fillStyle = '#ffeb3b';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('暂停', gameState.canvas.width / 2, gameState.canvas.height / 2);
ctx.font = '20px VT323, monospace';
ctx.fillStyle = '#ffffff';
ctx.fillText('按空格键继续', gameState.canvas.width / 2, gameState.canvas.height / 2 + 50);
}
// 初始化游戏
window.addEventListener('load', initGame);
</script>
</body>
</html>
有帮助，赞一个