2017-07-25 91 views
1

方形的球會從障礙物的頂部彈回,但如果它來自底部,它會直接通過它們。我可以將什麼添加到碰撞檢測代碼中,以便它還可以檢查底部的碰撞。提前致謝。代碼:如何將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> 

此外,如果你想告訴我你對這個計劃的看法,我將不勝感激,我更喜歡初學者。

回答

0

我已經採取了看看你的代碼...

你已經做了一個遊戲一個良好的開端這裏,但也有幾件事情,我想你進一步,食用前應該提高。主要的一點就是需要通過你的工作,並嘗試使用objects重寫......

如果你看看一個類似HTML畫布彈跳球的事情我做了here,我想你會學到很多東西我的代碼。您可以在我的github http://github.com/roadkillcat/UltiBouncingBall上看到該項目的源代碼。

如果你是我,我可以寫下你目前爲止所做的更簡潔而且更易讀的內容。但是,您的代碼太雜亂,無法理解並需要清理。如果您願意,我會很樂意提供幫助。

這裏有一些想法採取遊戲進一步:

  • 使球與arc方法
  • 了一圈停槳能夠移出屏幕
  • 的障礙隨機定位( rect3 + rect4)和球
+0

感謝您的建議。我試圖實現你的一些想法。我自己隨機抽取了矩形和球的位置,如果測試它,槳的種類不能離開屏幕,你會明白我的意思。我知道有更好的方法來做到這一點。我嘗試將球變成一個圓,但組成現有矩形球的變量對於該程序至關重要。你希望我在哪裏PM你? – Connor

+0

創建一個github賬戶並上傳你的賬戶。如果你把我添加爲貢獻者,那麼我可以幫你寫下它。 –

+0

好的,我會的。感謝您所有的幫助。 – Connor