コントローラー

パッド
準備
描画

パッド

マウス、タッチ操作を実現するためコントローラー用のパッドを描画します。パッドの描画は既に「マウス操作」で紹介していますので、これをベースに作成していきます。

準備

パッドは次のように別canvasで実現します。

 <div><canvas id="controller" width="640" height="80"></canvas></div>
    ・
    ・ 
    var controller = document.getElementById("controller");
    var ctx2 = controller.getContext("2d");

・

var controller = document.getElementById("controller");

var ctx2 = controller.getContext("2d");

色用の定数、パッド部品の位置定数を用意します。

    var COLOR_CONTROLLER_WAKU = "#C0C0C0"; //コントローラ外枠
    var COLOR_CONTROLLER_HOUKOU = "#000066";//コントローラ方向
    var COLOR_CONTROLLER_SHOT = "#660000";//発射ボタン
    var COLOR_CONTROLLER_GRAY = "#ff000050";//コントローラグレーゾン

    var L_S = 120;  //左三角開始位置
    var L_E = 280;  //左三角終了位置
    var R_S = 360;  //右三角開始位置
    var R_E = 520;  //右三角終了位置
    var M_S=240;    //グレーゾーン開始位置
    var M_E=400;    //グレーゾーン終了位置

var COLOR_CONTROLLER_WAKU = "#C0C0C0"; //コントローラ外枠

var COLOR_CONTROLLER_HOUKOU = "#000066";//コントローラ方向

var COLOR_CONTROLLER_SHOT = "#660000";//発射ボタン

var COLOR_CONTROLLER_GRAY = "#ff000050";//コントローラグレーゾン

var L_S = 120; //左三角開始位置

var L_E = 280; //左三角終了位置

var R_S = 360; //右三角開始位置

var R_E = 520; //右三角終了位置

var M_S=240; //グレーゾーン開始位置

var M_E=400; //グレーゾーン終了位置

位置定数は部品の描画、どの部品がクリック(タッチ)されたかの判断で利用します。

描画

パッド描画用関数drawController()を作成します。この関数はゲーム起動後に1回だけ呼び出されます。

    /*
      コントローラ描画
    */
    function drawController(){
        ctx2.strokeStyle = COLOR_CONTROLLER_WAKU; //外枠
        ctx2.lineWidth = 3;
        ctx2.strokeRect(L_S,0,R_E-L_S,controller.height);


        ctx2.beginPath();             //右三角形
        ctx2.moveTo( L_S,controller.height/2 ) ;
        ctx2.lineTo( L_E,0 )
        ctx2.lineTo( L_E,controller.height  )
        ctx2.fillStyle = COLOR_CONTROLLER_HOUKOU;
        ctx2.fill() ;
        ctx2.closePath();

        ctx2.beginPath();             //左三角形
        ctx2.moveTo( R_E,controller.height/2 ) ;
        ctx2.lineTo( R_S,0 )
        ctx2.lineTo( R_S,controller.height  )
        ctx2.fillStyle = COLOR_CONTROLLER_HOUKOU;
        ctx2.fill() ;
        ctx2.closePath();

        ctx2.beginPath();             //発射丸ボタン
        ctx2.arc(controller.width/2, controller.height/2, controller.height/2-1, 0, Math.PI*2, false);
        ctx2.fillStyle = COLOR_CONTROLLER_SHOT;
        ctx2.fill();
        ctx2.closePath();

        ctx2.fillStyle = COLOR_CONTROLLER_GRAY;//発射ボタンと方向(三角)のグレーゾーン
        ctx2.lineWidth = 1;
        ctx2.fillRect(M_S,0,M_E-M_S,controller.height);

    }

コントローラ描画

function drawController(){

ctx2.strokeStyle = COLOR_CONTROLLER_WAKU; //外枠

ctx2.lineWidth = 3;

ctx2.strokeRect(L_S,0,R_E-L_S,controller.height);

ctx2.beginPath(); //右三角形

ctx2.moveTo( L_S,controller.height/2 ) ;

ctx2.lineTo( L_E,0 )

ctx2.lineTo( L_E,controller.height )

ctx2.fillStyle = COLOR_CONTROLLER_HOUKOU;

ctx2.fill() ;

ctx2.closePath();

ctx2.beginPath(); //左三角形

ctx2.moveTo( R_E,controller.height/2 ) ;

ctx2.lineTo( R_S,0 )

ctx2.lineTo( R_S,controller.height )

ctx2.fillStyle = COLOR_CONTROLLER_HOUKOU;

ctx2.fill() ;

ctx2.closePath();

ctx2.beginPath(); //発射丸ボタン

ctx2.arc(controller.width/2, controller.height/2, controller.height/2-1, 0, Math.PI*2, false);

ctx2.fillStyle = COLOR_CONTROLLER_SHOT;

ctx2.fill();

ctx2.closePath();

ctx2.fillStyle = COLOR_CONTROLLER_GRAY;//発射ボタンと方向(三角)のグレーゾーン

ctx2.lineWidth = 1;

ctx2.fillRect(M_S,0,M_E-M_S,controller.height);

}

方向を示す青三角と発射ボタンの赤丸の間に薄い赤四角形があります。このエリアをクリック(タッチ)すると指定方向に移動しながら射撃します。