个人中心
gpt4 book ai didi

javascript - 球之间的碰撞检测javascript

转载 作者：行者123 更新时间：2023-11-30 12:11:56 27 4
gpt4 key购买 nike

您好，当 2 个球对象在 Canvas 上碰撞时，我正在尝试获得响应。

我有一个球对象 ballm 和一个名为 ball 的球对象。

这两个球在 Canvas 上来回弹跳。

如果球碰撞 Canvas 应该说游戏结束。

这是我到目前为止的碰撞代码

function collideWithBall() {

              var dx = (ball.x + ball.radius) - (ballm.x + ballm.r);
              var dy = (ball.y + ball.radius) - (ballm.y + ballm.r);
              var distance = Math.sqrt((dx * dx) + (dy * dy));
              if (distance < ball.radius + ballm.r) {                 

                  ctx.clearRect(0, 0, canvas.width, canvas.height);    
                  ctx.fillStyle = "black";
                  ctx.font = "18px Arial";
                  ctx.fillText("Game Over ", 300, 200);
                  shutdown();

              }         
          }

我唯一的问题是当两个球碰撞时没有任何反应。任何想法都会非常有帮助。

完整代码:

<!DOCTYPE html>

<html>

  <head>
    <meta charset="UTF-8">
    <title>Canvas</title>

    <style type="text/css">
      canvas {
        border: 1px solid black;
      }
    </style>

  </head>

  <body>

      <canvas id="tim's-game" width="800px" height="600px"></canvas>

      <script type="text/javascript">
          // up top. creates the canvas with given dimensions
          // declares script type


          // Gets a handle to the element with id canvasOne.      
          var canvas = document.getElementById("tim's-game");      
          // Get a 2D context for the canvas.     
          var ctx = canvas.getContext("2d");      

          // Creates object for the balls 
          var ball = {
              // determines the position where the ball will apear math.random gives a random position on the x ace
              position: {x: Math.floor((Math.random() * 780) + 20), y: 10}
              // Will determine the size of the ball
              , radius: 6
              // Will determine the speed of the ball
              , velocity: {x: 3, y: 0}
              // Will determine if the ball will get faster or slower
              , acceleration: {x: 0, y: 0.1}        
              // Function that draws the ball  
              ,drawBall: function(){                  
                  // Collour of the object         
                  ctx.fillStyle = "rgb(25, 100, 100)";  
                  // begins path
                  ctx.beginPath();
                  // calls the object it will draw with positions and size
                  ctx.arc(ball.position.x, ball.position.y, ball.radius, 0, 2 * Math.PI);
                  // fills the colour 
                  ctx.fill();       



                  // Update the y location.
                  ball.velocity.y += ball.acceleration.y;
                  ball.position.x += ball.velocity.x;
                  ball.position.y += ball.velocity.y;
                  // Keep the animation going while the ball has not touched the canvas bottom.
                  // Note there's a bug here.
                  if ((ball.position.x >= canvas.width - ball.radius) ||  (ball.position.x <=                 ball.radius))
                      ball.velocity.x = -ball.velocity.x;    
                  if ((ball.position.y >= canvas.height - ball.radius) ||  (ball.position.y <=              ball.radius))
                      ball.velocity.y = -ball.velocity.y;   



              }
              ,

          }

          // Created a second ball object
          var ball2 = {
              // determines the position where the ball will apear math.random gives a random position on the x ace
              position: {x: Math.floor((Math.random() * 780) + 20), y: 10}
              // Will determine the size of the ball
              , radius: 6
              // Will determine the speed of the ball
              , velocity: {x: 3, y: 0}
              // Will determine if the ball will get faster or slower
              , acceleration: {x: 0, y: 0.1}        
              // Function that draws the ball  
              ,drawBall2: function(){                  
                  // Collour of the object         
                  ctx.fillStyle = "rgb(25, 100, 100)";  
                  // begins path
                  ctx.beginPath();
                  // calls the object it will draw with positions and size
                  ctx.arc(ball2.position.x, ball2.position.y, ball2.radius, 0, 2 * Math.PI);
                  // fills the colour 
                  ctx.fill();       


                  // Update the y location.
                  ball2.velocity.y += ball2.acceleration.y;
                  ball2.position.x += ball2.velocity.x;
                  ball2.position.y += ball2.velocity.y;
                  // Keep the animation going while the ball has not touched the canvas bottom.
                  // Note there's a bug here.
                  if ((ball2.position.x >= canvas.width - ball2.radius) ||  (ball2.position.x <= ball2.radius))
                      ball2.velocity.x = -ball2.velocity.x;    
                  if ((ball2.position.y >= canvas.height - ball2.radius) ||  (ball2.position.y <= ball2.radius))
                      ball2.velocity.y = -ball2.velocity.y;
              }
          }


          // Creates a new ball object 
          // This ball will be used for moving around the canvas
          var ballm = {
              // spawns the ball in the middle of the canvas
              position:{ x: canvas.width / 2
              , y: canvas.height / 2
              }, r: 50

          };

          // Creates a draw circle function
          function drawCircle() {
              ctx.fillStyle = "rgb(255, 0, 0)";
              ctx.beginPath();
              ctx.arc(ballm.position.x, ballm.position.y, ballm.r, 0, 2 * Math.PI);
              ctx.fill();

              collideWithBall();

          }

          function collideWithBall() {


              var dx = (ball.position.x + ball.radius) - (ballm.position.x + ballm.r);
              var dy = (ball.position.y + ball.radius) - (ballm.position.y + ballm.r);
              var distance = Math.sqrt((dx * dx) + (dy * dy));
              if (distance < ball.radius + ballm.r) {                 

                  ctx.clearRect(0, 0, canvas.width, canvas.height);    
                  ctx.fillStyle = "black";
                  ctx.font = "18px Arial";
                  ctx.fillText("Game Over ", 300, 200);
                  shutdown();

              }         
          }



          // A function to repeat every time the animation loops.
          function repeatme() {

              collideWithBall();
              // clears  the screan/canvas i.e. where the ball was previously does not show up.
              ctx.clearRect(0, 0, canvas.width, canvas.height);
              // calls the function in the ball object
              ball.drawBall();
              ball2.drawBall2();

              //calls the draw circle function
              drawCircle();

              collideWithBall();
              // gets the animation going
              window.requestAnimationFrame(repeatme);  
          }

          // Add an event listener to the keypress event.          
          window.addEventListener("keydown", function(event) {

              ctx.clearRect(0, 0, canvas.width, canvas.height);

              // Right
              if (event.keyCode == 39 && ballm.position.x < canvas.width - ballm.r)
                  ballm.position.x += Math.min(10, canvas.width - ballm.position.x - ballm.r);

              // Left
              else if (event.keyCode == 37 && ballm.position.x > ballm.r)
                  ballm.position.x -= 10;

              // down
              else if (event.keyCode == 40 && ballm.position.y < canvas.height - ballm.r)
                  ballm.position.y += 10;

              // For up movement
              else if (event.keyCode == 38 && ballm.position.y > ballm.r)
                  // updates location by int given
                  ballm.position.y -= 10;

              drawCircle();
                collideWithBall();
          });


          // Get the animation going.

          window.requestAnimationFrame(repeatme);
    </script>

  </body>

