方球会从障碍物的顶部反弹，但是如果它是从底部出来的，它将直接穿过障碍物。我可以在碰撞检测代码中添加些什么，以使其也可以从底部检查碰撞。提前致谢。码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Paddle Game</title>
<style>
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
</head>
<body>
<h1>Instructions</h1>
<p>Hit the square with the paddle at the bottom of the screen. You have 5 lives. If you hit the square you gain 1 point but if you miss you loose 1 life. If your lives fall below 0 you loose and the game restarts. Score 10 points to win.</p>
<canvas id="myCanvas" width="1000" height="800"></canvas>
<script>
var canvas; //This variable will be use as a reference to the canvas object
var ctx; //A variable to hold the value of the context
//Square Ball
var rectX = 100;//rect X pos
var rectY = 200;//rect Y pos
var rectWidth = 25;//width
var rectHeight = 25;//height
var rectSpeedX = 10;
var rectSpeedY = 10;
//Paddle
var rectX2 = 400;//rect X pos
var rectY2 = 790;//rect Y pos
var rectWidth2 = 100;//width
var rectHeight2 = 20;//height
//Obstruction
var rectX3 = 500;
var rectY3 = 600;
var rectWidth3 = 300;
var rectHeight3 = 25;
//Obstruction
var rectX4 = 200;
var rectY4 = 300;
var rectWidth4 = 300;
var rectHeight4 = 25;
var score = 0;
var lives = 5;
const WIDTH = 1000; //Width of the canvas
const HEIGHT = 800; //Height of the canvas
function mouseMove(event){
rectX2 = rectX2 = event.pageX-((document.body.clientWidth-WIDTH)/2+ (rectWidth2/2));
}
document.addEventListener("mousemove", mouseMove);
window.onload = function () {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
var framesPerSecond = 30; //FPS
setInterval(function(){
drawEverything();//Calling the rect function 30 FPS
movement();
gameReset();
winCondition();
}, 1000/framesPerSecond); //Calls the move and draw function using an inline function. 30 FPS 1000/30
}
function drawEverything(){
ctx.fillStyle = 'red' //Draws the white background every frame covering square
ctx.fillRect(0,0,WIDTH, HEIGHT); //background
ctx.fillStyle = 'black'
ctx.fillRect(rectX, rectY, rectWidth, rectHeight); //redraws the recntangle each frame which gives the illusion of movement. moving square
ctx.fillRect(rectX2, rectY2, rectWidth2, rectHeight2); //paddle
ctx.fillRect(rectX3, rectY3, rectWidth3, rectHeight3); //obstruction
ctx.fillRect(rectX4, rectY4, rectWidth4, rectHeight4) //obstruction
ctx.fillText("Score", 100,50);
ctx.fillText(score, 100,100); //score count
ctx.fillText("Lives", 900,50);
ctx.fillText(lives, 900,100); //life count
}
function movement(){
rectX += rectSpeedX;
rectY += rectSpeedY;
if (rectX > WIDTH-12.5|| rectX < 0){
rectSpeedX = -rectSpeedX;
}
if (rectY > HEIGHT-12.5 || rectY < 0){
rectSpeedY = -rectSpeedY;
}
//console.log(rectX2);
if(rectX < rectX2 + rectWidth2 && rectX + rectWidth > rectX2 && rectY < rectY2 + rectHeight2 && rectHeight + rectY > rectY2){
//console.log("Hi")
score += 1
//rectSpeedX++
//rectSpeedY++
var deltaY = rectY
-(rectY+rectHeight2/2);
rectSpeedY = deltaY * 2;
} else if(rectY > HEIGHT-12.5){
//console.log('Bye');
lives -=1
}
if(rectX < rectX3 + rectWidth3 && rectX + rectWidth > rectX3 && rectY < rectY3 + rectHeight3 && rectHeight + rectY > rectY3){
var deltaY = rectY
-(rectY+rectHeight3/2);
rectSpeedY = deltaY * 2;
}
if(rectX < rectX4 + rectWidth4 && rectX + rectWidth > rectX4 && rectY < rectY4 + rectHeight4 && rectHeight + rectY > rectY4){
var deltaY = rectY
-(rectY+rectHeight4/2);
rectSpeedY = deltaY * 2;
}
}
function gameReset(){
if(lives < 0){
alert("Game Over. Click Ok to restart. Remember do not let your lives fall below 0");
location.reload();
}
}
function winCondition(){
if(score >= 10){
alert("Congratulations you won! Hit 'OK' to restart the game.");
location.reload();
}
}
//if(rectX < rectX2 + rectWidth2 && rectX + rectWidth > rectX2 && rectY < rectY2 + rectHeight2 && rectHeight + rectY > rectY2)
</script>
</body>
</html>
另外，如果您想告诉我您对该程序的看法，我将不胜感激，我更像是一个初学者。
最佳答案
我看了看你的代码...
您在这里的游戏取得了良好的开端，但我认为您需要改进一些内容，然后再进行进一步的开发。主要是您需要完成工作并尝试使用objects重写它...
如果您看一看我做的here类似的html canvas弹跳球，我想您将从我的代码中学到很多东西。您可以在我的github http://github.com/roadkillcat/UltiBouncingBall上看到该项目的源代码。
如果您是我，我可以更简洁地写您到目前为止拥有的内容，并使其更易于阅读。但是，自动柜员机的代码太凌乱，无法理解，需要清理。如果您愿意，我很乐意提供帮助。
以下是一些使游戏更进一步的想法：
用arc方法将球打成一个圆
停止拨片能够移出屏幕
障碍物（rect3 + rect4）和球的随机位置
关于javascript - 如何在游戏中障碍的底部添加2d碰撞？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45310663/