2012-04-02 10 views
0

私はbox2dwebを使って小さなhtml5ゲームを構築しています。私はmousedown + mousemoveにラインを描こうとしています。これらの行は、ドロップする四角形をキャッチし、オブジェクトは、ページのいずれかの側の穴から四角形をバウンスすることです。Box2dweb静的な線を描く

私ができることは、実線をシミュレートするためにmouseXとmouseYに沿っていくつかの四角形を描くことですが、これで十分ではないと思います。誰も私が実線や、希望の線の形に合った単一のポリゴンを描く方法を理解するのを助けることができますか?

進行中の作業は現在、マウスクリック、MouseMoveの線画を処理している方法は、これらの関数であり、ここでhttp://acoolsip.com/html5/mobile/

です。

function addClick(x, y, dragging) 
{ 
    clickX.push(x); 
    clickY.push(y); 
    clickDrag.push(dragging); 

    bodyDef.type = b2Body.b2_staticBody; 
    fixDef.shape = new b2PolygonShape; 
    fixDef.shape.SetAsBox(
     0.1 //Math.random() + 0.1 //half width 
     , 0.1 //Math.random() + 0.1 //half height 
    ); 

    //the position of the created object   
    bodyDef.position.x = x; 
    bodyDef.position.y = y;    

    //bodyDef.angle = 1; 
    world.CreateBody(bodyDef).CreateFixture(fixDef);  
} 



document.addEventListener("mousedown", function(e) { 
     isMouseDown = true; 
     mouseX = (e.clientX - canvasPosition.x)/30; 
     mouseY = (e.clientY - canvasPosition.y)/30;  
     addClick(mouseX,mouseY); 
}, false); 

document.addEventListener('mousemove', function(e) { 
    if(isMouseDown == true) 
    { 
     isMouseMoving = true; 
     e.preventDefault(); 
     mouseX = (e.clientX - canvasPosition.x)/30; 
     mouseY = (e.clientY - canvasPosition.y)/30; 
     addClick(mouseX, mouseY, true);   
    } 
}, false); 

ありがとうございました。

答えて

0

すべてのブラウザで動作する行を描画する方法はありません。 (直線の垂直線と直線の水平線を除く)

raphaelのようなグラフィックライブラリを使用することをお勧めします。

編集:ここではラファエルのウェブサイトがあります:http://raphaeljs.com/

+0

私はそう四角がオフラインバウンス描くラインにbox2dweb衝突物理学を追加する必要があります。これはグラフィクで可能ですか? – oasisfleeting

+0

box2dwebのように見えるのは物理学のみで、raphaeljsはグラフィックスだけです。あなたの仕事はそれらを一緒に接着することです。私はまだオープンソースのjavascriptゲームエンジンの方法にはまだ多くはないと思う。 – JasonWoof