3

これで、HTML5 を使った初めてのゲームが完成しました... Snake! ウーホー！(4 日間の作業の後、追加する可能性があります)。

それはすべてうまく機能しますが、私が修正しようとしてきた最後のことが1つだけあり、問題を理解できないようです.

次のような drawButton 関数があります。

function drawButton(x,y,width,height,string,event){
    xCenterButton=x+(width/2);
    yCenterButton=y+(height/2);

    ctx.fillStyle="rgba(242,255,195,1)";
    ctx.fillRect(x,y,width,height);

    ctx.rect(x,y,width,height);
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.stroke();

    ctx.font="25px Arial";

    fontSize = getFontSize();
    centerNum = fontSize/4;

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText(string,xCenterButton,yCenterButton+centerNum);

    buttonPos.push([[x],[y],[x+width],[y+height],[event]]);
};

メインメニューを開始すると、うまく描画されます。

function menuStart(){
    clear();
    drawButton(getCenterX(100),getCenterY(50),100,50,"Start",0);
};

ただし、ゲーム後のメニューに 2 つのストロークが作成されますが、コードはほぼ同じです。

function pgStart(){
    clear();

    ctx.font="25px Arial";
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText('GAME OVER',canvWidth/2,canvHeight/2-30);

    ctx.font="25px Arial";
    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText('SCORE: '+score,canvWidth/2,canvHeight/2);

    drawButton(getCenterX(100),getCenterY(50)+35,100,50,"Re-Start",1);
};

jsFiddle をチェックしてください: http://jsfiddle.net/cDFBj/ ゲームをプレイして死ぬと、私の言っていることがわかります。

事前に乾杯。

4

1 に答える 1

1

非常に奇妙な問題です。最初の呼び出しの状態を保存し、コマンドがなくても再度描画するようです...

1 つのオプションは、テキストを上に移動し、代わりに元の座標を使用することですが、それは問題を回避するだけで解決にはなりません。そのためのデモ

ctx.fillText('GAME OVER',canvWidth/2,canvHeight/2-60);
// ...
ctx.fillText('SCORE: '+score,canvWidth/2,canvHeight/2 - 30);
drawButton(getCenterX(100),getCenterY(50),100,50,"Re-Start",0);

ctx.save()s とctx.restore()s を使用して問題を修正し、行以外をすべて.rectコメントアウトし、行をコメントアウトし、.rectその他の修正を試みましたが、どれもうまくいかないようでした。古いボックスがどこにあったかを覚えていて、必要のないときに再度描画します

私が修正できる唯一の方法は.fillRect、以下に示すように、代わりに 2 つの s を使用することです。これにより、処理がまったく増加せず、不要な魔法のボックスが取り除かれます

function drawButton(x,y,width,height,string,event){
    xCenterButton= x + (width/2);
    yCenterButton= y + (height/2);

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.fillRect(x-1,y-1,width+2,height+2);     

    ctx.fillStyle="rgba(242,255,195,1)";
    ctx.fillRect(x,y,width,height);

    ctx.font="25px Arial";

    fontSize = getFontSize();
    centerNum = fontSize/4;

    ctx.fillStyle="rgba(0,0,0,1)";
    ctx.textAlign="center";
    ctx.fillText(string,xCenterButton,yCenterButton+centerNum);

    buttonPos.push([[x],[y],[x+width],[y+height],[event]]);
};

そのデモはこちら

余談ですが、下case 1にfunction checkGamestate(s)は が必要です。break;breakl;

于 2013-09-27T19:30:25.333 に答える