道路（キーを押すたびに描画が変わる）

 

 

 

var bordcolor = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

 

function keydown(e){
    tmr = tmr + 1;
　　k = e.keyCode;

    if(k==37) curve = curve - 5;
    if(k==38) undulation = undulation - 20;
    if(k==39) curve = curve + 5;
    if(k==40) undulation = undulation + 20; 
    draw_road(curve, undulation); 
    
}

 

function draw_road(di, ud){

：

        wkcolor = (6 - tmr % 7 + i) % 7;

・tmrは、キーを押すたびにカウントアップされます。

 

 

 

 

 

 

 

 

三角関数を使った坂道・登り道の表現。

・updownの計算　縮小率です。

 for(i=23; i >=0; i--){
        updown[i] = Math.sin((180*i/23)*(Math.PI/180));
        
    }

で２３の割合（１～　０）に１８０を掛けてパーセントを算出する。

それをラデイアンに直す。*(Math.PI/180)

・上、下のキーのアクション

    if(k==38) draw_road(0, -50); if(k==40) draw_road(0, 50);

 

・道路の描画モジュール ｉは（２３～０）の変数でした。考慮間違いでした。

function draw_road(di, ud){
    //（描画処理）
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    ctx.fillStyle = "green";
    ctx.fillRect(0, 300, WIDTH, 300);
    h = 24;
    y = 600 - h;
    for (i=23; i >= 0; i--){
        ii = i ;
        uw = (ii-1)*(ii-1) * 1.5;
        ux = 400 - uw / 2 + di*(23-(ii-1));
        uy = y + parseInt(updown[i-1]*ud);
        bw = ii* ii * 1.5;
        bx = 400 - bw/2 + di*(23-ii);
        by = y + h + parseInt(updown[i]*ud);
        wkcolor = ii % 3;
        ctx.beginPath();
        ctx.moveTo(ux,uy);
        ctx.lineTo(ux+uw,uy);
        ctx.lineTo(bx+bw,by);
        ctx.lineTo(bx,by);
//全て座標を指定 

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

        h = h - 1;
        y = y - h;
    }
    msg_draw();
}
// ゲームオーバーの表示
function msg_draw(){
    ctx.font = "20px 'MS　Pゴシック'";
    ctx.fillStyle = "white";
    ctx.fillText("カーソルキーの上、下を押してください",200,100); 
}

 

 

 

 

 

ロボットの手と足の描画。

 

 

・顔のイラストを修正しました。

・関節を付けました。

 

コーデイングは両足先と左手の描画です。

function lhanddraw(){

        wkcolor = 1;
        ctx.beginPath();
        ctx.moveTo(70,110);
        ctx.lineTo(81,110);
        ctx.lineTo(82,114);
        ctx.lineTo(79,120);
        ctx.lineTo(68,120);
        ctx.lineTo(68,112);
//全て座標を指定（左・手）

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

        wkcolor = 3;
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.moveTo(79,116);
        ctx.lineTo(79,125);
//全て座標を指定（左・親指）

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

        wkcolor = 2;
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(76,120);
        ctx.lineTo(76,130);
//全て座標を指定（左・人差し指）

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

        wkcolor = 3;
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(74,120);
        ctx.lineTo(74,130);
//全て座標を指定（左・中指）

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

        wkcolor = 2;
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(72,120);
        ctx.lineTo(72,130);
//全て座標を指定（左・薬指）

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

        wkcolor = 3;
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(70,120);
        ctx.lineTo(70,128);
//全て座標を指定（左・子指）

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

 

}
function legdraw(){

        wkcolor = 1;
        ctx.beginPath();
        ctx.moveTo(22,190);
        ctx.lineTo(40,190);
        ctx.lineTo(40,198);
        ctx.lineTo(22,198);
//全て座標を指定（右・足手）

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

        wkcolor = 1;
        ctx.beginPath();
        ctx.moveTo(51,190);
        ctx.lineTo(68,190);
        ctx.lineTo(68,198);
        ctx.lineTo(51,198);
//全て座標を指定（左・足手）

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

 

}