javascript - HTML5 Canvas - Cinema Seating Plan，试图让选择的座位变成绿色和红色的座位不可用

Question

我正在尝试为我尝试在 HTML5 Canvas 中开发的电影网站创建座位表。到目前为止，您可以在下面看到我所拥有的。

我想做的是有一个鼠标悬停功能，这样当它接触到一个灰色方 block 时，座位就会变成绿色，当你将鼠标悬停在一个红色座位上时，会出现一条消息，说明该座位不可用。

如果有人能帮我解决这个问题，我将不胜感激，因为我正在拔头发!

谢谢磨坊，

劳伦:)

部分代码:

[代码 2][3]

Answer 1

这一定是很多工作，分别绘制每个座位!由于要处理这么多硬编码位置，捕捉鼠标移动会很困难，但如果您将它们画成一个循环，您将更容易与座位互动，如下所示:

var row, seat;
for (row = 0; row < maxRows; row += 1) {
    for(seat = 0; seat < seatsPerRow; seat += 1) {

        if (mouseIsOnSeat(row, seat)) {
            ctx.fillStyle = 'green';
        } else if (seatIsReserved(row, seat)) {
            ctx.fillStyle = 'red';
        } else {
            ctx.fillStyle = 'grey';
        }

        // Draw the seat position here
        // (you can account for the aisle by first checking
        // the seat number and adding necessary padding)
        ctx.fillRect(...);

    }
}

要实现 mouseIsOnSeat，您可以添加一个 mousemove 监听器来跟踪鼠标位置，然后使用相同的计算来检查它是否在坐标内以了解在何处绘制鼠标座位。