これで、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/ ゲームをプレイして死ぬと、私の言っていることがわかります。
事前に乾杯。