横向きの「アイソメ」ビューと透明なタイルを使用する Web アプリ/ゲームを作成しようとしています。各 div (各タイル) を position:absolute として設定し、top と left のパラメーターを設定する PHP 数式を使用して、それらを問題なく表示できます (ただし、あまり良くありません)。問題は、タイルのクリックをキャッチして、透明なビットを持つタイルがその下のタイルにクリックスルーできるようにする方法です。
私の問題の例はhttp://stuff.adammw.homeip.net/other/fv/farmville_2.htmlにあります
タイル要素は常に長方形であるため、タイル要素自体でこれを行うことはできません。すべてのタイルを含む親要素内でマウスの位置を監視し、どのピクセルがどのタイルに対応するかを手動で判断する必要があります。
タイルへの位置のアイソメトリック マッピングの場合、これは簡単ですが、ポイントの位置を「地上」の場所として使用することになります。画像のマスク データを使用して、地面の前にレンダリングされる木のようなオブジェクトのヒット テストを行うことはできません。(それでもやりたいですか? 現在、いくつかの木はその下の地面タイルを完全に覆い隠しています。)
イメージ マスクに対するヒット テストが本当に必要な場合は、次のことができます。
a. 画像からマスク データを抽出するスクリプトを作成し、それをエンコードされたバイナリ ビットマスクとして JavaScript ソースに含めます。私は JavaScript ゲームの衝突検出のためにこれを行いましたが、多くのスペースが必要になる可能性があり、グラフィックを更新するときにデータを再エクスポートする必要があるため、あまり面白くありません。
b. <canvas>とを使用して、テスト用のイメージ データを抽出しますgetImageData。すでに IE ユーザーを失っていることを考えると、その時点で、キャンバスをレンダリングにも使用することを検討するかもしれません。
css3 変換、または IE のマトリックス変換を使用する必要があります。
構文は次のようになります。
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
いくつかの良い例:
http://www.fofronline.com/experiments/cube/index.html
http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
これはタイル ベースのゲームであるため、単純な数式を使用して、ユーザーが操作しているタイルを特定する必要があります。JavaScript を使用して、クリックまたはその他のアクションの座標を決定します。次に、どのタイルに作用するかを計算するためにいくつかの計算を行います。それは理にかなっていますか？
そうでなければ、ボビンスに同意します。あなたのアプローチはおそらく簡単には機能しません。