javascript - 在警报之前填充 Canvas

Question

对于 Canvas 游戏，如何在窗口警报之前加载 Canvas 填充和文本？即使只有几毫秒。

两个玩家之间发生了碰撞。之后， Canvas 应立即填充颜色并显示文本。

问题是警报出现在这种情况发生之前。

按下“确定”后，警报应该重新加载页面 - 我发现 setTimeout 不起作用，因为其中有 location.reload 。

当前如何工作的快速(令人讨厌的)示例:JSFiddle

//collision
if (x < object.x - 50 + 60 &&
    x + width > object.x - 50 && 
    y < object.y - 60 + 60 && 
    height + y > object.y - 60) {

  
//fill before alert
ctx.fillRect(0,0,2000,2000);
ctx.strokeText("You only reached a score of " + score + ", you lose!\nPress 'OK' to try again?", 250, 290);
ctx.fillText("You only reached a score of " + score + ", you lose!\nPress 'OK' to try again?",250,290);

  
//end game alert
if(!alert("You reached a score of ...")){
location.reload();
}}

Answer 1

setTimeout perfectly works, check this code out

HTML

<canvas id="canvas"></canvas>
<button id="buttonID">click here</button>

Javascript

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");

ctx.fillStyle=gradient;
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"#7E6189");
my_gradient.addColorStop(1,"#FFFFFF");
ctx.fillStyle=my_gradient;

ctx.lineWidth = 5;
ctx.font="30px Verdana";
var gradient=ctx.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.strokeStyle = 'black';
//irrelevant above



var x = 1 //collision or any true statement


// when the event occures
// create the gredient
document.querySelector('#buttonID').onclick = function() {
  ctx.fillRect(0,0,2000,2000);
  ctx.strokeText("You only reached a score of ...", 250, 290);
  ctx.fillText("You only reached a score of ...",250,290);
  setTimeout(function() {
    if(!alert("You only reached a score of ...")){
        location.reload();
    }
  }, 300); // chenge the millis to whatever you want
}

i am using an event to execute the code because the permanent alets are annoying