1

デフォルトでは、HTML 5 キャンバスは長方形ですが、キャンバスの下でアニメーションを実行すると、長方形の領域に移動します。

領域を放射状にバインドするとどうなりますか?放射状から外れるはずがありません。

境界をデフォルトの長方形ではなく放射状に制限できますか?

ボールが放射状の境界から出ているのを見ることができます- http://jsfiddle.net/stackmanoz/T4WYH/

境界を放射状に設計したので、放射状の領域も制限したいと思います。

ボールの制限エリア

function bounce() {
    if (x + dx > 293 || x + dx < 0) {
        dx = -dx;
    }
    if (y >= 290) {
        y = 290;
    }
    if (y + dy > 290 || y + dy < 0) {
        dx *= 0.99;
        dy = -dy;
    }
    if (Math.abs(dx) < 0.01) {
        dx = 0;
    }
    dy++;
}
4

3 に答える 3

1

円のデカルト公式は (x − a) 2 + (y − b) 2 = r 2

したがって、バウンス状態でこれを確認してください。

function bounce() {
    if( Math.pow(x - 150, 2) + Math.pow(y - 150, 2) > Math.pow(150, 2))
    {
        dx = -dx * (0.6 + (Math.random() * 0.8));
        dy = -dy * (0.6 + (Math.random() * 0.8));
    }
}

入射速度とバウンス ポイントでの法線を使用して正しいバウンス角度を計算できなかったため、ランダム バウンスを使用しています (できる人がここにいると確信しています)。

ここでフィドルを更新しました：http://jsfiddle.net/T4WYH/1/

于 2013-02-08T11:36:30.417 に答える
0

この特定のタスクを実装したくありませんが、このサイトからサークルからバウンスする方法のアイデアを得ることができます：bbdizains.com

そして対応する機能：

move = function(){
 for (i=1; i<=3; i++) {
  A.x[i] = A.x[i] - A.v[i]*Math.sin(A.alfa[i]);
  A.y[i] = A.y[i] - A.v[i]*Math.cos(A.alfa[i]);
  x = A.x[i]-175;
  y = A.y[i]-233;
  x2 = x*x;
  y2 = y*y;
  if (x2+y2>=6561) {
    if (A.flag[i]==1) {
      gamma = Math.atan(y/x);    
      A.alfa[i] =  - 2*gamma - A.alfa[i];
      A.flag[i] = 0;
    }
  } else {
    A.flag[i] = 1;
  }                                                                   
  $('#r'+i).css('left',A.x[i]+'px');
  $('#r'+i).css('top',A.y[i]+'px'); 
  if ((Math.random()>0.95) && (x2+y2<6000)) {
    A.alfa[i] = A.alfa[i] + Math.PI*Math.random()*0.1;      
  }  
 }
}
于 2013-02-08T12:02:42.247 に答える
0

いくつかのポイント、setInterval ではなく requestAnimationFrame を使用

境界線としてではなく、キャンバスに大きな円を描画します。次に、isPointInPath(x, y)を使用して、ボールが円内にあるかどうかを確認できます (または、その他の任意のパス)

function draw() {
    ctx.clearRect(0, 0, 300, 300);
    ctx.beginPath()
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.arc(150, 150, 150, 0, 2 * Math.PI, true);
    ctx.stroke();
    ctx.closePath();
    console.log(ctx.isPointInPath(x, y)); //Is (center) of ball in big circle
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
    x += dx;
    y += dy;
    bounce();
}
于 2013-02-08T11:57:19.657 に答える