HTML5 Leinwand - Cinema Seating Plan, versucht, Sitze zu grünen und roten Sitze zu bekommen nicht verfügbar zu sein

Question

Ich versuche, einen Sitzplan für eine Kino-Website zu erstellen, ich versuche, in HTML5 Canvas zu entwickeln. Was ich bis jetzt habe, können Sie unten sehen.

Was ich versuche zu tun ist eine Mouseover-Funktion, so dass, wenn es ein graues Quadrat berührt, der Sitz grün wird und wenn Sie über einen roten Sitz bewegen, erscheint eine Meldung, dass Sitz nicht verfügbar ist.

Ich wäre dankbar, wenn jemand mir helfen könnte, dieses Problem zu lösen, da ich meine Haare drüber ziehe!

Dank Mühle,

Lauren :)

Teilcode:

[Code 2] [3]

Answer 1

Das muss viel Arbeit gewesen sein, jeden Platz individuell zeichnen! Erfassen von Mausbewegung wird mit so vielen hartcodierte Stellen hart sein, zu behandeln, aber Sie werden leichter mit den Sitzen in Wechselwirkung haben, wenn man sich in einer Schleife ziehen, etwa so:

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(...); 

    } 
} 

zu implementieren mouseIsOnSeat Sie können einen Listener mousemove hinzufügen, der die Mausposition verfolgt und dann überprüft, ob er innerhalb der Koordinaten liegt, und dabei dieselbe Berechnung verwenden, um zu wissen, wo der Sitz gezeichnet werden soll.