0

你能帮我做碰撞测试吗？

在 Flash 中，我会使用 Hittest，这需要 2 分钟，但我看到 HTML5 有点不同。

下面是我的代码。我可以轻松地让球在红色块内反弹，但我希望中间有一个灰色块，球也会反弹，并且 if 语句变得混乱且不起作用。有没有更简单的方法来做到这一点，请你帮帮我。谢谢

<html>
<head>
</head>

<script>
    var context;
    var x=50;
    var y=100;
    var speedX=-2;
    var speedY=-2;
    var counter=0;
    var ballCoordinates ='';

    function init()
    {
      var c = document.getElementById('myCanvas');
      context= c.getContext('2d');
      setInterval(draw,10);
    }

    function draw()
    {
          context.clearRect(0,0, 300,400);

          //draw number
          context.fillStyle = '#fff';
          context.font="160px Arial";
          context.fillText(counter,10,150);

          context.fillStyle = '#fff';
          context.font="20px Arial";
          context.fillText(ballCoordinates,10,400);

          //draw ball
          context.beginPath();
          context.fillStyle="#0000ff";
          context.arc(x,y,20,0,Math.PI*2,true);
          context.closePath();
          context.fill();

          //draw block
          context.fillStyle = '#333';
          context.fillRect(100,200,100,100);



          // Boundary Logic
            //if( x<0 || x>300) dx=-dx;
            //if( y<0 || y>300) dy=-dy;


            if(x>280){
            speedX=speedX * -1;
            }else if(y<20){
            speedY=speedY * -1;
            }else if(x<20){
            speedX=speedX * -1;
            }else if(y>380){
            speedY=speedY * -1;
            }else if( x>80 && y >180 && y <320) {
                speedY=speedY * -1;
            }else if( x<220 && y >180 && y <320) {
                speedY=speedY * -1;
            }else if( y>180 &&  x>80 && x<220) {
                speedX=speedX * -1;
            }else if( y<180 &&  x>80 && x<220) {
                speedX=speedX * -1;
            }

            x+=speedX;
            y+=speedY;

            ballCoordinates = x + 'x   ' + y + 'y ' + speedX + 'speedx    ' + speedY + 'speedy';
    }

</script>
<body onLoad="init();">
  <canvas id="myCanvas" width="300" height="400" style="background:red" >
  </canvas>
</body>

</html>
4

3 回答 3

1

在我的葡萄柚游戏引擎中，我使用有界框系统来检测碰撞。我在gamedev.stackexchange.com上找到了一个很好的问题，它帮助了我，这就是我想出的：

intersects: function(entity) {
    return (Math.abs(this._hitboxMesh.position.x - entity._hitboxMesh.position.x) * 2 < (this.hitSize.x + entity.hitSize.x)) &&
            (Math.abs(this._hitboxMesh.position.y - entity._hitboxMesh.position.y) * 2 < (this.hitSize.y + entity.hitSize.y));
}

基本上，游戏循环将对实体运行此检查，以查看它们是否相交或碰撞。这是Entity对象上的方法，因此this引用 an Entity，参数也是如此。

于 2013-03-26T13:19:43.757 回答
0

http://www.html5rocks.com/en/tutorials/canvas/notearsgame/#toc-introduction

function collides(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}
于 2013-03-26T09:50:23.667 回答
0

我过去使用的一种技术是创建一个背景缓冲区并为每个对象分配一个 ID。然后，当绘制该对象时，还将其绘制在背景缓冲区中，使每个像素颜色为该 id。在背景缓冲区上绘图时，检查是否在非黑色 (0) 的像素上绘制了任何像素，那么这是一个碰撞，您碰撞的对象是缓冲区上该像素的颜色。

于 2013-03-25T19:42:47.817 回答