半透明のクリックスルーのタイルとHTML / JS / CSSアイソメグリッド

Question

私は、サイドの「アイソメトリック」ビューと透明タイルを使用するWebアプリ/ゲームを作成しようとしています。絶対的なトップと左のパラメータを設定します。私はちょうど位置として各div要素（各タイル）を設定PHPの式を使用して、[OK]（しかし素晴らしいではありません）、それらを表示することができます。問題は、私はタイルのクリックをキャッチし、透明ビットのタイルがクリックスルー、その下のタイルを聞かせて行う方法です。

//stuff.adammw.homeip：

私の問題の例は、のhttpであります.NET /その他/ FV / farmville_2.htmlする

Answer 1

彼らは常に長方形であるとして

あなたは、タイル要素自体でこれを行うことはできません。あなたはすべてのタイルを含む親要素内でマウスの位置を監視し、手動でピクセルがどのタイルに対応するうまくする必要があります。

位置の等角マッピングのためのタイルに、これは簡単だろうが、それは「地面に」場所として点位置を取ることになります。それはあなたが地面の前でレンダリング木のようにオブジェクト・テスト・ヒットする画像のマスクデータを使用することはできません。 （あなたがとにかくことをしたいですか？その下の地面のタイル現在、いくつかの木が完全に曖昧。）

あなたが本当に画像マスクに対するテストをヒットする必要がある場合は、次のことができます。

A。画像からマスクデータを抽出して符号化されたバイナリビットマスクとしてのJavaScriptソースに含めるためのスクリプトを書きます。私はJavaScriptのゲームにおける衝突検出のためにこれをやったが、それは多くのスペースを取ることができて、それは多くの楽しみではないですし、あなたがグラフィックスを更新するときにデータを再エクスポートする必要があります。

B。 <canvas>とgetImageDataを使用して試験するための画像データを抽出します。これで、あなたはすでにIEユーザーを失っているだろうことを考えると、あまりにもレンダリングするためのキャンバスを使用して検討するかもしれない指し示すます。

Answer 2

あなたは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/する

Answer 3

これはタイルベースのゲームですので、

、多分あなただけのユーザーが簡単な数式を使用してと対話しているタイルを判断する必要があります。クリックまたは他のアクションの座標を決定するために、いくつかのJavaScriptを使用してください。その後、上の行動するかをタイルを把握するために、いくつかの算術演算を行います。それは理にかなっていますか？

そうでなければ、私はbobinceに同意します。あなたがアプローチしている、おそらく簡単に動作しません。