如何将2d碰撞添加到游戏中障碍物的底部？

方形的球会从障碍物的顶部弹回，但如果它来自底部，它会直接通过它们。我可以将什么添加到碰撞检测代码中，以便它还可以检查底部的碰撞。提前致谢。代码：如何将2d碰撞添加到游戏中障碍物的底部？

<!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>

此外，如果你想告诉我你对这个计划的看法，我将不胜感激，我更喜欢初学者。

来源

2017-07-25 Connor

我已经采取了看看你的代码...

你已经做了一个游戏一个良好的开端这里，但也有几件事情，我想你进一步，食用前应该提高。主要的一点就是需要通过你的工作，并尝试使用objects重写......

如果你看看一个类似HTML画布弹跳球的事情我做了here，我想你会学到很多东西我的代码。您可以在我的github http://github.com/roadkillcat/UltiBouncingBall上看到该项目的源代码。

如果你是我，我可以写下你目前为止所做的更简洁而且更易读的内容。但是，您的代码太杂乱，无法理解并需要清理。如果您愿意，我会很乐意提供帮助。

这里有一些想法采取游戏进一步：

使球与arc方法
了一圈停桨能够移出屏幕
的障碍随机定位（ rect3 + rect4）和球

来源

2017-07-29 15:17:06

感谢您的建议。我试图实现你的一些想法。我自己随机抽取了矩形和球的位置，如果测试它，桨的种类不能离开屏幕，你会明白我的意思。我知道有更好的方法来做到这一点。我尝试将球变成一个圆，但组成现有矩形球的变量对于该程序至关重要。你希望我在哪里PM你？ – Connor

创建一个github账户并上传你的账户。如果你把我添加为贡献者，那么我可以帮你写下它。 –

好的，我会的。感谢您所有的帮助。 – Connor

如何将2d碰撞添加到游戏中障碍物的底部？

回答

我已经采取了看看你的代码...

这里有一些想法采取游戏进一步：

相关问题