0

衝突テストを手伝ってくれませんか。

フラッシュでは、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を参照Entityし、引数も参照します。

于 2013-03-26T13:19:43.757 に答える
0

私が過去に使用した手法は、バックグラウンドバッファーを作成し、各オブジェクトにIDを与えることです。次に、そのオブジェクトが描画されたら、バックグラウンドバッファにも描画して、各ピクセルにそのIDの色を付けます。背景バッファに描画しているときに、黒（0）以外のピクセルに描画されているピクセルがあるかどうかを確認します。これは衝突であり、衝突したオブジェクトはバッファ上のそのピクセルの色です。

于 2013-03-25T19:42:47.817 に答える
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 に答える