HTML5 Canvas - 电影院座位计划，试图让所选座位成为绿色和红色座位不可用

Question

我正在尝试为我想在HTML5 Canvas中开发的电影网站创建一个座位计划。 到目前为止，您可以在下面看到。

我要做的是具有鼠标悬停功能，以便当它接触灰色方块时，座椅变为绿色，当您将鼠标悬停在红色座位上时，会显示一条消息，指出座位不可用。

如果有人能帮助我解决这个问题，我会感激不尽，因为我正在拔头发！

感谢Mill，

劳伦：）

部分代码：

[代码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侦听器，然后使用相同的计算检查坐标内的是否知道在哪里绘制座位。