如何將球扔進杯子？

-1

我有一個球，一個杯子，以及代表投擲力量欄的內部和外部div的圖像。
當用戶點擊球時，電源欄開始增加，然後遞減。當用戶第二次點擊球時，投擲力棒停止並且球被投擲。如何將球扔進杯子？

正如我已經開始編碼這個，我意識到某些事情會變得非常複雜，即使這個想法本身很簡單。

例如，我希望球能夠「反彈」，這意味着我將不僅需要跟蹤球的X和Y座標，而且Z座標代表深度。

當球落下時，z座標減少，並且球的圖像應該按比例縮小，當它開始反彈時，它應該放大，再次根據z座標。如果到達杯子時z座標低於某個特定值，我還希望球從杯子上彈開，如果它是某個甜蜜點，則進入杯子;如果z值超過杯子，則進入杯子。那個甜蜜的地方。

爲了保持這個簡短的地方，我只是發佈我迄今爲止的。這個例子缺乏某些我希望人們可以幫助我的東西。

<html> 
    <head> 
    <style> 
     #ball { 
      position:absolute; 
      width:75px; 
      height:75px; 
     } 

     #cup1 { 
      position:absolute; 
      left:375px; 
     } 

     #outerPowerMeter { 
      position:absolute; 
      width:25px; 
      height:100px; 
      background-color:red; 
     } 

     #innerPowerMeter { 
      position:absolute; 
      width:25px; 
      height:100px; 
      background-color:black; 
     } 
    </style> 

    <script> 
     window.onload = function() { 
      var ball = document.getElementById("ball"); 
      var yPos = 500; 
      var xPos = 400; 
      var zPos = 100; 
      var ballWidth = 75; 
      var ballHeight = 75; 
      var throwBallInterval; 
      var changeBallSizeInterval; 

      ball.style.top = yPos + "px"; 
      ball.style.left = xPos + "px"; 

      var cup1 = document.getElementById("cup1"); 

      var powerMeter = document.getElementById("innerPowerMeter"); 
      var powerMeterValue = 0; 
      var powerMeterHeight = 100; 
      var powerMeterActive = false; 
      var powerMeterInterval; 

      powerMeter.style.height = powerMeterHeight + "px"; 

      ball.onclick = function() { 
       if (powerMeterActive == false) { 
        powerMeterActive = true; 
        startPowerMeter(); 
       } else { 
        powerMeterActive = false; 
        stopPowerMeter(); 
        throwBall(); 
       } 
      } 

      function throwBall() { 
       throwBallInterval = setInterval(function() { 
        yPos = yPos - 1; 
        ball.style.top = yPos + "px"; 
       }, 1); 

       changeBallSizeInterval = setInterval(function() { 
        zPos = zPos - 1; 
        ballWidth = ballWidth - 1; 
        ballHeight = ballHeight - 1; 
        ball.style.width = ballWidth; 
        ball.style.height = ballHeight; 
       }, 100); 
      } 

      function startPowerMeter() { 
       var increment = true; 
       powerMeterInterval = setInterval(function() { 
        if (increment == true) { 
         powerMeterValue = powerMeterValue + 1; 
         powerMeter.style.height = (powerMeterHeight - powerMeterValue) + "px"; 
         if (powerMeterValue == 100) { 
          increment = false; 
         } 
        } else { 
         powerMeterValue = powerMeterValue - 1; 
         powerMeter.style.height = (powerMeterHeight - powerMeterValue) + "px"; 
         if (powerMeterValue == 0) { 
          increment = true; 
         } 
        } 
       },1); 
      } 

      function stopPowerMeter() { 
       clearInterval(powerMeterInterval); 
      } 

      function detectCollision() { } 

      function detectGoal() { } 
     } 
    </script> 

    </head> 
    <body> 
     <img id="cup1" src="http://beerwar.com/game/images/cup.png"> 
     <img id="ball" src="http://beerwar.com/game/images/ball.png"> 
     <div id="outerPowerMeter"> 
      <div id="innerPowerMeter"></div> 
     </div> 
    </body> 