</html>

编辑:删除了额外的 collideWithBall 函数。

代码中也添加了position

编辑 2:添加了对代码的修复，现在可以正常工作了

最佳答案

我认为你的数学是错误的。你的支票

if (distance < ball.radius + ballm.r) {

是正确的，但暗示距离是从球的中心到中心测量的。因此正确的距离公式是:

var dx = ball.position.x-ballm.x;
var dy = ball.position.y-ballm.y;
var distance = Math.sqrt((dx * dx) + (dy * dy));

如果您按照 if 语句测量中心到中心的距离，则球的半径不会进入计算。

我在您的代码中看到的另一个问题是 

collideWithBall

函数被定义了两次!请尝试删除两个看似等效的实现之一。

编辑:另外，您访问的球的位置是错误的。球的位置在 position 属性中。

因此您需要使用它!有关操作方法，请参见上面编辑的代码。

然后工作:http://jsfiddle.net/gQ3hD/2/

Edit2:通过在碰撞函数中遍历两个 baals，更新了 fiddle 以正确处理第二个球。

关于javascript - 球之间的碰撞检测javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33510442/

27 4 0
文章推荐： javascript - 具有相同名称的多个 sourcemaps 抛出浏览器？ (gulp-sourcemaps)
文章推荐： javascript - mmenu:一次只展开一个子菜单(slidingSubmenus:false)
文章推荐： javascript - 网络套接字。连接到现有的
文章推荐： c# - 在 linq 中使用 let 关键字组合查询
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com