ログギャリの手首の座標と、肘の座標を計算するロジック。

↓リンク（実際の動きを見れます）

http://hirohirosystem.com/1002robot/wRobotV501.html

ix,iyが手首の座標。ix2,iy2が肘の座標。(マウスで動かす）

function zahyokeisan(){
    for(i = 0; i        if(kindsl===jointbl[i].kinds.substr(1,1)){
            if(jointbl[i].kinds.substr(2,1)==="1"){
                x0 = jointbl[i].realadx;
                y0 = jointbl[i].realady;
            }
            if(jointbl[i].kinds.substr(2,1)==="2"){
                al = jointbl[i].flength;
            }
            if(jointbl[i].kinds.substr(2,1)==="3"){
                bl = jointbl[i].flength;
            }
        }
    }

   if(ix >= x0){ xflg = 3;}else { xflg = 1;}
    if(iy >= y0){ yflg = 3;}else { yflg = 1;}
    lx = Math.abs(ix - x0);
    ly = Math.abs(iy - y0);
    l = Math.sqrt(Math.pow(lx,2) + Math.pow(ly,2));
    //移動マウスの長さを調整する。
    if(l>(al+bl)){
        //lx,lyを算出する。
        //マウスポイントから角度を求める
        l = al + bl;
        la = Math.ceil(l*al/(al+bl));
        if(Math.abs(lx)<Math.abs(ly)){
            r3 = Math.atan(Math.abs(lx)/Math.abs(ly));
            lx = Math.ceil(l*Math.sin(r3));
            ly = Math.ceil(l*Math.cos(r3));
            lax = al*Math.sin(r3);
            lay = al*Math.cos(r3);
        }else{
            r3 = Math.atan(Math.abs(ly)/Math.abs(lx));
            ly = Math.ceil(l*Math.sin(r3));
            lx = Math.ceil(l*Math.cos(r3));
            lay = al*Math.sin(r3);
            lax = al*Math.cos(r3);
        }
         if(xflg===3){
            ix = x0 + lx;
        }else{
            ix = x0 - lx;
        }
        if(yflg===3){
            iy = y0 + ly;
        }else{
            iy = y0 - ly;
        }
        if(xflg===3){
            ix2 = x0 + lax;
        }else{
            ix2 = x0 - lax;
        }
        if(yflg===3){
            iy2 = y0 + lay;
        }else{
            iy2 = y0 - lay;
        }
    }else{
        la = Math.ceil(l*al/(al+bl));
        lb = Math.ceil(l*bl/(al+bl));
        r1 = Math.acos(la/al);
        r2 = Math.atan(ly/lx);
        ra = 90*Math.PI/180 - r1 - r2;
        if(xflg ===3){
            ix2 = Math.ceil(x0 + al*Math.sin(ra));
        }else{
            ix2 = Math.ceil(x0 - al*Math.sin(ra));
        }
        if(yflg ===3){
            iy2 = Math.ceil(y0 + al*Math.cos(ra));
        }else{
            iy2 = Math.ceil(y0 - al*Math.cos(ra));
        }
    }
}

ログギャリの手足を動くようにしました。

まだ、動きが可笑しいですが動きます。

手、足首ををクリックしてください。（クリックしたら離す）

マウスを移動させると手足が動きます。

手足の最大以内は、思ったように動きます。

もう一度、クリックすると止まります。

タッチでもできます。タッチは、タッチしたまま動かしてください。

もう一度、離してからタッチすると止まります。

たぶん。

http://hirohirosystem.com/1002robot/wRobotV501.html

 

ゲームのアドレスの考え方。

１画面は、縦に画像のアドレスで分割され１シーンのアドレス数のテーブルが基本になる。

動画は、シーン数によって長さが決まり、

アドレス数×シーン数により動画フィルムのテーブル数が決まる。

１画面に１２０アドレス縦　シーン数５０とすると

１２０×５０＝６０００　が動画サイズに成る。

 

 

やっぱり、キャラクタ名は、ログギャリにする。

http://hirohirosystem.com/1002robot/wRobotV40202.html

ロボットの名前をロボギャルにしようかな。

http://hirohirosystem.com/1002robot/wRobotV40202.html

角度をいれて、描画をクリック。

自分らしいやり方。

自分らしくやろう。

背景はとりあえず、プログラミング。

 

ゲーム開発格言００１

個性が人のつながり。

偶然の中の必然。

ロボットの手足を動かすために追加したロジックです。

 

ロボットの描画です。
各角度を入力した後、『描画』をクリックしてください。ロボットの手足が動きます。
まず、↓のURLをクリックしてください。

ロボット描画

 

var infangle = ["△", "30", "0", "△", "0", "0", "△", "30", "0", "△", "0", "0"];
var inix = 0;
var inerrsw = 0;
var displayarea = "";

function join_calculate2(){
    infangle[1] = document.myFORM.uder1.value;
    infangle[2] = document.myFORM.uder2.value;

    infangle[4] = document.myFORM.asir1.value;
    infangle[5] = document.myFORM.asir2.value;

    infangle[7] = document.myFORM.udel1.value;
    infangle[8] = document.myFORM.udel2.value;

    infangle[10] = document.myFORM.asil1.value;
    infangle[11] = document.myFORM.asil2.value;

    inerrsw = 0;
    for(inix = 0; inix<12 ;inix++){
        num_check();
    }

//    element = document.getElementById("idresult");
//    displayarea = displayarea + " err=" + inerrsw;
//    element.innerHTML = displayarea;

    if(inerrsw === 0) {
        for(inix = 0; inix<12 ;inix++){
           join_rcalculation();

        }
        robotdraw();
    }

    document.myFORM.uder1.value = infangle[1];
    document.myFORM.uder2.value = infangle[2];

    document.myFORM.asir1.value = infangle[4];
    document.myFORM.asir2.value = infangle[5];

    document.myFORM.udel1.value = infangle[7];
    document.myFORM.udel2.value = infangle[8];

    document.myFORM.asil1.value = infangle[10];
    document.myFORM.asil2.value = infangle[11];

}

function num_check(){

    if(isNaN(infangle[inix]) === false){
        if((parseInt(infangle[inix]) >= 0) && (parseInt(infangle[inix]) < 360)) {
    
            jointbl[inix].fangle = parseInt(infangle[inix]);
        } else{
            infangle[inix] = "0";
            inerrsw = 1;
        }
    } else{
        if(infangle[inix] !== "△"){
            infangle[inix] = "0";
            inerrsw = 1;
        }
    }
}

function join_rcalculation(){

// 前の接合点からの描画角度
    if(infangle[inix] !== "△") {

        dr = jointbl[inix].fangle;
//  左側の接合点の場合、角度を３６０度回転させる。
        if((jointbl[inix].kinds.substr(1,1) === "2") || (jointbl[inix].kinds.substr(1,1) === "4")){
          dr = 360 - dr;
          if(dr >= 360) dr = dr - 360;
        }
        sx = 0; sy = 0;
        //中点ｘの値の頭が”Ｓ”であると前にある種別が同一の座標を参照して計算する。
        //リアル座標ｘの算出
        //一つ前のテーブルの種別が中点ｘの値と同じならリアル座標ｘをｓｘに入れる。
        //以外は０を編集する。
    
        if(jointbl[inix-1].kinds === jointbl[inix].midpointx){
            sx = jointbl[inix-1].realadx;
        } else {
            sx = 0;
        }
            //cos（コサイン）でｘ座標を求める。（前の角度＋９０）ラジアンに直す（パイ／１８０を乗算する）
        if(dr === 0){
            jointbl[inix].realadx = sx;
        } else {
            jointbl[inix].realadx = parseInt(jointbl[inix].flength*Math.cos((dr+90)*Math.PI/180))+sx;
        }
//        element = document.getElementById("idresult");
//        displayarea = displayarea  + " rx=" + jointbl[inix].realadx;
//        element.innerHTML = displayarea;
        
        //中点ｙの値の頭が”Ｓ”であると前にある種別が同一の座標を参照して計算する。
        //リアル座標ｙの算出
        //一つ前のテーブルの種別が中点ｙの値と同じならリアル座標ｙをｓｙに入れる。
        //以外は０を編集する。
        if(jointbl[inix-1].kinds === jointbl[inix].midpointy){
            sy = jointbl[inix-1].realady;
        } else {
            sy = 0;
        }
        if(dr === 0){
            jointbl[inix].realady = jointbl[inix].flength + sy;
        } else  {
            //sin（サイン）でｙ座標を求める。（前の角度＋９０）ラジアンに直す（パイ／１８０を乗算する）
            jointbl[inix].realady = parseInt(jointbl[inix].flength*Math.sin((dr+90)*Math.PI/180))+sy;
        }
    }
}

マルチ操作理論。

マウスで動くのは1か所。

４か所を同時に動かす理論を考えてみます。

AIなのでしょうか？

武道の型？

メインの処理

function mmain(){

    tmr += 1;
    di = 0;
    ud = 0;

    for(i=0; i
        board_x[i] = 0;
        board_ud[i] = 0;
    }
    for(i=0; i
        di += curve[parseInt(car_y[0]+i)%CMAX];
        ud += updown[parseInt(car_y[0]+i)%CMAX];
        board_x[i] = 400 -BOARD_W[i]*car_x[0]/800 + di/2;
        board_ud[i] = ud/30;
    }
    element = document.getElementById("idselect");
    sec_time = element.value; 

    horizon = 400 + parseInt(ud/3);
    sy = horizon;

    vertical = vertical - parseInt(car_spd[0]*di/8000);
    if(vertical < 0) vertical += 800;
    if(vertical >= 800) vertical -= 800;

     ctx.fillStyle = "rgb(0, 56, 255)";
     ctx.fillRect(0, 0, WIDTH, HEIGHT);

    ctx.drawImage(img_bg, vertical-800, horizon-400);
    ctx.drawImage(img_bg, vertical, horizon-400);

    ctx.drawImage(img_sea, board_x[BOARD-1]-780, sy);
    
    msg_draw();
    msg_time(s);

//    var start = new Date();

    //（描画処理）
    
    for (i=BOARD-1; i >0; i--){
        ux = board_x[i];
        uy = sy - BOARD_UD[i]*board_ud[i];
        uw = BOARD_W[i];
        sy = sy + BOARD_H[i]*(600-horizon)/200;
        bx = board_x[i-1];
        by = sy - BOARD_UD[i-1]*board_ud[i-1];
        bw = BOARD_W[i-1];
        wkcolor = "rgb( 160, 160, 160)";
        if(parseInt(car_y[0]+i)%CMAX === PLCAR_Y + 10){
           wkcolor = "rgb(192, 0, 0)";
        }
        ctx.beginPath();
        ctx.moveTo(ux,uy);
        ctx.lineTo(ux+uw,uy);
        ctx.lineTo(bx+bw,by);
        ctx.lineTo(bx,by);
//全て座標を指定 

        ctx.closePath();
        ctx.fillStyle = wkcolor;
        ctx.fill();

        if(parseInt(car_y[0] +i)%10 <= 4){
           ctx.beginPath();
           ctx.moveTo(ux,uy);
           ctx.lineTo(ux+uw*0.02,uy);
           ctx.lineTo(bx+bw*0.02,by);
           ctx.lineTo(bx,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = YELLOW;
           ctx.fill();
        
           ctx.beginPath();
           ctx.moveTo(ux+uw*0.98,uy);
           ctx.lineTo(ux+uw,uy);
           ctx.lineTo(bx+bw,by);
           ctx.lineTo(bx+bw*0.98,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = YELLOW;
           ctx.fill();
        }
        if(parseInt(car_y[0] +i)%20 <= 10){
           ctx.beginPath();
           ctx.moveTo(ux+uw*0.24,uy);
           ctx.lineTo(ux+uw*0.26,uy);
           ctx.lineTo(bx+bw*0.26,by);
           ctx.lineTo(bx+bw*0.24,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = WHITE;
           ctx.fill();

           ctx.beginPath();
           ctx.moveTo(ux+uw*0.49,uy);
           ctx.lineTo(ux+uw*0.51,uy);
           ctx.lineTo(bx+bw*0.51,by);
           ctx.lineTo(bx+bw*0.49,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = WHITE;
           ctx.fill();

           ctx.beginPath();
           ctx.moveTo(ux+uw*0.74,uy);
           ctx.lineTo(ux+uw*0.76,uy);
           ctx.lineTo(bx+bw*0.76,by);
           ctx.lineTo(bx+bw*0.74,by);
//全て座標を指定 
           ctx.closePath();
           ctx.fillStyle = WHITE;
           ctx.fill();

        }
        scale = 1.5*BOARD_W[i]/BOARD_W[0];
        obj_l = object_left[parseInt(car_y[0]+i)%CMAX];
        if(obj_l === 2) {
           draw_obj(img_obj[obj_l], ux-uw*0.05, uy, scale);
        }
        if(obj_l === 3) {
           draw_obj(img_obj[obj_l], ux-uw*0.5, uy, scale);
        }
        if(obj_l === 9) {
           ctx.drawImage(img_sea, ux-uw*0.5-780, uy);
        }

        obj_r = object_right[parseInt(car_y[0]+i)%CMAX];
        if(obj_r === 1) {
           draw_obj(img_obj[obj_r], ux+uw*1.3, uy, scale);
        }
        for(c=1; c
            if(parseInt(car_y[c])%CMAX === parseInt(car_y[0]+i)%CMAX){
               lr = parseInt(4*(car_x[0]-car_x[c])/800);
               if(lr < -3) lr = -3;
               if(lr >  3) lr =  3;
               draw_obj(img_car[(c%3)*7+3+lr], ux+car_x[c]*BOARD_W[i]/800, uy, 0.05+BOARD_W[i]/BOARD_W[0]);
            }
        }

        if(i === PLCAR_Y){
           draw_shadow(ux+car_x[0]*BOARD_W[i]/800, uy, 200*BOARD_W[i]/BOARD_W[0]);
//           if(sw_ren === 1){
//              if(cnt_draw
//                  draw_obj(img_sv , svx, svy, 1);
//                  cnt_draw += 1;
//               } else {
//                  cnt_draw = 0;
//                  sw_ren = 0;
//               }
//           }

           draw_obj(img_car[3+car_lr[0]+mycar*7], ux+car_x[0]*BOARD_W[i]/800, uy, 0.05+BOARD_W[i]/BOARD_W[0]);
           sv_carx = ux+car_x[0]*BOARD_W[i]/800;
           sv_cary = uy;
           if(sw_ren === 1){
              if(cnt_draw
                  draw_obj(img_sv , sv_carx, sv_cary, 2);
                  cnt_draw += 1;
               } else {
                  cnt_draw = 0;
                  sw_ren = 0;
               }
           }

        }

    }
    wtext = "" + parseInt(car_spd[0]) + "km/h";
    draw_text(wtext, 630, 40, "red", fnt_m, moj_m);
    draw_text("lap " + laps + "/" + LAPS, 100, 40, WHITE, fnt_m, moj_m);
    draw_text("time " + time_str(rec), 100, 80, GREEN, fnt_s, moj_s);
    for(i = 0; i
        draw_text(laptime[i], 80, 130+40*i, YELLOW, fnt_s, moj_s);
    } 
//   drive_car(keyw, keyw2);

//    keyw = 0;
//    keyw2 = 0;
//    element = document.getElementById("idresult2");
//    element.innerHTML = " tmr=" + tmr + " idx=" + idx;

        if(idx === 0){
           ctx.drawImage(img_title, 120, 120);
           draw_text("[A] Start game",300, 320, WHITE, fnt_m, moj_m);
           draw_text("[S] Select your car",300, 400, WHITE, fnt_m, moj_m);
           move_car(0)
           if(keyw2 != 0){
               init_car()
               idx = 1;
               tmr = 0;
               laps = 0;
               rec = 0;
               recbk = 0;
               for(i=0; i
                 laptime[i] = "0'00.00";
               }
           }
           if(keyw3 === 1){
             idx = 4;
             keyw3 = 0;
           }
        }
        if(idx === 1){
           n = 3 - parseInt(tmr/60);
           draw_text("" + n,400, 240, YELLOW, fnt_l, moj_l);
           if(tmr >= 179){
              idx = 2;
              tmr = 0;
           }
        }
        if(idx === 2){
           if(tmr
              draw_text("Go!", 400, 240, RAD, fnt_l, moj_l);
              if(wstartsw === 0){
                var wstart = new Date();
                wstarts  = wstart.getTime();
                wstartsw = 1;
              }
           }
           rec = rec + 1/60;
           drive_car(keyw, keyw2);
           move_car(1);
        }
        if(idx === 3){
           if(tmr === 1){
              z = 1;
           }
           if(tmr === 30){
              z = 1;
           }
           draw_text("GOAL!", 400, 240, RAD, fnt_l, moj_l);
           car_spd[0] =  car_spd[0]*0.96;
           car_y[0] = car_y[0] + car_spd[0]/100;
           if(wstartsw === 1){
               var wend = new Date();
               wstarte = wend.getTime();
               wstartsw = 0;
           }
           ms = wstarte - wstarts;
           s = ms / 1000;
           msg_time(s);

           move_car(1);
           if(tmr > 60*8){
              idx = 0;
           }
           
        }
        if(idx === 4){
           move_car(0);
           draw_text("Select your car", 400, 160, WHITE, fnt_m, moj_m);
           
           for(i=0; i
               x = 160+240*i;
               y = 300;
               col = BLACK;
               if(i+wn === mycar){
                   col = "rgb(0, 128, 255)";
               }
               ctx.fillStyle = col;
               ctx.fillRect(x-100, y-80, 200, 160);
               draw_text("[" + (i+1) + "]", x-40, y-50, WHITE, fnt_m, moj_m);
               ctx.drawImage(img_car[3+(i+wn)*7], x-100, y-20);
           }
           if(3+wn
              draw_text("→", 750, 350, GREEN, fnt_m, moj_m);
           }
           if(3+wn > 3){
              draw_text("←", 5, 350, GREEN, fnt_m, moj_m);
           }

           draw_text("[Enter] OK!", 300, 430, GREEN, fnt_m, moj_m);
           if(keyw4 === 1) mycar = 0+wn;
           if(keyw4 === 2) mycar = 1+wn;
           if(keyw4 === 3) mycar = 2+wn;
           if(keyw3 === 2) { idx = 0; keyw3 = 0;}
        }

    sframe += 1;
    if(sframe === 60) {
//        var stop = new Date();
//        ms = stop.getTime() - start.getTime();
//        s = ms / 1000;
        sframe = 0
    }

    gameover1 += 1
    timer1 = setTimeout("mmain()", sec_time);

}
// ゲームオーバーの表示
function msg_draw(){
    ctx.font = "20px 'MS　Pゴシック'";
    ctx.fillStyle = "white";
//    ctx.fillText("カーソルキーの上、下、右、左を押してください",200,100);
    ctx.fillText("マウスで車体位置を中心に上下左右に動かしてください",200,100); 
}
function msg_time(s){
    ctx.font = "20px 'MS　Pゴシック'";
    ctx.fillStyle = "white";
//    ctx.fillText("カーソルキーの上、下、右、左を押してください",200,100);
    time_s = " time=" + s;
    ctx.fillText(time_s, 600, 130); 
}
function draw_text(text, x, y, col, fnt, moj){
    ctx.font = fnt;
    wx = x - text.length*moj/2;
    wy = y - moj/2;
    ctx.fillStyle = "black";
    ctx.fillText(text, x + 2, y + 2);
    ctx.fillStyle = col;
    ctx.fillText(text, x, y);
 
}