ひろひろの生活日記(LIFE Of HIROHIRO)

パソコン講習とソフト開発をしています。自作小説も掲載しています。ネット情報発信基地(上野博隆)Hirotaka Ueno

ロボットの描画(コーディング)

2021年12月13日 13時04分18秒 | ゲーム開発(Game development)

 

 

・(上)

・(下)コーディングから修正しました。

・上の描画のコーデイングです。

function dungeondraw(){
    ctx.drawImage(imgRobot,ofsx,ofsy);

    ctx.drawImage(imgFace,33,0);

        movedraw();

        ctx.beginPath();
        ctx.fillStyle = bordcolor[2];
        ctx.arc(20,38,8,0,Math.PI*2,false);
//      中心座標を指定(腕関節・右)
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = bordcolor[2];
        ctx.arc(70,38,8,0,Math.PI*2,false);
//      中心座標を指定(腕関節・左)
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = bordcolor[2];
        ctx.arc(33,96,9,0,Math.PI*2,false);
//      中心座標を指定(足関節・右)
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = bordcolor[2];
        ctx.arc(57,96,9,0,Math.PI*2,false);
//      中心座標を指定(足関節・左)
        ctx.fill();

        wkcolor = 1;
        ctx.beginPath();
        ctx.moveTo(20,30);
        ctx.lineTo(70,30);
        ctx.lineTo(70,50);
        ctx.lineTo(60,60);
        ctx.lineTo(30,60);
        ctx.lineTo(20,50);
//全て座標を指定(胸)

        ctx.closePath();
        ctx.fillStyle = bordcolor[wkcolor];
        ctx.fill();

        wkcolor = 2;
        ctx.beginPath();
        ctx.moveTo(30,60);
        ctx.lineTo(60,60);
        ctx.lineTo(60,80);
        ctx.lineTo(30,80);
//全て座標を指定(胴)

        ctx.closePath();
        ctx.fillStyle = bordcolor[wkcolor];
        ctx.fill();

        wkcolor = 1;
        ctx.beginPath();
        ctx.moveTo(25,80);
        ctx.lineTo(65,80);
        ctx.lineTo(65,90);
        ctx.lineTo(50,105);
        ctx.lineTo(40,105);
        ctx.lineTo(25,90);
//全て座標を指定(腰)

        ctx.closePath();
        ctx.fillStyle = bordcolor[wkcolor];
        ctx.fill();


}
function movedraw(){

        wkcolor = 1;
        ctx.beginPath();
        ctx.lineWidth = 7;
        ctx.moveTo(16,37);
        ctx.lineTo(16,75);
//全て座標を指定(腕上・右)

        ctx.strokeStyle = bordcolor[wkcolor];
        ctx.stroke();

        wkcolor = 3;
        ctx.beginPath();
        ctx.lineWidth = 7;
        ctx.moveTo(16,75);
        ctx.lineTo(16,110);
//全て座標を指定(腕下・右)

        ctx.strokeStyle = bordcolor[wkcolor];
        ctx.stroke();


        wkcolor = 1;
        ctx.beginPath();
        ctx.lineWidth = 7;
        ctx.moveTo(74,37);
        ctx.lineTo(74,75);
//全て座標を指定(腕上・左)

        ctx.strokeStyle = bordcolor[wkcolor];
        ctx.stroke();

        wkcolor = 3;
        ctx.beginPath();
        ctx.lineWidth = 7;
        ctx.moveTo(74,75);
        ctx.lineTo(74,110);
//全て座標を指定(腕下・左)

        ctx.strokeStyle = bordcolor[wkcolor];
        ctx.stroke();

        wkcolor = 1;
        ctx.beginPath();
        ctx.lineWidth = 13;
        ctx.moveTo(30,98);
        ctx.lineTo(30,135);
//全て座標を指定(足上・右)

        ctx.strokeStyle = bordcolor[wkcolor];
        ctx.stroke();

        wkcolor = 3;
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.moveTo(30,135);
        ctx.lineTo(30,180);
//全て座標を指定(足下・右)

        ctx.strokeStyle = bordcolor[wkcolor];
        ctx.stroke();

 

        wkcolor = 1;
        ctx.beginPath();
        ctx.lineWidth = 13;
        ctx.moveTo(60,98);
        ctx.lineTo(60,135);
//全て座標を指定(足上・左)

        ctx.strokeStyle = bordcolor[wkcolor];
        ctx.stroke();

        wkcolor = 3;
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.moveTo(60,135);
        ctx.lineTo(60,180);
//全て座標を指定(足下・左)

        ctx.strokeStyle = bordcolor[wkcolor];
        ctx.stroke();

 

}

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

ロボットの関節

2021年12月13日 11時10分07秒 | ゲーム開発(Game development)

 

        ctx.beginPath();
        ctx.fillStyle = bordcolor[2];
        ctx.arc(20,40,10,0,Math.PI*2,false);
//      中心座標を指定
        ctx.fill();

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

ロボットの座標表示

2021年12月13日 10時40分16秒 | ゲーム開発(Game development)

 

var canvas;
imgRobot = new Image();
imgRobot.src = "Robot101.png";
imgFace = new Image();
imgFace.src = "Face101.png";

var bordcolor = ["white", "silver", "gray"];

 

 

function dungeondraw(){
    ctx.drawImage(imgRobot,ofsx,ofsy);

    ctx.drawImage(imgFace,33,0);
        wkcolor = 1;
        ctx.beginPath();
        ctx.moveTo(20,30);
        ctx.lineTo(70,30);
        ctx.lineTo(70,50);
        ctx.lineTo(60,60);
        ctx.lineTo(30,60);
        ctx.lineTo(20,50);
//全て座標を指定 

        ctx.closePath();
        ctx.fillStyle = bordcolor[wkcolor]
        ctx.fill();


}

 

ロボットを座標で顔(pngイメージ)と胸は多角形で表示しました。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする