如何在 JavaScript 中检测鼠标指针悬停的颜色以重置游戏？

Question

我目前正在创建一个光标迷宫游戏，其目标是用光标穿过随机生成的迷宫，如果用户触摸随机生成的墙壁（尝试通过颜色识别），则用户将被重置。

我一直在无休止地寻找一种方法来检测鼠标指针是否位于指定颜色上，因为将每面墙初始化为形状并检测坐标是一项更加复杂的任务，因为迷宫是随机生成的。我见过一些帖子说在 HTML 中使用 onmouseover 事件，但我只看到它用于检测按钮或文本元素，而不是颜色。我正在尝试做的事情是否可能，如果不可能，什么可能是一个好的解决方法？

这是我当前的代码：

let maze = null;
let res = 50;
let mazeSizes = [25,50];

function setup() {
  createCanvas(800, 450);
  
  noStroke();
  
  makeMaze(width/res + 2, height/res + 2);
  
  drawMaze();
}

let count = 0;
function draw() {
  fill("#39A7FF");
  ellipse(775, 425, 20, 20);
  if(count % 0.5 == 0) {
    if(maze.stack.length != 0) {
      background("#68c7ff");
      mazeIterate();
      drawMaze();
    }
  }
  count++;
}

function makeMaze(w, h) {
  maze = 
  {
    "stack":[],
    "tiles":[],
    "w":w,
    "h":h
  };
  
  for(let i = 0; i < w; i++) {
    maze.tiles[i] = [];
    for(let j = 0; j < h; j++) {
      maze.tiles[i][j] = 
      {
        "up":"wall",
        "down":"wall",
        "left":"wall",
        "right":"wall",
        "isStart":false,
        "isCurrent":false,
        "x":i,
        "y":j,
        "seen":false
      }
      if(i == 0 || i == w-1 || j == 0 || j == h-1) {
        maze.tiles[i][j].seen = true;
      }
    }
  }
  
  maze.tiles[1][1].isCurrent = true;
  maze.tiles[1][1].isStart = true;
  maze.tiles[1][1].seen = true;
  maze.stack.push(maze.tiles[1][1]);
}

function mazeIterate() {
  let current = maze.stack.pop();
  
  let tileAndWall = pickNeighbor(current);
  if(tileAndWall) {
    maze.stack.push(current);
    tileAndWall.tile[tileAndWall.wall] = "open";
    current[opositeWall(
      tileAndWall.wall)] = "open";
    tileAndWall.tile.seen = true;
    maze.stack.push(tileAndWall.tile);
    
    current.isCurrent = false;
    tileAndWall.tile.isCurrent = true;
  }
  else if(maze.stack.length != 0) {
    current.isCurrent = false;
    maze.stack[
      maze.stack.length-1].isCurrent = true;
  }
}

function pickNeighbor(tile) {
  let unSeen = [];
  
  let upTile = maze.tiles[tile.x][tile.y+1];
  if(!upTile.seen) {
    unSeen.push({
      "tile":upTile,
      "wall":"up"
    });
  }

  let downTile = maze.tiles[tile.x][tile.y-1];
  if(!downTile.seen) {
    unSeen.push({
      "tile":downTile,
      "wall":"down"
    });
  }

  let rightTile = maze.tiles[tile.x+1][tile.y];
  if(!rightTile.seen) {
    unSeen.push({
      "tile":rightTile,
      "wall":"right"
    });
  }

  let leftTile = maze.tiles[tile.x-1][tile.y];
  if(!leftTile.seen) {
    unSeen.push({
      "tile":leftTile,
      "wall":"left"
    });
  }
  
  if(unSeen.length == 0) {
    return null;
  }
  
  return unSeen[Math.floor(
    Math.random()*unSeen.length
  )];
}

function opositeWall(wall) {
  if(wall == "up") {
    return "down"
  }
  else if(wall == "down") {
    return "up"
  }
  else if(wall == "right") {
    return "left"
  }
  else if(wall == "left") {
    return "right"
  }
  
  return -1;
}

function drawMaze() {
  push();
  translate(-res, -res);
  for(let i = 0; i < maze.tiles.length; i++) {
    for(let j = 0; j < maze.tiles[i].length; j++) {
      let tile = maze.tiles[i][j];
      drawTile(tile, i, j);
    }
  }
  pop();
}

function drawTile(tile, i, j) {
  strokeWeight(0);
  
  if(tile.seen == true) {
    fill("#24698e");
    square(i*res, j*res, res);
    
    strokeWeight(2);
    stroke("#c4ecff");
    if(tile.up == "wall") {
      line((i)*res, (j)*res, 
           (i+1)*res, (j)*res);
    }
    if(tile.down == "wall") {
      line((i)*res, (j+1)*res, 
           (i+1)*res, (j+1)*res);
    }
    if(tile.left == "wall") {
      line((i+1)*res, (j)*res, 
           (i+1)*res, (j+1)*res);
    }
    if(tile.right == "wall") {
      line((i)*res, (j)*res, 
           (i)*res, (j+1)*res);
    }
  }
  
  if(tile.isCurrent) {
    fill("#00faff")
    noStroke();
    circle(i*res + res/2, 
             j*res + res/2, res/3);
  }
}

Answer 1

我认为您正在寻找 get 函数：https://p5js.org/reference/#/p5/get

应该像这样工作：

function draw() {
  checkMouseWallCollision();
}

function checkMouseWallCollision() {
  let colorAtMouse = get(mouseX, mouseY);
  if (isWallColor(colorAtMouse)) {
    // The users mouse is over a wall
  }
}

function isWallColor(color) {
  let wallColor = color("#c4ecff");
  return wallColor.equals(color);
}