1

如何对画布进行编程以设置 go = true; 当您单击画布上的“播放”一词时，在常规 js 中？如果 go = true，则开始游戏。此代码将 play 打印到画布上。. 这是我的 js 代码：

var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 336;


    var go = false;

    var reset = function() {
        //reset function
    };

    var main = function () {
    //main function
    };

    var menu = function () {

        ctx.clearRect (0 , 0 , canvas.width , canvas.height);

        ctx.fillStyle = "rgb(250, 250, 250)";
        ctx.font = "24px Helvetica";
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";
        ctx.fillText("play", 32, 32);
    }

    if (go == true) {
        reset();
        var then = Date.now();
        setInterval(main, 1);
    }
    else {
        menu();
    }
4

2 回答 2

2

您可以调整的第一件事是这些部分，因为使用setInterval1 ms 会不好：

var main = function () {
    //main function

   if (go === true) setTimeout(main, 16);
   //use requestAnimationFrame(main) instead, 
};

要检查单击按钮，您可以执行以下操作：

演示：http:
//jsfiddle.net/AbdiasSoftware/n8Hsd/

定义文本所在的矩形：

rect = {
    x: 32,
    y: 32,
    w: 70,
    h: 30
};
//this is not proper way to calculate text boundary,
//but for demo's sake.
ctx.fillText("play", rect.x, rect.y + 16);

然后监听画布的点击事件并检查点击位置是否在该矩形内：

canvas.addEventListener('click', checkStart, false);

function checkStart(e) {
    var p = getMousePos(e);

    if (p.x >= rect.x && p.x <= rect.x + rect.w &&
        p.y >= rect.y && p.y <= rect.y + rect.h) {

        go = !go;
        if (go === true) {
            main();
        } else {
            menu();
        }
    }
}

鼠标位置可以这样计算：

function getMousePos(e) {
    var r = canvas.getBoundingClientRect();
    return {
        x: e.clientX - r.left,
        y: e.clientY - r.top
    };
}
于 2013-06-13T23:42:49.123 回答
1

您只需要在单击画布时检查鼠标是否在文本的边界框内。如果单击时鼠标的位置在文本的边界框内，则表示正在单击文本，您应该设置go为true.

这样的事情会有所帮助。

var bbox = {x:10,y:10, w:100, h:100};
if(mouseX >= bbox.x && mouseY >= bbox.y && mouseX <= bbox.x + bbox.w && mouseY <= bbox.y + bbox.h){
    go = true;
}
于 2013-06-13T23:34:21.653 回答