HTML5 Canvas - Cinema Seating Plan、緑と赤の座席が利用できなくなるように選ばれた座席を取得しようとしています

Question

私はHTML5 Canvasで開発しようとしているシネマウェブサイトの座席計画を作成しようとしています。 私はこれまでのところ、以下を見ることができます。

マウスオーバー機能があり、グレーの四角にタッチするとシートが緑色に変わり、赤いシートをマウスオーバーすると、そのシートが利用できないことを示すメッセージが表示されます。

誰かがこの問題を解決するために私を助けることができたら、私はそれに私の髪を引き出していると私は感謝します！

おかげミル、

ローレン:)

部分コード：

[コード2] [3]

Answer 1

それは、それぞれの席を個別に描いているはずです。マウスの動きをキャプチャすることに対処するので、多くのハードコーディングされた場所でタフになりますが、あなたがループ内でそれらを描く場合はそうのように、座席との相互作用簡単に時間があるでしょう：mouseIsOnSeatを実装するために

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

    } 
} 

マウスの位置を追跡するリスナーをmousemoveと追加して、座席を描画する場所を知るために同じ計算を使用して座標内にあるかどうかを確認できます。