HTML5 に基づく WebGL 3D バージョンの Tetris のサンプル コード

概要: 2D テトリスは人々の評判が悪いので、思いつきでテトリスをプレイするための 3D ゲーム機を作りました。 。 。実装の基本的な考え方は、まずテトリスのミニゲームを 2D で実装し、次に 3D モデリング機能を使用して 3D アーケード モデルを作成し、最後に 2D ミニゲームを 3D モデルに貼り付けることです。

（追記：最後の拡張部分ではビデオと3Dモデルの組み合わせを実現しています）

http://www.hightopo.com/demo/tetris/

まずは2Dミニゲームをクリアする

公式ドキュメントを確認する過程で、HTのコンポーネントパラメータはht.DataModel()オブジェクトに格納されており、データモデルをビューにロードした後にさまざまな特殊効果が表示されることがわかりました。

 gameDM = new ht.DataModel(); //データ モデルを初期化します g2d = new ht.graphView(gameDM) //2D ビューを初期化します g2d.addToDOM(); //ページ上にビューを作成します

ゲームモデルの作成を開始する

最初のステップは、ゲームのフレームを作成し、ゲームの範囲を定義することです。このドキュメントでは、ht.Node がノード プリミティブをレンダリングするためのgraphView の基本クラスであり、画像を表示するだけでなく、さまざまな事前定義されたグラフィックスもサポートできることがわかります。そこで、このクラスを使用して 4 つの四角形を作成し、それらを使用してゲームのスコープを設定します。

 var lineNode = new ht.Node();lineNode.s({shape: rect, //長方形のshape.background: #D8D8D8, //背景色を設定しますshape.border.width: 1, //境界線の幅1の形状。 border .color: #979797 // 境界線の色 }); lineNode.setPosition(x, y); // 要素の表示位置を設定します。左上隅が 0 です。 0 プリミティブの座標はその中心位置を指します lineNode.setSize(width, height) // プリミティブの幅と高さの属性を設定します gameDM.add(lineNode); // 設定されたプリミティブ情報をデータ モデルに追加します

x:552、y:111、幅:704、高さ:22 を設定すると、最初のグラフィックを取得できます。

境界線の上部はすでにそこにあります。ここで、さらに 3 つの辺を作成してフレームを形成しましょう。

 x:211、y:562、幅:22、幅:880x:893、y:562、幅:22、幅:880x:552、y:1013、幅:704、幅:22

結果は次のとおりです。

境界線は基本的に完成しました。ブラウズ中に、4 つの境界線をドラッグできることがわかりました。次に、境界線の初期化方法を調整します。

 lineNode.s({shape: rect, //長方形shape.background: #D8D8D8, //背景色を設定しますshape.border.width: 1, //枠線の幅1shape.border.color: #979797, //Border color 2d.editable : false, // 編集可能かどうか 2d.movable : false, // 移動可能かどうか 2d.selectable : false // 選択可能かどうか });

正方形を生成するために、私のアイデアは、複数の正方形を生成し、それらを組み合わせて必要なグラフィックスを作成し、座標計算によって対応する位置に配置することです。

ブロックが生成されたら、グラフィックス上で回転操作を開始します。解決策は 2 つあります。1 つ目は、反転したグラフィックスの座標を配列に順番に保存し、形状が変更されるたびに、配列内の前後の座標セットを取得して変更を加える方法です。 ht.Block() オブジェクトを使用して、対応するプリミティブを全体に結合します。変形するときは、対応する方向に 90 度を選択するだけです。ここでは 2 番目の方法を選択しました。コードは次のとおりです。

関数 createUnit(x, y) { var ノード = new ht.Node(); ノード.s({ 形状: 長方形、形状.背景: #D8D8D8、形状.border.width: 1、形状.border.color: #979797 }); ノード.setPosition(x, y);ノード;}var block = new ht.Block();block.addChild(createUnit(552, 133));block.addChild(createUnit(552, 89));block.addChild(createUnit(508, 133));block .addChild(createUnit(596, 133));block.setAnchor(0.5, 0.75); //このポイントは回転時に設置されます。block.setPosition(552, 144);

ブロックは、以下に示すように中心点アンカーを設定します。

回転を設定するときは、setRotation 関数を使用してブロックを回転します。