</html>

來源

2014-10-22 David Stampher

那麼，你究竟在問什麼？我冒昧地從您的帖子中刪除了大量不相關的信息，但我在那裏找不到實際的問題。這個代碼有什麼「不起作用」嗎？發生了什麼，你期望/想要發生什麼？ – Cerbrus 2014-10-22 07:58:49

對不起，如果我不清楚。我會複製和粘貼我所問的「肉」，如果那還不是直截了當的，請告訴我。例如，我希望球能夠「反彈」，這意味着我不僅需要跟蹤球x和y座標，還需要表示深度的z座標。當球落下時，z座標減少，並且球的圖像尺寸應該縮小，並且當它開始反彈時，它應該放大，再次基於z座標。 – 2014-10-22 08:01:15

我也想讓球在杯子到達杯子時，如果z座標低於某個值，杯子會跳出杯子，如果它是某個甜蜜點，則進入杯子，如果杯子的z值是在那個甜蜜的地方。 – 2014-10-22 08:01:41

既然你發佈這樣一個詳細的案例，我想我給你一些指點。請注意：這主要是矢量數學。我也不是物理學家，但矢量數學並不是那麼複雜！一些畢達哥拉斯在這裏和那裏，你被設置。

一個很好的，一個快速庫glMatrix

幾件事情讓你去。 請注意：它是僞代碼，但它確實解釋了它的概念。

保持載體的球
的位置保持一個矢量爲杯子的位置（其中，所述球應該擊中）
保持一個矢量關於「相機」的位置（因爲你要根據來自攝像機的距離來縮放球，不一定是準確的，只是有想法跨越）
保持一個向量你要應用到球「的力的方向」。（這可以通過力從力計相乘）
保持一個向量爲
「球的速度」保持一個矢量的「重心」

你「扔」功能會成爲沿着線的東西：

ball.velocity = throw.direction * throw.power 
setInterval(tick,50);

基本上，你的 '滴答' 功能（功能應用每x時間）

ball.velocity += gravity; // we apply gravity to the speed of the ball. Pulling it down 
ball.position = ball.position + ball.velocity // we add the velocity to the position every tick 

if (ball.position.y < ball.radius) // if the ball is below its radius, it is colliding with the ground 
{ 
    ball.position.y = 0 - ball.position.y; // just invert its 'up' position, to make it not collide with the ground anymore 
    // to make the ball go back up again, invert its 'up' velocity. Gravity will get it down eventually 
    // dampening applied so it will bounce up less every time. For instance make that 0.9. 
    ball.velocity.y = 0 - (ball.velocity.y * dampening); 
} 
// the scale of the ball is not determined by its height, but by its distance from the camera 
distanceFromCamera = (camera.position - ball.position).length() 
ball.scale = 100 - (distanceFromCamera/scaleFactor); 

// to make a simply guess if we are hitting the target, just check the distance to it. 
distanceFromTarget = (cup.target.position - ball.position).length() 
if (distanceFromTarget <= cup.target.radius) // if we 'hit the target' 
    handleHit()

來源

2014-10-22 08:26:41 DoXicK

這非常有幫助。我真的很感激你花時間寫出來。謝謝！我會在這個項目/學習過程中經常參考它，所以它不會被浪費。：d – 2014-10-22 08:31:26

不是一個問題:-)，使這一切更容易把握，首先在2D構建它。數學將完全相同，但更容易可視化。如果你被困住了，請在這裏給我發一條消息。 – DoXicK 2014-10-22 08:34:34

太棒了。我肯定會給你發信息，但只有在必要時。無論如何，當我擁有完成品時，我一定會在遊戲中給你留言。我試圖爲Facebook和移動順便做一個啤酒乒乓遊戲，這是大學生們非常喜歡的遊戲：D – 2014-10-22 08:42:13

如何將球扔進杯子？

回答

相關問題