简介：HTML5通过其Canvas元素和JavaScript API提供了强大的绘图和动画能力，允许开发者构建具有丰富交互性的网页应用。本教程将引导你通过创建一个简单的弹球游戏来深入理解这些技术。游戏开发过程中将涉及Canvas API的基础绘图操作、碰撞检测技术、JavaScript事件处理、计时器和动画实现、基本物理模拟以及游戏循环和状态管理。此外，还会探讨用户界面元素的实现。通过这个项目，你将学会如何利用HTML5特性，制作一个基本的、可交互的网页游戏。 
1. HTML5 Canvas基础和绘图API
简介
HTML5 Canvas是Web开发中用于绘制图形的强有力工具。它提供了一块画布，开发者可以在上面自由绘制文本、图像甚至动画。
Canvas标签和绘图上下文
要开始使用Canvas，必须先在HTML中引入 <canvas> 标签。随后，通过JavaScript获取Canvas元素，以及它的2D绘图上下文，这是开始绘图的基础。
// 获取Canvas元素
const canvas = document.getElementById('gameCanvas');
// 获取2D绘图上下文
const ctx = canvas.getContext('2d');
绘制基础图形
Canvas的绘图API允许我们绘制各种基础图形，例如矩形、圆形、线条和文本。下面的示例展示了如何绘制一个矩形和圆形，并通过填充颜色使其显示。
// 绘制矩形
ctx.fillStyle = '#FF0000'; // 设置填充颜色为红色
ctx.fillRect(10, 10, 100, 50); // 绘制填充矩形
// 绘制圆形
ctx.beginPath(); // 开始新路径
ctx.arc(120, 35, 20, 0, Math.PI * 2); // 画圆，圆心在(120, 35)，半径为20，从0到2π弧度
ctx.fillStyle = 'green'; // 设置填充颜色为绿色
ctx.fill(); // 填充圆形
通过上述步骤，我们可以搭建起使用Canvas进行图形绘制的初级框架。接下来，我们将在后续章节中深入探讨Canvas的碰撞检测算法、事件监听与处理、动画与计时器的使用，以及物理模拟和游戏开发中的循环逻辑等高级话题。
2. 碰撞检测算法实现
2.1 碰撞检测基础理论
2.1.1 点与矩形碰撞检测算法
碰撞检测是游戏开发中不可或缺的一环，它帮助我们判断两个或多个物体是否在空间中有交集。最基本也最常见的一种碰撞检测是点与矩形的碰撞检测。点与矩形的碰撞检测主要判断点是否在矩形的范围内。
通常，矩形会通过一个中心点（cx,cy）和一个宽度（w）、高度（h）来表示。碰撞检测算法中，一个点（px,py）可以与矩形发生碰撞的条件是： - px 在 cx-w/2 和 cx+w/2 之间 - py 在 cy-h/2 和 cy+h/2 之间
以下是基于此逻辑的JavaScript代码实现：
function isPointInRect(px, py, cx, cy, w, h) {
const halfWidth = w / 2;
const halfHeight = h / 2;
return px > (cx - halfWidth) && px < (cx + halfWidth) &&
py > (cy - halfHeight) && py < (cy + halfHeight);
}
2.1.2 矩形与圆形碰撞检测算法
在游戏开发中，圆形代表的往往是一些球状物体，例如球、爆炸效果等。矩形与圆形的碰撞检测通常需要判断圆形的中心点是否在矩形的边界内。
圆形与矩形碰撞检测的条件较为复杂，需要综合考虑圆形半径和矩形的位置。当一个圆形（x,y,r）与矩形（cx,cy,w,h）发生碰撞的条件是：
- 圆心到矩形中心的距离小于圆的半径加上矩形半宽和半高的最大值。
- 圆心到矩形中心的距离大于圆的半径减去矩形半宽和半高的最小值。
以下是实现的代码段：
function isCircleInRect(x, y, r, cx, cy, w, h) {
const halfWidth = w / 2;
const halfHeight = h / 2;
let closestX = Math.max(cx - halfWidth, Math.min(x, cx + halfWidth));
let closestY = Math.max(cy - halfHeight, Math.min(y, cy + halfHeight));
return (x - closestX) ** 2 + (y - closestY) ** 2 < r * r;
}
表格总结
| 算法类型 | 碰撞对象 | 碰撞条件 | |-------|-------|-------| | 点与矩形 | 点、矩形 | 点在矩形的定义边界内 | | 矩形与圆形 | 矩形、圆形 | 圆心到矩形中心距离小于等于半径+矩形半宽高之和的最大值 |
2.2 碰撞检测进阶技术
2.2.1 精确的圆形碰撞检测
虽然矩形与圆形碰撞检测已经可以满足大多数情况下的需要，但在精确度要求更高的情况下，我们可能需要进行精确的圆形碰撞检测。这里，我们关注的是两个圆体之间的碰撞检测。
两个圆形对象（x1,y1,r1）和（x2,y2,r2）的碰撞条件是它们的圆心之间的距离小于等于两圆半径之和，即：
distance(x1, y1, x2, y2) <= r1 + r2
以下代码展示了如何实现这种碰撞检测：
function isCircleCollision(x1, y1, r1, x2, y2, r2) {
let dx = x1 - x2;
let dy = y1 - y2;
let distance = Math.sqrt(dx * dx + dy * dy);
return distance < r1 + r2;
}
2.2.2 多边形碰撞检测算法
在一些特殊的游戏设计中，我们可能需要检测两个多边形的碰撞。多边形碰撞检测算法比点、矩形和圆形碰撞都要复杂得多。基本的多边形碰撞检测算法之一是分离轴定理（Separating Axis Theorem, SAT）。
简而言之，如果在两个多边形的所有边上的投影都存在重叠，则这两个多边形是相交的。要实现SAT，你需要为每个多边形执行以下步骤：
- 从多边形的每个顶点到相邻的顶点计算边。
- 对于每一条边，计算两个多边形在这条边上的投影。
- 确定这些投影是否有重叠。
- 如果所有的边都满足投影重叠的条件，则多边形相交。
由于此算法相对复杂，这里不展示完整的代码实现，但你可以想象这种算法的实现需要更多的数学知识和编程技巧。
mermaid格式流程图
以下是使用mermaid流程图来展示多边形碰撞检测的过程：
graph TD
A[开始检测] --> B[获取多边形A和B的顶点]
B --> C[计算多边形A的边]
B --> D[计算多边形B的边]
C --> E[对于每条边投影多边形A和B]
D --> E
E --> F{边的投影是否重叠}
F -->|是| G[检查下一条边]
F -->|否| H[多边形不相交]
G --> I{是否检查了所有边}
I -->|否| E
I -->|是| J[多边形相交]
表格总结
| 算法类型 | 碰撞对象 | 碰撞条件 | |-------|--------|--------| | 圆形与圆形 | 圆形 | 圆心距离小于等于半径之和 | | 多边形与多边形 | 多边形 | 每条边的投影都有重叠 |
通过上述的二级章节和三级章节，我们已经讨论了碰撞检测的两种进阶技术，即精确的圆形碰撞检测和多边形碰撞检测。碰撞检测是游戏开发中非常重要的组成部分，它直接决定了游戏的互动性和真实感。在实际应用中，开发者需要根据游戏的具体需求选择合适的碰撞检测方法，并通过代码实现碰撞逻辑，以增强游戏体验。
3. JavaScript事件监听与处理
3.1 事件监听机制
3.1.1 鼠标事件和键盘事件的基本使用
在Web开发中，事件监听机制是构建交互式应用程序的基石。JavaScript中的事件监听允许开发者为HTML元素添加事件处理器，以便在事件发生时执行特定的代码逻辑。
鼠标事件是最常见的交互方式之一。下面是一个添加事件监听器以响应鼠标点击的基本示例：
// 获取按钮元素
const myButton = document.querySelector('button');
// 添加点击事件监听器
myButton.addEventListener('click', function(event) {
// 这个函数会在按钮被点击时执行
console.log('按钮被点击了');
});
在这个例子中，我们首先通过 document.querySelector 选择了页面上的一个按钮元素。然后我们通过 addEventListener 方法添加了一个事件监听器，它会在用户点击按钮时触发。事件监听器中的函数被称为事件处理函数，在这个例子中，它简单地在控制台输出一条消息。
除了鼠标点击事件（ click ），还有许多其他类型的鼠标事件，如 mouseover 、 mouseout 、 mousemove 、 mousedown 和 mouseup 等，它们各自在不同的鼠标操作阶段触发。
键盘事件也是用户交互的重要部分。下面是如何监听键盘事件的示例：
document.addEventListener('keydown', function(event) {
console.log('键被按下:', event.key);
});
上面的代码会在任何键被按下时触发，事件对象 event 包含了被按下的键的信息，比如 event.key 将返回被按下的键的名称。
通过合理利用这些事件，开发者可以创建出响应用户操作的动态网页。
3.1.2 触摸事件与移动端支持
随着移动设备的普及，触摸事件变得越来越重要。触摸事件是指用户通过触摸屏幕进行交互时产生的事件。
以下是一些常见的触摸事件：
-
touchstart：用户触摸屏幕时触发。 -
touchmove：用户在屏幕上移动手指时触发。 -
touchend：用户从屏幕上移开手指时触发。 -
touchcancel：触摸事件被中断时触发（如电话呼叫）。
使用触摸事件可以创建支持触摸操作的应用，例如滑动浏览图片、缩放地图等。下面是一个简单的示例：
const myElement = document.getElementById('myElement');
myElement.addEventListener('touchstart', function(event) {
console.log('开始触摸');
});
myElement.addEventListener('touchmove', function(event) {
// 阻止默认的滚动和缩放行为
event.preventDefault();
console.log('移动触摸');
});
myElement.addEventListener('touchend', function(event) {
console.log('结束触摸');
});
为了提高移动设备上的用户体验，开发者通常会使用触摸事件而不是鼠标事件。因为触摸事件不仅提供了与鼠标事件相同的交互功能，还能够处理多点触控等更复杂的操作。
3.2 事件处理策略
3.2.1 阻止事件默认行为和冒泡
在JavaScript中，事件处理不仅限于执行简单的操作。通过控制事件流，开发者可以实现更精细的交互设计。事件的默认行为是浏览器为某些事件类型提供的预设行为。例如，在表单提交时，表单会默认重新加载页面。要阻止这种默认行为，可以使用 event.preventDefault() 方法：
const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
console.log('表单提交已被拦截');
});
事件冒泡是事件在DOM树中从下向上传播的过程，这意味着一个元素上的事件不仅仅在其上触发，还会传播到其所有的祖先元素。使用 event.stopPropagation() 可以阻止事件的进一步冒泡：
const myElement = document.getElementById('myElement');
const myParent = document.getElementById('myParent');
myElement.addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡到父元素
console.log('事件不会冒泡到父元素');
});
myParent.addEventListener('click', function(event) {
console.log('父元素未收到点击事件');
});
通过适当地使用这些方法，开发者可以创建出更加灵活和响应用户行为的Web应用程序。
3.2.2 事件委托和事件传播
事件委托是一种利用事件冒泡机制来处理多个相似元素事件的技术。通过将事件监听器添加到一个共同的父元素上，而不是将监听器添加到所有目标元素上，可以实现更高的效率和更好的性能。当事件在子元素上触发时，事件会冒泡到父元素，并在那里被捕获处理。
事件委托的典型用例是处理动态添加到DOM中的元素的事件。例如，如果你有一个会动态生成的列表项的列表，使用事件委托可以让一个事件监听器处理所有列表项的点击事件：
const ulElement = document.getElementById('myList');
ulElement.addEventListener('click', function(event) {
// 检查事件的目标是否是我们关注的元素
if (event.target.tagName === 'LI') {
console.log('列表项被点击:', event.target.textContent);
}
});
在这个例子中，无论何时点击 LI 元素，事件都会冒泡到父元素 UL ，在那里我们的事件监听器捕获并处理它。
事件传播描述了事件在DOM树中的传播过程，包括捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从窗口对象向下传播到目标对象；在目标阶段，事件到达目标元素；最后，在冒泡阶段，事件又向上冒泡回窗口对象。了解这三个阶段对于理解复杂交互和调试事件相关问题非常有用。
通过以上的策略，开发者可以有效地管理大量的事件，并使Web应用在各种情况下表现一致且高效。
以上章节展示了JavaScript事件监听和处理的基础和策略，包括事件监听机制和事件处理策略的深入理解，为构建响应用户交互的应用程序打下坚实基础。
4. 动画与计时器使用（setInterval和requestAnimationFrame）
动画和计时器是Web前端开发中实现动态效果的核心技术，尤其是JavaScript中提供的 setInterval 和 requestAnimationFrame 两种函数，它们分别用于实现连续周期性任务和流畅的动画效果。
4.1 setInterval的基本应用
4.1.1 实现周期性动画
setInterval 函数是实现周期性动画的常用方法。它允许我们以固定的延迟时间重复执行一个函数。对于动画来说，这通常意味着在一定时间内重复更新元素的状态，从而创造出连续运动的视觉效果。
function animateBall() {
const ball = document.querySelector('.ball');
let position = 0;
function moveBall() {
ball.style.left = `${position}px`;
position += 10;
if (position > window.innerWidth) {
position = 0;
}
}
setInterval(moveBall, 10); // 每10毫秒移动球的位置
}
animateBall();
在上述代码中，定义了一个 moveBall 函数来更新小球的位置，并使用 setInterval 以10毫秒为周期重复调用此函数。这样，小球就会沿着水平方向做周期性移动。然而，需要注意的是， setInterval 并不是处理动画的理想选择。
4.1.2 setInterval的优化和问题
尽管 setInterval 很容易使用，但它在执行任务时并不考虑浏览器的绘制周期。这意味着无论浏览器是否已经完成了上一次绘制， setInterval 都将无差别地执行回调函数。这可能导致动画卡顿和不平滑。
let lastTime = null;
function updateAnimation(timestamp) {
if (!lastTime) lastTime = timestamp;
const timeDiff = timestamp - lastTime;
const delta = Math.min(timeDiff, 30); // 防止在高延迟时执行过多更新
// 动画逻辑
updateGame(delta);
lastTime = timestamp;
window.requestAnimationFrame(updateAnimation);
}
window.requestAnimationFrame(updateAnimation);
上述代码使用了 requestAnimationFrame 和 Date.now() 来计算时间差，并确保动画更新不会因为浏览器的绘制延迟而累积执行。
4.2 requestAnimationFrame的优势
4.2.1 浏览器兼容性与使用方法
requestAnimationFrame 是浏览器提供的一个更加优化的动画函数。它保证在浏览器重绘之前调用指定的函数，使得动画效果更加平滑，并且能够根据系统的性能来调整帧率，从而避免不必要的计算和渲染，有效节省资源。
function drawFrame(time) {
updateGame(time);
window.requestAnimationFrame(drawFrame);
}
window.requestAnimationFrame(drawFrame);
上述代码中， drawFrame 函数会被在浏览器下一次绘制之前执行，这是一个递归调用，因为每次 requestAnimationFrame 的回调函数执行完毕后，都会请求下一次动画帧的绘制。
4.2.2 requestAnimationFrame与性能优化
requestAnimationFrame 与 setInterval 相比具有明显的优势。它结合了浏览器的重绘时间，避免了不必要的计算，特别是当页面不可见时（例如在标签页后）， requestAnimationFrame 会被暂停，直到页面再次成为可见状态。此外，如果设备的帧率很低， requestAnimationFrame 也会相应地降低调用频率，这样可以防止动画在低性能设备上出现卡顿和滞后现象。
let lastTime = null;
const speed = 10;
function updateGame(delta) {
// 假设有一个对象和一个函数用来更新游戏状态和渲染游戏画面
const game = getGameState();
renderGame(game);
// 计算时间差，并考虑浏览器帧率的限制
if (lastTime !== null) {
const timeDiff = delta - lastTime;
if (timeDiff < 16) return; // 如果小于16ms，不执行更新（大约60帧每秒）
}
lastTime = delta;
}
function drawFrame(time) {
updateGame(time);
window.requestAnimationFrame(drawFrame);
}
// 在兼容性处理后，启动动画循环
window.requestAnimationFrame(drawFrame);
在上述代码中， updateGame 函数根据实际的时间差来调整游戏状态，以达到平滑的动画效果。如果两次调用之间的时间差很小，就跳过此次更新，以保持动画的流畅性。
通过上述的讨论和示例，我们了解到 setInterval 在处理周期性任务时的局限性和 requestAnimationFrame 在优化动画表现上的优势。在开发动画效果时，应当优先考虑使用 requestAnimationFrame 来确保动画的流畅性和性能的最优。
5. 简单物理模拟（重力、速度、反弹）
物理模拟是游戏开发中的核心组成部分之一，它为游戏世界提供了现实感和沉浸感。在本章节中，我们将探讨如何利用基础物理原理模拟简单的游戏世界动态效果，例如重力、速度、以及碰撞后的反弹处理。通过这些模拟，我们可以给游戏中的对象赋予更加真实的行为。
5.1 物理模拟的理论基础
5.1.1 重力与加速度的模拟
重力是影响游戏中对象下落行为的物理力。在现实世界中，重力加速度是一个常量（大约为9.8 m/s²），而在我们的游戏世界里，我们可以自定义这个值来适应游戏环境和体验。
要模拟重力效果，我们需要给游戏中的对象施加一个恒定的加速度。这个加速度会随着时间的推移改变对象的速度，并最终影响位置。具体来说，我们可以使用以下公式来计算加速度对速度的影响：
[ V = V_0 + a \times t ]
这里的 ( V ) 是最终速度，( V_0 ) 是初始速度，( a ) 是加速度，( t ) 是时间间隔。
5.1.2 速度和方向的控制
在游戏世界中，对象的速度和方向是决定其行为的关键因素。通过修改对象的速度向量，我们可以控制它在游戏世界中的移动。速度向量通常由水平和垂直分量组成，因此我们可以通过调整这两个分量来改变对象的运动方向。
要模拟真实世界中的物理限制，例如终端速度，我们可以在对象的速度达到某个阈值时不再增加速度。这样可以模拟出类似空气阻力的效果。
5.2 物理模拟的代码实现
5.2.1 球体运动的模拟
接下来，我们将通过代码来实现球体在重力作用下的运动模拟。我们假设游戏世界中的每个对象都是一个球体，而且具有一个表示其运动状态的属性集合，包括位置、速度和加速度。
class Ball {
constructor(x, y, radius, color, gravity = 0.98, velocityX = 0, velocityY = 0) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.gravity = gravity;
this.velocityX = velocityX;
this.velocityY = velocityY;
}
update() {
// 更新速度向量
this.velocityY += this.gravity;
// 更新位置
this.x += this.velocityX;
this.y += this.velocityY;
}
draw(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
}
// 创建球体实例并设置初始位置和速度
let ball = new Ball(50, 50, 10, "#0095DD", 0.98, 10, 20);
function gameLoop() {
requestAnimationFrame(gameLoop);
ball.update();
drawCanvas();
}
function drawCanvas() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制球体
ball.draw(ctx);
}
// 启动游戏循环
gameLoop();
在这个例子中，我们创建了一个 Ball 类来表示球体对象。 update 方法更新球体的位置，而 draw 方法则在画布上绘制球体。
5.2.2 碰撞后的反弹处理
在物理世界中，当对象撞击到另一个对象或地面时，它会根据动量守恒和能量损失进行反弹。为了模拟这种现象，我们需要定义一个简单的碰撞检测机制和反弹逻辑。
class Ball {
// ...已有的属性和方法...
checkCollision(bottom) {
// 检查球体是否到达底部边界
if (this.y + this.radius >= bottom) {
// 碰撞后的反弹处理
this.velocityY = -this.velocityY * 0.7; // 反弹并损失一些能量
this.y = bottom - this.radius; // 更新球体位置以保持在边界上
}
}
}
function gameLoop() {
requestAnimationFrame(gameLoop);
// 更新球体位置
ball.update();
// 检查碰撞
ball.checkCollision(canvas.height);
// 绘制球体
drawCanvas();
}
在这个修正的代码中，我们添加了 checkCollision 方法，它会在球体位置更新后被调用。如果球体到达了画布的底部边界，这个方法会反转球体的速度向量的垂直分量并减少其大小以模拟能量损失。
通过这个简单的物理模拟，我们可以实现球体在画布中的运动、重力下落、以及碰撞后的反弹效果。随着物理模拟的进一步复杂化，我们可以通过引入更复杂的碰撞检测、摩擦力、空气阻力和更多的物理定律，让游戏世界更加真实和丰富。
6. 游戏循环与逻辑更新
6.1 游戏循环的设计模式
游戏循环是游戏开发中最核心的概念之一，它负责在游戏运行过程中不断更新游戏状态和渲染画面，以达到动画的连贯效果。其本质可以被视为一种无限的循环结构，主要任务是按照一定的时间间隔重复执行一系列操作。
6.1.1 游戏状态机的原理
游戏状态机（Game State Machine）是管理游戏不同状态的逻辑框架，它确保游戏在任何时刻都处于一种明确的状态。常见的游戏状态包括：
- 游戏开始（初始化）
- 游戏进行中（运行）
- 游戏暂停（中断）
- 游戏结束（得分和重置）
状态转换可以基于玩家的输入、特定事件或时间间隔。例如，在一个简单的游戏循环中，我们可以根据用户按下特定按钮来从"游戏进行中"状态转换到"游戏暂停"状态。
let gameState = "running"; // 初始状态
function updateGame() {
if (gameState === "running") {
// 更新游戏逻辑
// 渲染游戏画面
} else if (gameState === "paused") {
// 渲染暂停画面
} else if (gameState === "gameOver") {
// 渲染游戏结束画面
}
}
function pauseGame() {
gameState = "paused";
}
function resumeGame() {
gameState = "running";
}
function gameOver() {
gameState = "gameOver";
}
6.1.2 游戏循环的实现
游戏循环的实现方式有多种，包括基于时间间隔的循环、基于事件的循环等。在Web游戏开发中，通常使用 requestAnimationFrame 来实现一个高效的、基于时间的循环。
function gameLoop(timestamp) {
updateGame(); // 更新游戏逻辑和渲染
requestAnimationFrame(gameLoop); // 请求下一帧的渲染
}
requestAnimationFrame(gameLoop); // 启动游戏循环
6.2 游戏逻辑的更新与优化
游戏循环中的逻辑更新需要高效的处理，以确保游戏运行流畅，避免卡顿或丢帧的现象。
6.2.1 优化游戏性能的策略
游戏性能的优化可以通过多种方式实现，如避免在游戏循环中执行耗时操作、减少DOM操作、使用Web Workers处理复杂计算等。
function complexCalculations() {
// 使用Web Workers进行复杂计算
// Worker是运行在后台的JavaScript，不阻塞用户界面
}
function updateGame() {
complexCalculations(); // 使用Web Workers来避免阻塞UI线程
// 其他逻辑和渲染更新
}
6.2.2 游戏状态的及时更新
游戏状态需要及时更新以反映游戏发生的任何变化。例如，玩家移动、碰撞检测、得分增加等事件都应当迅速更新状态，并反映在游戏界面上。
let score = 0; // 玩家得分
function increaseScore(points) {
score += points;
updateScoreUI(score); // 更新得分显示
}
function updateGame() {
// 检测碰撞和其他逻辑
if (collisionDetected) {
increaseScore(10); // 碰撞后增加分数
}
// 渲染更新
}
在实际的开发中，以上代码段需要根据具体的项目框架和设计模式进一步封装和实现。例如，使用组件系统或框架（如React、Vue等）来管理UI和状态，使用模块化来组织代码，以及利用现代浏览器提供的Web API来进一步增强游戏的性能和交互性。
简介：HTML5通过其Canvas元素和JavaScript API提供了强大的绘图和动画能力，允许开发者构建具有丰富交互性的网页应用。本教程将引导你通过创建一个简单的弹球游戏来深入理解这些技术。游戏开发过程中将涉及Canvas API的基础绘图操作、碰撞检测技术、JavaScript事件处理、计时器和动画实现、基本物理模拟以及游戏循环和状态管理。此外，还会探讨用户界面元素的实现。通过这个项目，你将学会如何利用HTML5特性，制作一个基本的、可交互的网页游戏。
扫一扫
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
