Question

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

两名球员之间发生碰撞。紧接着，画布应填充为颜色，文本应显示。

问题是在此之前出现警报。

警告，当按下OK时，应该重新加载页面 - 我发现setTimeout由于其中的//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(); }}而无效。

目前工作原理的快速（讨厌）示例：JSFiddle

{{1}}

Answer 1

setTimeout完美有效，请检查此代码

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
}

我正在使用一个事件来执行代码，因为永久性的游戏很烦人

Answer 2

这应该有用。

var x = 1 //collision or any true statement
if (x == 1) {
  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(){
      alert("You only reached a score of ...");
      location.reload();
  }, 10);
}

https://jsfiddle.net/ajrwpmb3/10/

警报不会返回任何值。它们会阻止完整的代码执行。这里的问题是浏览器倾向于对DOM进行批量更新，以便在函数内部进行更改。由于在您的代码中将画布更改为已完成，并且浏览器线程立即被警报阻止，因此不会应用更改。在我的例子中，我已经添加了10毫秒来打破画布更新事件并在浏览器的事件队列中警告2个块，这允许浏览器完成事件1，即首先更新画布，然后执行第二个事件，即显示阻止代码的警报。您可以使用超时值0ms来验证此概念。

Answer 3

window.alert，确认和提示应该死...

这么多答案，但我会再添加一个。

不要使用警告 ...永远...请!!!，为了您网站的所有用户，因为如果他们像我一样第一次见到网站上的提醒我关闭它们。用户可以阻止/停止这些警报这一事实应该足以让他们不再使用它们，因为依赖警报会打破像我这样迂腐的人的游戏。

更好的提醒

您最好的选择是创建自己的非阻止自定义提醒。创建div将其样式设置为position: absolute，将其居中到页面，然后添加ok按钮并隐藏整个内容。

将警报div设为id="myAlert"，当您需要它时，只需取消隐藏它并等待按钮被点击，当点击该按钮时隐藏警报。

对于您的游戏，您应该添加一些暂停逻辑，当需要显示警报时，只需暂停游戏并显示警报。单击警报后，请取消暂停游戏并执行所需操作。

该演示只展示了如何实现简单的自定义提醒并暂停游戏。

// alert function handles the display of a custom alert
var alert = (function(){
    var firstRun = true;
    var callback;
    function alertCallback(){  // handle the click event
        if(typeof callback === "function"){
            callback();
        }
        myAlert.className = "alert hideAlert";
    }
    function alert(message,callbackO){
        myAletMessage.textContent = message;
        myAlert.className = "alert showAlert";
        if(firstRun){
            firstRun = false;
            myAlertButton.addEventListener("click",alertCallback)
        }
        callback = callbackO;  // set the callback
        
    }
    return alert;
})()

var canvas,ctx;
function addCanvas(){
    canvas = document.createElement("canvas");
    canvas.style.top = "0px";
    canvas.style.left = "0px";
    canvas.style.position = "absolute";
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");
}
function resizeCanvas(){
    if(canvas === undefined){
        addCanvas();
    }
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    ctx.font = "32px arial black";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "red";
}

resizeCanvas();
window.addEventListener("resize",resizeCanvas);



// The following code just shows a pretend game with a paused function 
// The paused is used when the alert is called.

var paused = false;
var x,y,t;



function update2(timer){

    globalTime = timer;
    ctx.setTransform(1,0,0,1,0,0); // reset transform
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.globalAlpha = 1;           // reset alpha
    if(paused){
        if(t > 0){
            var sc = t / 10 + 0.1;
            ctx.setTransform(sc,0,0,sc,x,y);
            ctx.fillText("BANG!",0,0);
        }
        var sc = Math.sin(timer /100) * 0.1 + 1.0;
        ctx.fillStyle = "Green";
        ctx.setTransform(sc,0,0,sc,canvas.width/2,canvas.height/2);
        ctx.fillText("Paused!",0,0);
        ctx.fillStyle = "Red";
    }else{
        if(t > 0){
            var sc = t / 10 + 0.1;
            ctx.setTransform(sc,0,0,sc,x,y);
            ctx.fillText("BANG!",0,0);
            t -= 1;
        }else{
            if(Math.random() < 0.1){
                x = (Math.random() * (canvas.width -200))+100;
                y = (Math.random() * (canvas.height -200))+100;
                t= 10;
            }
        }
        if(Math.random() < 0.01){
            alert("A 1 in 100 random event paused the game!",function(){paused = false;});
            paused = true;
        }
    }
    requestAnimationFrame(update2);
}
requestAnimationFrame(update2);

    
.alert {  
    position : absolute;
    z-index : 100;
    left : 35%;
    width : 30%;
    top : 10%;
    background: #fff;
    border: 1px #000 solid;
    text-align: center;
    padding: 6px;    
}
.hideAlert {
    display : none;
}
.showAlert {
    display : block;
}

<div class="alert hideAlert" id="myAlert">
    <div id="myAletMessage"></div><br>
    <input id="myAlertButton" type="button" value="OK got it."></input>
</div>

警报前填充画布

3 个答案:

window.alert，确认和提示应该死...