2011年6月13日月曜日

HTML5 - Canvas パックマンのモンスターを描くJavaScript関数(1)

パックマンを描くスクリプトを調べてモンスター関数を作成します。

xだけをインプットして、yは勝ってに決まってしまういけていないモンスター関数です。

サンプル



モンスター関数(1)の使い方

monster(ctx,x,collor)

モンスター関数(1)

function monster(ctx,x,collor){
    ctx.fillStyle = collor;
    ctx.beginPath();
    ctx.moveTo(x,x+33);
    ctx.lineTo(x,x+19);
    ctx.bezierCurveTo(x,x+11,x+6,x+5,x+14,x+5);
    ctx.bezierCurveTo(x+22,x+5,x+28,x+11,x+28,x+19);
    ctx.lineTo(x+28,x+33);
    ctx.lineTo(x+23.333,x+28.333);
    ctx.lineTo(x+18.666,x+33);
    ctx.lineTo(x+14,x+28.333);
    ctx.lineTo(x+9.333,x+33);
    ctx.lineTo(x+4.666,x+28.333);
    ctx.lineTo(x,x+33);
    ctx.fill();
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(x+8,x+13);
    ctx.bezierCurveTo(x+5,x+13,x+4,x+16,x+4,x+18);
    ctx.bezierCurveTo(x+4,x+20,x+5,x+23,x+8,x+23);
    ctx.bezierCurveTo(x+11,x+23,x+12,x+20,x+12,x+18);
    ctx.bezierCurveTo(x+12,x+16,x+11,x+13,x+8,x+13);
    ctx.moveTo(x+20,x+13);
    ctx.bezierCurveTo(x+17,x+13,x+16,x+16,x+16,x+18);
    ctx.bezierCurveTo(x+16,x+20,x+17,x+23,x+20,x+23);
    ctx.bezierCurveTo(x+23,x+23,x+24,x+20,x+24,x+18);
    ctx.bezierCurveTo(x+24,x+16,x+23,x+13,x+20,x+13);
    ctx.fill();
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(x+18,x+19,2,0,Math.PI*2,true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x+6,x+19,2,0,Math.PI*2,true);
    ctx.fill();
}

ちなみにgoogleのPac-Manです。

0 件のコメント:

コメントを投稿