使网格半可点击

Question

我在HTML5中制作一个交叉拼图。为此，我在画布上使用javascript中的矩形创建了一个网格。我只希望蓝色矩形可以点击，其余的矩形不可点击。 for循环用于将特定矩形填充为蓝色。这是代码：

var canvas;
var context;
var i=0;
var j=0;
var size=40;
var x;
var y;

function display()
{
    alert("a");
    canvas = document.getElementById("myCanvas");
    c = canvas.getContext("2d");
    drawBox();
    canvas.addEventListener('click', handleClick);
}
function drawBox() {
    c.beginPath();
    c.fillStyle = "white";
    c.lineWidth = 3;
    c.strokeStyle = 'black';
    for (var row = 0; row < 14; row++) {
        for (var column = 0; column < 13; column++) {
            var x = column * 40;
            var y = row * 40;
            c.rect(x, y, 40, 40);
            c.fill();
            c.stroke();
        }
    }
    for(i=0;i<=11;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(80, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=40;
    for(i=0;i<=11;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(j, 40,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=0;
    for(i=0;i<=12;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(240, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=160;
    for(i=0;i<=9;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(160, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=120;
    for(i=0;i<=9;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(j, 480,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=200;
    for(i=0;i<=8;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(360, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    j=200;
    for(i=0;i<=8;i++)
    {
            c.fillStyle = "blue";
            c.fillRect(480, j,40, 40);
            j=j+40; 
            //alert(i+"   "+j);
    }
    c.closePath();
}

function handleClick(e) {

    c.fillStyle = "red";
    c.fillRect(Math.floor(e.offsetX/40)*40, 
               Math.floor(e.offsetY/40)*40,
               40, 40);
    x=e.offsetX;
    y=e.offsetY;
    //alert(e.currentTarget);
    //alert(x+"   "+y);
    var sign = prompt("Input letter");
    //alert(sign);
    //sign=sign.toLowerCase();
    switch (sign)
{
case "a":
    //drawtext("a");
    c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("a",x,y);
    alert("a");
  break;
case "b":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("b",x,y);
  alert("b");
  break;
case "c":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("c",x,y);
  alert("c");
  break;
case "d":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("d",x,y);
  alert("d");
  break;
case "e":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("e",x,y);
  alert("e");
  break;
case "f":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("f",x,y);
  alert("f");
  break;
case "g":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("g",x,y);
  alert("g");
  break;
case "h":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("h",x,y);
    alert("h");
  break;
case "i":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("i",x,y);
  alert("i");
  break;
case "j":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("j",x,y);
  alert("j");
  break;
case "k":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("k",x,y);
  alert("k");
  break;
case "l":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("l",x,y);
  alert("l");
  break;
case "m":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("m",x,y);
  alert("m");
  break;
case "n":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("n",x,y);
  alert("n");
  break;
case "o":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("o",x,y);
    alert("o");
  break;
case "p":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("p",x,y);
  alert("p");
  break;
case "q":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("q",x,y);
  alert("q");
  break;
case "r":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("r",x,y);
  alert("r");
  break;
case "s":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("s",x,y);
  alert("s");
  break;
case "t":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("t",x,y);
  alert("t");
  break;
case "u":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("u",x,y);
  alert("u");
  break;
case "v":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("v",x,y);
    alert("v");
  break;
case "w":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("w",x,y);
  alert("w");
  break;
case "x":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("x",x,y);
  alert("y");
  break;
case "y":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("y",x,y);
  alert("y");
  break;
case "z":
c.font = '20pt Calibri';
    c.textAlign = 'center';
    c.fillStyle="black";
    c.fillText("z",x,y);
  alert("z");
  break;
}          
}

Answer 1

在函数handleClick（e）中，您可以编写以下代码片段

var x = e.pageX - this.offsetLeft;     var y = e.pageY - this.offsetTop;

var imageData2 = c.getImageData(x, y, 40, 40);

if (imageData2.data[0] == 255) {
    return false;
}

这将忽略在白色方块中进行的点击。 如果在蓝色方块中单击，它将提示输入字母。

你的handleClick函数看起来像这样 - function handleClick（e）{

c.fillStyle = "red";
c.fillRect(Math.floor(e.offsetX/40)*40, 
           Math.floor(e.offsetY/40)*40,
           40, 40);
x=e.offsetX;
y=e.offsetY;

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

var imageData2 = c.getImageData(x, y, 40, 40);

if (imageData2.data[0] == 255) {
    return false;
}


var sign = prompt("Input letter");
switch (sign)
{
    case "a":
        //drawtext("a");
        c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("a",x,y);
        alert("a");
      break;
    case "b":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("b",x,y);
      alert("b");
      break;
    case "c":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("c",x,y);
      alert("c");
      break;
    case "d":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("d",x,y);
      alert("d");
      break;
    case "e":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("e",x,y);
      alert("e");
      break;
    case "f":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("f",x,y);
      alert("f");
      break;
    case "g":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("g",x,y);
      alert("g");
      break;
    case "h":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("h",x,y);
        alert("h");
      break;
    case "i":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("i",x,y);
      alert("i");
      break;
    case "j":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("j",x,y);
      alert("j");
      break;
    case "k":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("k",x,y);
      alert("k");
      break;
    case "l":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("l",x,y);
      alert("l");
      break;
    case "m":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("m",x,y);
      alert("m");
      break;
    case "n":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("n",x,y);
      alert("n");
      break;
    case "o":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("o",x,y);
        alert("o");
      break;
    case "p":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("p",x,y);
      alert("p");
      break;
    case "q":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("q",x,y);
      alert("q");
      break;
    case "r":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("r",x,y);
      alert("r");
      break;
    case "s":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("s",x,y);
      alert("s");
      break;
    case "t":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("t",x,y);
      alert("t");
      break;
    case "u":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("u",x,y);
      alert("u");
      break;
    case "v":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("v",x,y);
        alert("v");
      break;
    case "w":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("w",x,y);
      alert("w");
      break;
    case "x":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("x",x,y);
      alert("y");
      break;
    case "y":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("y",x,y);
      alert("y");
      break;
    case "z":
    c.font = '20pt Calibri';
        c.textAlign = 'center';
        c.fillStyle="black";
        c.fillText("z",x,y);
      alert("z");
      break;

}
}