Html5游戏开发之乒乓Ping Pong游戏示例(三)
在上一篇博客中，我们已经完成了乒乓球游戏中球的运动和碰撞检测。现在，我们需要添加两个乒乓板并实现发球和碰撞检测的功能。
添加乒乓板
首先，在HTML文件中添加两个乒乓板的div，并在CSS样式中设置它们的位置和样式：
<div id="paddle1"></div>
<div id="paddle2"></div>
#paddle1, #paddle2 {
position: absolute;
width: 20px;
height: 100px;
background-color: #FFF;
}
#paddle1 {
left: 0;
top: 200px;
}
#paddle2 {
right: 0;
top: 200px;
}
接着，在JavaScript文件中添加如下代码，创建两个乒乓板的对象：
var paddle1 = {
x: 0,
y: 200,
width: 20,
height: 100,
speed: 5
};
var paddle2 = {
x: canvas.width - 20,
y: 200,
width: 20,
height: 100,
speed: 5
};
然后，在游戏循环中，我们需要实现键盘控制乒乓板移动的功能。我们可以使用addEventListener()方法监听键盘事件，如下所示：
document.addEventListener("keydown", function(event) {
if(event.keyCode == 87) { //按下W键
paddle1.y -= paddle1.speed;
}
else if(event.keyCode == 83) { //按下S键
paddle1.y += paddle1.speed;
}
else if(event.keyCode == 38) { //按下上箭头键
paddle2.y -= paddle2.speed;
}
else if(event.keyCode == 40) { //按下下箭头键
paddle2.y += paddle2.speed;
}
});
注意，这里只处理了移动的逻辑，还需要处理边界检测，确保乒乓板不会超出游戏画面边界。在游戏循环中，我们可以添加如下代码：
//限制乒乓板移动范围
if(paddle1.y < 0) {
paddle1.y = 0;
}
else if(paddle1.y + paddle1.height > canvas.height) {
paddle1.y = canvas.height - paddle1.height;
}
if(paddle2.y < 0) {
paddle2.y = 0;
}
else if(paddle2.y + paddle2.height > canvas.height) {
paddle2.y = canvas.height - paddle2.height;
}
完成上述代码之后，我们就可以通过W和S键控制左边的乒乓板移动，通过上箭头和下箭头键控制右边的乒乓板移动了。
发球和碰撞检测
接下来，我们需要实现发球和碰撞检测的功能。
在游戏开始时，在init()函数中添加如下代码，初始化球的位置和速度：
//初始化球的位置和速度
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.speedX = 5 * (Math.random() > 0.5 ? 1 : -1);
ball.speedY = 5 * (Math.random() * 2 - 1);
然后，在游戏循环中，我们需要检测球的位置是否超出乒乓板的范围，如果是，则反弹球，并调整球的速度和方向。如果球在乒乓板上，则改变球的运动方向。代码如下：
//碰撞检测
if(ball.y + ball.radius >= canvas.height || ball.y - ball.radius <= 0) {
ball.speedY = -ball.speedY;
}
if(ball.x + ball.radius >= canvas.width) { //球碰到右边边界
//右边玩家得分
score2++;
//初始化球的位置和速度
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.speedX = -ball.speedX;
ball.speedY = 5 * (Math.random() * 2 - 1);
}
else if(ball.x - ball.radius <= 0) { //球碰到左边边界
//左边玩家得分
score1++;
//初始化球的位置和速度
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.speedX = 5 * (Math.random() > 0.5 ? 1 : -1);
ball.speedY = 5 * (Math.random() * 2 - 1);
}
//球和乒乓板碰撞检测
if(ball.x + ball.radius >= paddle2.x && ball.y >= paddle2.y && ball.y <= paddle2.y + paddle2.height) {
ball.speedX = -ball.speedX;
}
if(ball.x - ball.radius <= paddle1.x + paddle1.width && ball.y >= paddle1.y && ball.y <= paddle1.y + paddle1.height) {
ball.speedX = -ball.speedX;
}
至此，我们已经完成了乒乓球游戏的开发。完整的代码如下：