AirVergo

Web製作にまつわる雑記帳です。たまに更新してます。

Javascript+jQueryでブロック崩しを作ってみました+反射角度の計算

2014/6/21

Javascript + jQueryで、ブロック崩し作ってみました。

Chrome, Firefox, Safariで遊べます。

http://airvergo.midalort.com/block/

 

ロジック部分でボールのバウンド時の処理だけ紹介します。

ボールの元座標をpre_x, pre_y、ボールのバウンド時の座標をball_x, ball_yとします。

かなり簡易的な処理にしたのですが、

まず、差分をとります。idはボールのidです。

var dx = ball_x – pre_x[id];

var dy = ball_y – pre_y[id];

次に反射角を計算します。

var radian

if(direct === ‘y’){

radian = Math.atan2(dy * -1, dx);

}else if(direct === ‘x’){

radian = Math.atan2(dy, dx * -1)

}

次にボールの元座標を更新

pre_x[id] = ball_x;

pre_y[id] = ball_y;

 

ボールの反射先座標を計算

var next_x = max_vector * Math.cos(radian);

var next_y = max_vector * Math.sin(radian);

var target_x = pre_x[id] + next_x;

var target_y = pre_y[id] + next_y;

 

次に反射先の座標までの距離を計算し、アニメーション時間を決定します。

var duration = calculate_distance(pre_x[id], pre_y[id], target_x, target_y) * 3;

 

最後にボールにアニメーションをセットします。

 $(‘#’ + id).animate({

left: (target_x – 6.5) + ‘px’,

top: (target_y – 6.5) + ‘px’

}, duration, “linear”, function(){

 });

facebooktwittergoogle_plusredditpinterestlinkedinmail