ちょっとキャンバスを忘れて

どういうわけか、近年のさまざまなブラウザーのデモを考えると、誰もが一般的にキャンバスを使用し始めたことに気づかずにはいられませんでした。
それで最近、ハブを見て、 javascriptのwolf3dをキャンバスで見つけました （マリオと同じ著者から）。 （リンクでは、文字cとpはロシア語ですが、私はそうではなく、ハブラーです）
しかし実際には、この素晴らしいタグを使用せずに多くの効果を実行できます。
また、これらのアイデアを使用して、場合によってはフラッシュを拒否できます。特に、canvasとは異なり、IEですべて正常に動作します（市場シェアは依然として非常に大きいため）。




たとえば、同じWolf3Dを考えてみましょう。
レンダリングテクノロジーはRayCastingに基づいています 。
要するに、画像はさまざまな列から形成され、列ごとに、ビームが視点から「放出」され、壁に「到達」します。 柱の高さは、梁の長さに反比例します。

画像が多くの垂直線から形成されることは、私たちにとって特に重要です。
各行は、テクスチャからの列であり、目的の高さに縮小（またはその逆）されます。
また、ブラウザはこれらの写真を拡大および縮小するのに非常に優れています。

1つの問題が残っていました-写真から目的の列を選択します。 より正確には、これはまったく問題ではありません。これらは通常のcssスプライトなので、次のように（たとえば）これを行います。

   <div style = "position：absolute; top：0px; left：0px; width：1px; height：256px; overflow：hidden;">
     <img src = "wall.png" style = "幅：256px;高さ：128px;位置：絶対値;上：64px;左：-32px;"  alt = "" />
   </ div>

この同じ列を取得します。

また、レイキャスティング+ css-spritesを使用すると、すべてのブラウザーで動作する興味深いものを取得できます。
（まあ、ほぼ:) 、IE6、IE7、FF2、FF3、Opera、およびSafariでテスト済み）。
IEユーザーへの注意：エクスプローラーは何らかの形で初めて要素を描画するため、ページを読み込むときに興味深いアーティファクトが観察されます（ちなみに、アーティファクトはアーティファクトですが、既にマップを自分で実行できます）。

サンプルを作成するには、そこにスプライト（ランプ、モンスターなど）を追加し、手動描画（ キャンバスを使用）とは対照的に、
列ごとに描画する必要はありません。各列を既に描画されているもののz-indexと比較します。 代わりに、同じ名前のcssプロパティを設定できます。
ブラウザがそれを行います。

もちろん、技術の適用はシューティングゲームの作成に限定されません:) 。
必要のないことは1つだけです。テーブルに組み込まれたdivを使用してキャンバスをエミュレートします。 これは非常に遅くなります（特にIEでは）。

ところで、PSテクノロジは新しいものではありません。 ブラウザのデモ仲間で彼女を初めて見たとき。 ガスマン-2年前。

更新： IEのCanvasエミュレーションは、写真よりもさらに遅くなります （ ご自身で確認してください ）。 したがって、ブラウザ間の互換性が必要な場合は、フラッシュまたは画像のいずれかを使用します。

更新2：コメントは、キャンバス/写真/歌姫の3Dの形でのVelisipedの発明の無益さをしばしば言及しています。 しかし、私の目標は3Dエンジンを書くことではなく、興味深い方法の使用を示すことだけであったことに注意してください。 投稿を書いている時点で、キャンバス上のwolf3dに感銘を受けたのは、まさに星が形成された方法です。