HTML5 の Canvas 上でボールをコロコロ

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

HTML5 の Canvas 上でボールがコロコロするプログラムを作ってみました.

主な処理としては, 円と円の衝突判定, ボール同士が衝突したさいのベクトル反射, めり込みを押し出す処理, などです.

DATA

デモはこちらで見られます

コードが全て入ったデータはこちらからダウンロードできます.

CODE

一部の処理を抜粋して紹介. それっぽく見えるだけで細かい物理計算は端折ってるのでその辺ご注意を.

円と円の衝突判定

/**
 * ボール同士の衝突判定
 */
Ball.collision = function(ball0, ball1)
{
    // ball1 から ball0 へのベクトル
    var v = Vector3.sub(ball0.pos, ball1.pos);
    // ボールの実際の距離の二乗
    var len = (ball0.radius+ball1.radius) * (ball0.radius+ball1.radius);
    
    // 衝突判定
    if (v.lengthSquare() < len) {
        return true;
    }
    
    return false;
};
    

ボール同士が衝突したさいのベクトル反射

/**
 * 反射処理
 * @param   v       現在のベクトル
 * @param   normal  反射対象となる壁の法線ベクトル
 */
Vector3.reflect = function(v, normal)
{
    var len = Vector3.dot(v, normal);
    var temp = Vector3.mul(normal, 2*len);
    
    return Vector3.sub(v, temp);
};
    

めり込みを押し出す処理

        // 押し出す
        var temp = Vector3.mul(ndp, this.radius + other.radius);
        temp.add(other.pos);
        this.pos = temp;
    

近々 iPhone でコロコロできるように修正する予定です.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT