重複したグリッドのグリッドをマウスクリックで検出 - JavaScript Canvas

Question

現在、2つのグリッドのボックスを同時にマウスでクリックしようとしています。今、私はまた、ボックスの第1グリッドの隅に位置ボックスの二次グリッド上でのマウスクリックを検出したい

var gridPosX = Math.floor(mouseClickX/BoxWidth); 
var gridPosY = Math.floor(mouseClickY/BoxHeight); 

を：1つのグリッドが容易であり、私は使用してきました。これは、第1のグリッドと同様の方法で達成することができる。問題は、最初のグリッドまたは2番目のグリッドのクリックを同時に検出したいためです。最初のグリッドのクリックと2番目のグリッドのクリックを区別する最良の方法は何ですか？私はMath.floorを削除しようとしましたが、より大きい、より小さい演算子（> <）を使用して、クリックが他の格子点に近くなったかどうかを確認しましたが、これまでのところ幸運はありませんでした。

This is an image example of the grid. The black being the main one, the red being the second one

var WIDTH = 1280, HEIGHT = 1280; 
 
var canvas, context; 
 
var grid = []; 
 
var grid2 = []; 
 

 
var gridWidth = 10, gridHeight = 10; 
 
var boxWidth = WIDTH/gridWidth, boxHeight = HEIGHT/gridHeight; 
 

 
function main(){ 
 
    canvas = document.createElement("canvas"); 
 
    canvas.width = WIDTH; 
 
    canvas.height = HEIGHT; 
 
    context = canvas.getContext("2d"); 
 
    document.body.appendChild(canvas); 
 
    
 
canvas.onmousedown = function(e){ 
 
    if(e.which == 1){ 
 
    var gridPosX = Math.floor(e.offsetX/boxWidth); 
 
    var gridPosY = Math.floor(e.offsetY/boxHeight); 
 

 
    grid[gridPosX][gridPosY] = 0; 
 
    } 
 
} 
 
    
 
    init(); 
 
    setInterval(draw, 30); 
 
} 
 

 
function init(){ 
 
    for(var x = 0; x < gridWidth; x++){ 
 
    grid[x] = []; 
 
    grid2[x] = []; 
 
    for(var y = 0; y < gridHeight; y++){ 
 
     grid[x][y] = 1; 
 
     grid2[x][y] = 1; 
 
    } 
 
    } 
 
} 
 

 
function draw(){ 
 
    for(var x = 0; x < gridWidth; x++){ 
 
    for(var y = 0; y < gridHeight; y++){ 
 
     if(grid[x][y] == 1){ 
 
\t \t context.fillStyle = 'gray'; 
 
     context.fillRect(x*boxWidth, y*boxHeight, boxWidth, boxHeight); 
 
     context.strokeRect(x*boxWidth, y*boxHeight, boxWidth, boxHeight); 
 
     } 
 
    } 
 
    } 
 
    for(var x = 0; x < gridWidth; x++){ 
 
    for(var y = 0; y < gridHeight; y++){ 
 
     if(grid2[x][y] == 1){ 
 
\t \t context.fillStyle = 'red'; 
 
     context.fillRect((x*boxWidth)+(boxWidth)-(boxWidth/4), (y*boxHeight)+(boxHeight)-(boxHeight/4), boxWidth/2, boxHeight/2); 
 
     context.strokeRect((x*boxWidth)+(boxWidth)-(boxWidth/4), (y*boxHeight)+(boxHeight)-(boxHeight/4), boxWidth/2, boxHeight/2); 
 
     } 
 
    } 
 
    } 
 
} 
 

 
main();

Answer 1

赤いグリッドがグレーのものの上に表示されますので、私はあなたが最初のマウスイベントが赤いグリッド上にあるかどうかを決めることができると思います。そうでなければ、それは灰色のグリッド上になければならない。赤グリッドがクリックされたかどうかを確認するために、次の計算に基づいて

：

 var xRedIndex = Math.floor((e.offsetX - 3/4 * boxWidth)/(boxWidth/2)); 
     var yRedIndex = Math.floor((e.offsetY - 3/4 * boxHeight)/(boxHeight/2)); 
     if (xRedIndex % 2 === 0 && yRedIndex % 2 === 0) { 
     console.log("red"); 
     console.log("Red grid x: " + (xRedIndex/2)); 
     console.log("Red grid y: " + (yRedIndex/2)); 
     } else { 
     console.log("gray"); 
     var gridPosX = Math.floor(e.offsetX/boxWidth); 
     var gridPosY = Math.floor(e.offsetY/boxHeight); 
     grid[gridPosX][gridPosY] = 0; 
     } 

基本的に、最初かどうかを確認その後、offsetX/Yから最初の列/行の最初の灰色の領域を差し引きます残りのoffsetX/Yには、奇数または偶数のboxSize/2（赤いグリッドの辺の長さ）が含まれています。偶数は、クリックが赤いグリッド上にあることを意味し、そうでない場合は、覆われていないグレーの領域になります。

の作業フィドル：https://jsfiddle.net/mwxzgth6/1/