Javascriptの台形の表示の応用

次週、カーレースの続きと、

ロボットの仕様を考えていきます。

次週、次の絵の描き方を考えます。

カーレイス・ゲーム００３

カーレース・ゲーム００３

なめらかな道路にしました。

台形は、パスで座標を４つ指定して描画します。

言語はｊａｖａｓｃｒｉｐｔです。

HTMLのメインが必要です。（ブロック崩しを参考に、コメントでマークしました）

var canvas;
var ctx;

WIDTH  = 800;
HEIGHT = 600;

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

function init(){
    canvas = document.getElementById('world');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    ctx = canvas.getContext('2d');
    ctx.font = "48px 'MS　Pゴシック'";

    user = window.navigator.userAgent.toLowerCase();

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

     ctx.fillStyle = "green";
     ctx.fillRect(0, 300, WIDTH, 300);
    h =2;
    y = 300;
    for (i=1; i < 25; i++){
        
        uw = i * i * 1.5;
        ux = 400 - uw / 2;
        bw = (i+1)*(i+1)* 1.5;
        bx = 400 -bw/2;
        uw1 = - bw/2 + bw;
        uw2 = - uw/2 +bw/2;
        wkcolor = i % 3;
        ctx.beginPath();
        ctx.moveTo(ux,y);
        ctx.lineTo(ux+uw,y);
        ctx.lineTo(bx+bw,y+h);
        ctx.lineTo(bx,y+h);
//全て座標を指定 

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

        y = y + h;
        h = h + 1;

    }

}

 

 

 

 

 

カーレース・ゲーム００2

 

 

道路の描画、キャピタル００２

高さも変化させました。

 

var canvas;
var ctx;

WIDTH  = 800;
HEIGHT = 600;

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

function init(){
    canvas = document.getElementById('world');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    ctx = canvas.getContext('2d');
    ctx.font = "48px 'MS　Pゴシック'";

    user = window.navigator.userAgent.toLowerCase();

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

     ctx.fillStyle = "green";
     ctx.fillRect(0, 300, WIDTH, 300);
    h =2;
    y = 300;
    for (i=1; i < 25; i++){
        w = i * i * 1.5;
        x = 400 - w / 2;
        wkcolor = i % 3;
        ex = x + w;
        ey = y + h;
        ctx.fillStyle = bordcolor[wkcolor];
        ctx.fillRect(x, y, w, h);
        y = y + h;
        h = h + 1;
    }

}

 

カーレース・ゲーム００１

 

 

道路の描画、キャピタル００１

 

var canvas;
var ctx;

WIDTH  = 800;
HEIGHT = 600;

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

function init(){
    canvas = document.getElementById('world');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    ctx = canvas.getContext('2d');
    ctx.font = "48px 'MS　Pゴシック'";

    user = window.navigator.userAgent.toLowerCase();

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

     ctx.fillStyle = "green";
     ctx.fillRect(0, 300, WIDTH, 300);

    for (i=1; i < 26; i++){
        w = i * 33;
        h = 12;
        x = 400 - (w / 2);
        y = 288 + (i * h);
        wkcolor = i % 3;
        ex = x + w;
        ey = y + h;
        ctx.fillStyle = bordcolor[wkcolor];
        ctx.fillRect(x, y, w, h);
    }

}

※四角の描画は、スタート位置と幅です。