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

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

这样的事情会有所帮助。

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