我正在开发agario。我想要在游戏中进行倒计时,但在画布中看不到倒计时。
function drawGameScene() {
if (!lastCalledTime) {
lastCalledTime = Date.now();
fps = 60;
displayfps = fps;
} else {
delta = (Date.now() - lastCalledTime) / 1000;
lastCalledTime = Date.now();
fps = 1 / delta;
}
var a, oldtime = Date.now();
++cb;
timestamp = oldtime;
if (0 < playerCells.length) {
calcViewZoom();
var c = a = 0;
for (var d = 0; d < playerCells.length; d++) {
playerCells[d].updatePos();
a += playerCells[d].x / playerCells.length;
c += playerCells[d].y / playerCells.length;
}
posX = a;
posY = c;
posSize = viewZoom;
nodeX = (nodeX + a) / 2;
nodeY = (nodeY + c) / 2
} else {
nodeX = (29 * nodeX + posX) / 30;
nodeY = (29 * nodeY + posY) / 30;
viewZoom = (9 * viewZoom + posSize * viewRange()) / 10;
}
buildQTree();
mouseCoordinateChange();
xa || ctx.clearRect(0, 0, canvasWidth, canvasHeight);
if (xa) {
if (showDarkTheme) {
ctx.fillStyle = '#111111';
ctx.globalAlpha = .05;
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.globalAlpha = 1;
}
else if (pembetema) {
ctx.fillStyle = '#ff4081';
ctx.globalAlpha = .05;
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.globalAlpha = 1;
}else if (yesiltema) {
ctx.fillStyle = '#40ff58';
ctx.globalAlpha = .05;
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.globalAlpha = 1;
}else if (default_tema) {
ctx.fillStyle = '#F2FBFF';
ctx.globalAlpha = .05;
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.globalAlpha = 1;
}
} else {
drawGrid();
}
nodelist.sort(function (a, b) {
return a.size == b.size ? a.id - b.id : a.size - b.size
});
ctx.save();
ctx.translate(canvasWidth / 2, canvasHeight / 2);
ctx.scale(viewZoom, viewZoom);
ctx.translate(-nodeX, -nodeY);
if (transparentRender == true) {
ctx.globalAlpha = 0.6;
} else {
ctx.globalAlpha = 1;
}
/*drawBorders(ctx);*/
for (d = 0; d < Cells.length; d++) Cells[d].drawOneCell(ctx);
for (d = 0; d < nodelist.length; d++) nodelist[d].drawOneCell(ctx);
//console.log(Cells.length);
if (drawLine) {
drawLineX = (3 * drawLineX + lineX) /
4;
drawLineY = (3 * drawLineY + lineY) / 4;
ctx.save();
ctx.strokeStyle = "#FFAAAA";
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.globalAlpha = .5;
ctx.beginPath();
for (d = 0; d < playerCells.length; d++) {
ctx.moveTo(playerCells[d].x, playerCells[d].y);
ctx.lineTo(drawLineX, drawLineY);
}
ctx.stroke();
ctx.restore()
}
// border -->
ctx.strokeStyle = '#00D1DF';
ctx.lineWidth = 25;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(leftPos,topPos);
ctx.lineTo(rightPos,topPos);
ctx.lineTo(rightPos,bottomPos);
ctx.lineTo(leftPos,bottomPos);
ctx.closePath();
ctx.stroke();
// <--
ctx.restore();
///////////////////////////////////////// MY COUNTDOWN CODES ////////////////////////////////////////////////
ctx.globalAlpha = 1;
ctx.fillStyle = "#0000FF";
ctx.font = "30px Roboto";
if(this.countdown < 3600){
var countDownStr = "";
var min = Math.floor(this.countdown/60);
if ( min < 10 ){
countDownStr += "0";
}
countDownStr += min+":";
var sec = this.countdown%60;
if ( sec<10 ){
countDownStr += "0";
}
countDownStr += sec;
ctx.fillText(countDownStr, ((canvasWidth - ctx.measureText(countDownStr).width) * 0.5), 30);
}
///////////////////////////////////////// MY COUNTDOWN CODES ////////////////////////////////////////////////
lbCanvas && lbCanvas.width && ctx.drawImage(lbCanvas, canvasWidth - lbCanvas.width - 10, 10); // draw Leader Board
if (!hideChat)
{
if ((chatCanvas != null)&&(chatCanvas.width > 0)) ctx.drawImage(chatCanvas, 0, canvasHeight - chatCanvas.height - 50); // draw Chat Board
}
var mass = calcUserScore();
userScore = Math.max(userScore, mass);
if (0 != userScore) {
kb();
if (null == scoreText) {
scoreText = new UText(24, '#FFFFFF');
}
var boxOpacity = .25;
scoreText.setValue("Score: " + ~~(userScore / 100));
c = scoreText.render();
w = c.width;
ctx.globalAlpha = boxOpacity;
ctx.fillStyle = "#000000";
ctx.fillRect(10, 10, w + 10, 34);
ctx.globalAlpha = 1;
ctx.drawImage(c, 15, 15);
scoreText.setValue("Mass: " + ~~(mass / 100));
c = scoreText.render();
w = c.width;
ctx.fillStyle = "rgba(0,0,0, " + boxOpacity;
ctx.fillRect(10, 50, w + 10, 34);
ctx.drawImage(c, 15, 55);
}
drawSplitIcon(ctx);
drawTouch(ctx);
drawMap();
var deltatime = Date.now() - oldtime;
deltatime > 1E3 / 60 ? z -= .01 : deltatime < 1E3 / 65 && (z += .01);
.4 > z && (z = .4);
1 < z && (z = 1)
}
我在倒计时的位置添加了注释行。问题出在哪儿 ?我快疯了。我在倒计时的位置添加了注释行。问题出在哪儿 ?我快疯了。我需要添加“ctx.save()”或“ctx.restore()”代码?我需要做什么?