物理エンジン (p2.js) の雛型 – browser-land

物理エンジン (p2.js) の雛型

 p2.jsの雛型

今すぐにコピーして使えるp2.js の雛形を紹介します。
必要最低限+使いやすさを加味したコードにしています。

<!DOCTYPE html>
<html>
<head>
 <script src=”p2.js”></script>
 <meta charset=”utf-8″>
 <meta name=”viewport” content=”width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″>
 <style type=”text/css”>
 <!–
  html, body {
   margin: 0;
   padding: 0;
   width:100%;
   height:100%;
   overflow: hidden;
  }
 –>
 </style>
 <script>

  // 変数設定
  var world;
  world = new p2.World();
  world.gravity = [0,-9.82];
  world.sleepMode = p2.World.BODY_SLEEPING;
  
  var pBody = new Array;
  var pShape = new Array;
  var pMin = 1;
  var pMax = 100;
  var oDiv = new Array;
  var oWorld;

  // ページ読込が完了後に実行する
  window.onload = function() {

   oWorld = document.getElementById(“oWorld”);

   // 1.物理計算の設定 (地面の設定)
   pBody[0] = new p2.Body(); //1-1.bodyを生成
   pShape[0] = new p2.Plane; //1-2.円形のshapeを生成
   pBody[0].addShape(pShape[0]); //1-3.bodyにshapeを追加
   world.addBody(pBody[0]); //1-4.worldにbodyを追加

   for (var i = pMin; i <= pMax; i++){
    // 1.物理計算の設定 (円形状の設定)
    var vMin = 100;
    var vMax = 500;
    var vX = (Math.floor( Math.random() * (vMax + 1 – vMin) ) + vMin); //x
    var vY = (Math.floor( Math.random() * (vMax + 1 – vMin) ) + vMin); //y
    pBody[i] = new p2.Body({ position: [vX, vY],mass: 5,damping:0.1,angularDamping:0.1 }); //1-1.bodyを生成
    pShape[i] = new p2.Circle({ radius: 5 }); //1-2.円形のshapeを生成
    pBody[i].addShape(pShape[i]); //1-3.bodyにshapeを追加
    world.addBody(pBody[i]); //1-4.worldにbodyを追加

    //初速を与える
    pBody[i].velocity[0] = Math.random() * 10 – 5; //x
    pBody[i].velocity[1] = Math.random() * 10 – 5; //y

    // 2.描画の設定
    var vMin = 0;
    var vMax = 255;
    var rgb1 = (Math.floor( Math.random() * (vMax + 1 – vMin) ) + vMin)
    var rgb2 = (Math.floor( Math.random() * (vMax + 1 – vMin) ) + vMin)
    var rgb3 = (Math.floor( Math.random() * (vMax + 1 – vMin) ) + vMin)
    oDiv[i] = document.createElement(‘div’);
    oWorld.appendChild(oDiv[i]);
    oDiv[i].style.position = “absolute”;
    oDiv[i].style.width = 10 + “px”;
    oDiv[i].style.height = 10 + “px”;
    oDiv[i].style.background = “rgb(“+rgb1+”,”+rgb2+”,”+rgb3+”)”;
    oDiv[i].style.borderRadius = “50%”;
   }

   // 3.ループ処理で物理計算を行う
   requestAnimationFrame(fAnimate);

   // 4.ループ処理が終わり、次のステップが始まる前に行う処理
   world.on(“postStep”,function(evt){
    for (var i = pMin; i <= pMax; i++){
     //スリープモード (動きが止まった状態) になったら移動させる
     if (pBody[i].sleepState == 1){
      var vMin = 100;
      var vMax = 500;
      var vX = (Math.floor( Math.random() * (vMax + 1 – vMin) ) + vMin); //x
      var vY = (Math.floor( Math.random() * (vMax + 1 – vMin) ) + vMin); //y
      pBody[i].position[0] = vX;
      pBody[i].position[1] = vY;
       
      //初速を与える
      pBody[i].velocity[0] = Math.random() * 10 – 5; //x
      pBody[i].velocity[1] = Math.random() * 10 – 5; //y
     }
    }
   });
  }

  // 3.ループ処理で物理計算を行う
  var fixedTimeStep = 1 / 60;
  //関数呼び出しごとにとるべき固定ステップの最大数 = requestAnimationFrameが1回実行につきpostStepが10回実行される
  var maxSubSteps = 10;
  var lastTimeSeconds;
  var pPlayTime = 0;
  function fAnimate(t){
   requestAnimationFrame(fAnimate);

   // 3-1.FPSを計測する
   var v1 = document.getElementById(‘dFps’);
   var v2 = 30;
   fFps_Count(v1,v2);
   fixedTimeStep = 1 / pFps; //小数点第2位まで表示
   document.getElementById(“oFps”).innerHTML = “FPS : ” + pFps;

   // 3-2.物理計算する
   if (pFps != 0){
    timeSeconds = t / 1000;
    lastTimeSeconds = lastTimeSeconds || timeSeconds;
    deltaTime = timeSeconds – lastTimeSeconds;
    world.step(fixedTimeStep, deltaTime, maxSubSteps);
   }

   // 3-3.描画する
   for (var i = pMin; i <= pMax; i++){
    oDiv[i].style.transform = “translate3d(“+(pBody[i].position[0])+”px,”+(pBody[i].position[1])+”px,0px) rotateX(180deg)”;
   }
  }

  // 3-1.FPSを計測する
  var pTimeStart,pTimeEnd;
  var pFps = pTimeCnt = 0
  function fFps_Count(vObj,vMax){
   pTimeCnt ++;
   if(pTimeCnt == 1){
    pTimeStart = new Date().getTime();
   }
   if(pTimeCnt == vMax){
    pTimeEnd = new Date().getTime();
    pFps = Math.round(pTimeCnt / (pTimeEnd – pTimeStart) * 1000 * 100) / 100; //fpsを変数に代入する
    pTimeCnt = 0;
   }
  }
  
 </script>
</head>
<body>
 <div id=’oFps’></div>
 <div id=’oWorld’ style=’width:100%;height:500px;background:rgb(218,212,187);transform:rotateX(180deg);’></div>
</body>
</html>

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード