3

所以我用 HTML5 完成了我的第一款游戏……蛇！呜呼！（经过 4 天的工作，我可能会添加）。

一切都很好，但是我一直在尝试解决最后一件事，但我似乎无法弄清楚问题所在。

我有一个 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);
};

但是，它在我的游戏后菜单中创建了两个笔画，但代码几乎完全相同：

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

很奇葩的问题，好像保存了第一次调用的状态，然后再画一遍，虽然没有命令这样做……

一种选择是向上移动文本并使用原始坐标，但这只是避免了问题，而不是解决了问题。演示

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行以及其他修复，但似乎没有一个工作。它仍然记得旧盒子的位置，并在不应该的时候再次绘制它们

我能想出解决办法的唯一方法是使用两个.fillRects，如下所示。这根本不会增加处理量，并带走了不需要的魔法盒子

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 回答