何年もの間、ドラッグアンドドロップゲーム、特に回転、空間論理、パズル解決を含むゲームは、JavaScriptの排他的なドメインであると信じていました。ある日まで、私はAIに尋ねました：

「CSSのみを使用して、完全にインタラクティブなタングラムパズルゲームを構(gòu)築することは可能ですか？」

答え： 「いいえ - そうではありません。JavaScriptが必要です。」それが私がそうでなければ証明するために必要なすべての動機(jī)でした。

しかし、最初に、明らかな質(zhì)問をしましょう：なぜ誰かがこれをするのでしょうか？

良い…

• インタラクティブなUIの作成においてCSSをどれだけプッシュできるかを知るため。
• 私のCSSスキルを向上させるため。
• そして、それは楽しいです！

けっこうだ？

さて、ここに驚くことのない真実があります。CSSはこれに対して正確に作られていません。それは論理言語ではなく、正直に言って、特にダイナミックではありません。 （確かに、CSS変數(shù)といくつかの便利な組み込み関數(shù)があります、hooray！）

JavaScriptでは、機(jī)能、ループ、條件、オブジェクト、比較の観點(diǎn)から自然に考えます。ロジックを書き込み、抽象化するものをメソッドに書き込み、最終的にはブラウザが理解するバンドルを出荷します。出荷されたら？その最終的なJavaScriptバンドルを見ることはめったにありません。私たちはそれを無駄のない狀態(tài)に保つことに焦點(diǎn)を當(dāng)てています。

さて、自問してみてください：それはまさにSASSがCSSに対して行うことではありませんか？

ミキシンと機(jī)能を使用してそれを生成することができるのに、繰り返しのCSSの無限のラインを手に入れる必要があるのはなぜですか？出力が最適化されている限り、かかる線の數(shù)をきれいに、効率的に、そして気にせずに？

そのため、少なくとも低レベルのロジックとパズルの動作に関しては、SASSがJavaScriptを置き換えることができることがわかります。マップ、ミキシン、機(jī)能、多くの數(shù)學(xué)だけで、タングラムのパズルを?qū)g現(xiàn)することができましたが、JavaScriptは必要ありませんでした。

（CSSのみの）ゲームを開始しましょう！ ??

ゲーム

ゲームは、クラシックタングラムセットの7つのピースで構(gòu)成されています。當(dāng)然のことながら、これらのピースは完璧な正方形（および他の多くの形狀も）に配置できます。しかし、靜的な部分以上のものが必要です。

だからここに私が構(gòu)築しているものがあります：

• プレーヤーが再作成しなければならないターゲットの形狀であるパズルの目標(biāo)。
• すべてのピースをステージング領(lǐng)域にシャッフルするスタートボタン。
• 各ピースはクリック可能でインタラクティブです。
• パズルは、ユーザーがピースを間違えたときに知らせ、パズルを終了したときに祝う必要があります。

HTML構(gòu)造

私は、関係する要素の數(shù)を考慮して、HTML構(gòu)造をセットアップすることから始めましたが、これは小さなタスクではありません。

• 各形狀には7つのラジオボタンが與えられました。私は、組み込みの獨(dú)占性を活用するために、チェックボックスでラジオを選択しました。同じグループ內(nèi)で選択できるのは1つだけです。これにより、どの形狀と狀態(tài)が現(xiàn)在アクティブであるかを追跡するのがはるかに簡単になりました。
• スタートボタン？また、無線入力。チェックボックスも機(jī)能した可能性がありますが、一貫性のために、私は全面的にラジオに固執(zhí)しました。
• パズルマップ自體は単なる古いものです
  、シンプルで効果的です。
• 回転には、8つのラジオボタンを追加しました。それぞれが45°、90°、135°、360°まで45度の増分を表しています。これらは、CSSで完全に回転コントロールをシミュレートします。
• すべての潛在的な影の位置も獨(dú)自のラジオボタンを得ました。 （はい、それはたくさんです、私は知っています。）
• そしてそれをすべて包むために、私は中に古典的なリセットボタンを含めました
  使用して、プレイヤーはいつでも簡単にやり直すことができます。

  必要な要素の數(shù)を考えると、PUGを使用してHTMLをより効率的に生成しました。それは純粋に便利な選択でした。パズルのロジックや動作に決して影響しません。

  以下は、コンパイルされたHTMLのサンプルです。一見すると圧倒されるかもしれません（そして、これはその一部です！）が、関連する構(gòu)造的な複雑さを示しています。このセクションは、畫面を核にしないように崩壊しますが、探索したい場合は拡張できます。

  HTMLコードを開きます

  <div>
    <div></div>
    <div></div>
    <form>
      <input type="checkbox" autofocus>
      <button type="reset">再起動</button>
      <label for="start">始める</label>
      <div>
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-active">
        <!-- Inputs for others tans -->
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-rotation">
        <input type="radio" name="tan-rotation">
        <!--radios for 90, 225, 315, 360 -->
  
        <input type="checkbox" name="tan-rotation">
        <input type="checkbox" name="tan-rotation">
        <!-- radio for every possible shape shadows-->
  
        <label for="rotation-45">?</label>
        <label for="rotation-90">?</label>
        <!--radios for 90, 225, 315, 360 -->
        <label for="rotation-reset">?</label>
  
        <label for="blueTriangle-tan"></label>
        <div></div>
        <!-- labels for every tan and disabled div -->
  
        <label for="blueTriangle-tan-1-90"></label>
        <label for="blueTriangle-tan-1-225"></label>
        <!-- labels radio for every possible shape shadows-->
        <div></div>
      </div>
    </form>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  形狀データのマップの作成

  HTMLスケルトンの準(zhǔn)備ができたので、今度は実際の力でそれを注入する時が來ました。それが私たちのSASSマップが入ってくる場所であり、ここでパズルロジックが輝き始めます。

  注： SASSのマップは、キーと値のペアを保持し、対応するキーで値を簡単に検索できるようにします。 JavaScriptのオブジェクト、Pythonの辭書、およびcのマップのように。

  各Tangramピース（TAN）を制御するために必要なすべてのコアデータをマッピングしています：その色、形狀、位置、さらには相互作用ロジックさえ。これらのマップには以下が含まれています。

  • 各日焼けのためのバックグラウンドカラー、
  • その形を定義するtheclip-pathinates、
  • 各日焼けの初期位置、
  • ブロッキングディブの位置（黃褐色が選択されたときに相互作用を無効にする）、
  • シャドウ位置（タスクボードに表示されるタンのシルエットの座標(biāo)）、
  • グリッド情報(bào)、および
  • 勝利の組み合わせ - 各日焼けの正確なターゲット座標(biāo)は、正しいソリューションをマークします。

   $ colors：（blue-color：＃53a0e0、yellow-color：＃f7db4f、 / *各tan * / * colors * /）;
  $ nth-child-grid：（1：（2、3、1、2、）、2：（3、4、1、2、）、4：（1、2、2、3、）、 / *追加するその他のエントリ * /）;
  $ BluePosiblePositions：（45：none、90：（（6.7、11.2））、135：none、180：none、 / * 360度まで定義された位置 * /）;
  / *その他の日焼け */
  
  / *各タンに対して定義されたデータ */
  $ TANSSHAPES：（
    Bluetriangle：（
      色：map.get（$ colors、blue-color）、
      クリップパス：（0 0、50 50、0 100、）、
      rot -btn -position：（-20、-25、）、
      exit-mode-btn-position：（-20、-33、）、
      タンポジション：（-6、-37、）、
      diable -lab -position：（-12、-38、）、
      ポジションポジション：$ BluePosiblePositions、
      正しい位置：（（4.7、13.5）、（18.8、13.3）、）、
      変換オリジン：（4.17、12.5、）、
    ）、、
  ）;
  
  / *殘りの7つの組み合わせ */
  $ winnowcombinations：（
    combo1 ：（
      （Bluetriangle、1、360）、
      （yellowtriangle、1、225）、
      （Pinktriangle、1、180）、
      （Redtriangle、4、360）、
      （purpletriangle、2、225）、
      （正方形、1、90）、
      （ポリゴン、4、90）、
    ）、、
  ）;

  これは、これらのマップが各パズルピースの実際の外観と動作を促進(jìn)するCodepenで動作していることがわかります。この時點(diǎn)で、プレビューに目に見える変化はありません。後で使用するためにデータを準(zhǔn)備して保存しました。

  ミキシンを使用して地図から読み取ります

  主なアイデアは、マップからデータを読み取り、必要に応じて対応するCSSルールに適用する再利用可能なミキシンを作成することです。

  しかし、それ以前は、1つの重要な決定を下すことで、物事をより高いレベルに引き上げました。マップ內(nèi)に直接固定されたユニットは決してありません。代わりに、使用されているときに任意の數(shù)値に目的のユニット（VMIN、PXなど）を動的に追加する再利用可能なユーティリティ関數(shù)を構(gòu)築しました。このようにして、いつマップを使用できますか？

   @function get-coordinates（$ data、$ key、$ separator、$ unit）{
    $座標(biāo)：null;
  
    //最初の引數(shù)がマップであるかどうかを確認(rèn)します
    @if meta.type-of（$ data）== "map" {
      //マップに指定されたキーが含まれている場合
      @if map.has-key（$ data、$ key）{
        //キーに関連付けられた値を取得します（座標(biāo)のリストになると予想されます）
        $ coordinates：map.get（$ data、$ key）;
      }
  
    //最初の引數(shù)がリストの場合
    } @else if meta.type-of（$ data）== "list" {
      //キーがリスト內(nèi)の有効なインデックス（1ベース）であることを確認(rèn)してください
      @if Meta.Type-of（$ key）== "number" and $ key> 0および$ key <p>確かに、プレビューにはまだ何も表示されていませんが、本物の魔法は今から始まります。</p><p>次に、ミックスインを書くことに進(jìn)みます。最初の混合物については、このアプローチについて詳しく説明します。殘りはコメントを通じて説明されます。</p><p>最初のMixinは、地図に保存されている値に基づいて、Grid-ColumnandGrid-rowplacementルールを子要素に動的に適用します。マップ內(nèi)の各エントリは、要素インデックス（1?8）に対応し、[start-col、end-col、start-row、end-row]の4つの値のリストが含まれています。</p><pre rel="SCSS" data-line=""> @mixin tanagram-grid-positioning（$ nth-child-grid）{
    //タナムピースに対応する數(shù)字1?8をループ
    @for $ i 1?8 {
  
      //マップに現(xiàn)在のピースのキーが含まれているかどうかを確認(rèn)します（1-8）
      @if map.has-key（$ nth-child-grid、$ i）{
  
        //この作品のグリッド値を取得します：[start-column、end-column、start-row、end-row]
        $ values：map.get（$ nth-child-grid、$ i）;
  
        // n番目の子供（ピース）をターゲットにし、グリッド位置を設(shè)定します
        ＆：nth-??child（＃{$ i}）{
          //グリッドコラムを設(shè)定：リスト內(nèi)の最初の2つの項(xiàng)目に基づいて値を開始して終了します
          grid-column：{list.nth（$ values、1）} /＃{list.nth（$ values、2）};
  
          //グリッドrowを設(shè)定：リスト內(nèi)の最後の2つの項(xiàng)目に基づいて値を開始して終了します
          グリッドロー：＃{list.nth（$ values、3）} /＃{list.nth（$ values、4）};
        }
      }
    }
  }

  次のCSSが生成されると期待できます。

   .tanagram-box：nth-??child（1）{
    グリッドコラム：2 /3;
    グリッドロー：1/2;
  }
  
  .tanagram-box：nth-??child（2）{
    グリッドコラム：3/4;
    グリッドロー：1/2;
  }

  この混合物では、私の目標(biāo)は実際にすべての形狀（tan）を作成することでした。私はclip-pathを使用しています。派手なSVG畫像を使用するアイデアがありましたが、このテストプロジェクトは、美しいデザインに焦點(diǎn)を當(dāng)てるのではなく、ロジックをテストすることに関するものです。このため、最も単純な解決策は、寸法がまだ正方形（すべてのTANの初期位置）にある間に要素をカットすることでした。

  したがって、この場合、靜的計(jì)算を通じて、$ TANSSHAPESMAPはTheClip-PathPropertyで更新されました。

  クリップパス：（0 0、50 50、0 100）;

  これには、すべての日焼けのクリップポイントが含まれています。本質(zhì)的に、この混合物はそれぞれそれぞれ日焼けします。

   @mixin set-tan-clip-path（$ tanname、$ values）{
    //空のリストを初期化して、最終的なクリップパスポイントを保持します
    $ Clip-Path-Points：（）;
  
    //座標(biāo)ペアを含むマップから「クリップパス」データを抽出します
    $ lip-path-key：map.get（$ values、lip-path）;
  
    //ループするための座標(biāo)ペアの數(shù)を取得します
    $ count：list.length（$ lip-path-key）;
  
    //各座標(biāo)ポイントをループします
    @$ $ i 1? $ count {
      //各ペアのペアをユニットでフォーマットされた座標(biāo)文字列に変換します
      $ current-point：get-coordinates（$ clip-path-key、$ i、 ""、 "％"）;
  
      //フォーマットされた座標(biāo)をリストに追加し、各ポイントをコンマで分離します
      $ lip-path-points：list.append（$ clip-path-points、＃{$ current-point}、comma）;
    }
  
    //設(shè)定された背景色を使用して、プレビュー要素（ラボバージョン）のスタイル
    #tan＃{$ tanname} lab {
      背景：map.get（$ values、color）;
      クリップパス：Polygon（＃{$ Clip-Path-Points}）; //クリップパスポイントの完全なリストを適用します
    }
  
    //同じクリップパスを?qū)g際の日焼け要素に適用します
    ＃{$ tanname} {
      クリップパス：Polygon（＃{$ Clip-Path-Points}）;
    }
  }

  CSSの出力は次のとおりです。

   .bluetriangle {
    クリップパス：ポリゴン（0％0％、50％50％、0％100％）;
  }
  / *その他の日焼け */

  ロジックを開始します

  さて、今、私はゲームがロードされたときに最初に何が起こるべきかを明確にしたいと思います。

  まず、スタートボタンをクリックすると、すべてのタンが「自分の位置に移動します」。実際には、それらをATRANSFORM：翻訳（）を特定の座標(biāo)と回転で割り當(dāng)てます。

   .start：checked?.shadow #tanbluetrianglelab {
    変換オリジン：4.17Vmin 12.5min;
    変換：翻訳（-6Vmin、-37vmin）回転（360deg）;
    カーソル：ポインター;
  }

  したがって、私たちはまだこのパターンを維持しています。 TansとTans Boardの影の両方の位置または角度（マップ內(nèi)）を変換して変更します。

  黃褐色がクリックされると、回転ボタンが表示されます。それをクリックすると、日焼けは中心を中心に回転する必要があり、これはその後のクリックごとに続きます。実際には8つのラジオボタンがあり、クリックするたびに1つが消え、次のボタンが消えます。最後の1つに到達(dá)すると、クリックすると消え、最初のものが再び現(xiàn)れます。このようにして、同じボタン（もちろん、同じようにスタイル）をクリックし、無限にクリック（TANを回転させる）ことができるという印象が得られます。これはまさに次のMixinが有効にするものです。

   @mixin set-tan-rotation-states（$ tanname、$ values、$ angles、$ color）{
    //このMixinは、TANの構(gòu)成に基づいて回転UIスタイルを動的に適用します。
    //回転狀態(tài)がアクティブな場合、回転ボタンの位置と外観と視覚フィードバックを制御します。
    @each $ angle in $ angles {
      ＆?＃rot＃{$ angle} {transform：translate（get-coordinates（$ values、rot-btn-position、 '、'、vmin））;背景：$ color;}
      ＆?＃rotation-＃{$ angle}：checked {
        @each $ key in map.keys（$ tansshapes）{
          ＆?＃tan＃{$ key} labres {visibility：visible;背景：RGBA（0,0,0,0.4）; }
          ＆?#Tan＃{$ key} lab {Opacity：.3; }
          ＆?＃rotreset {visibility：visible; }
        } 
      }
    }
  }

  そして、生成されたCSSは次のとおりです。

   ＃bluetriangle-tan：checked?1 rotation-45：checked? #tanbluetrianglelab {
    変換：翻訳（-6Vmin、-37vmin）回転（45DEG）;
  }
  
  ＃bluetriangle-tan：checked?1 rotation-45：checked? #tanbluetrianglelabres {
    可視性：隠された;
  }

  OK、次の混合物はTheset-Clip-Pathandset-RotationMixinsを使用します。それらには、TANとその動作に関するすべての情報(bào)が、TANがクリックされ、どの回転が選択されているか、およびその位置（2番目のミックスで定義されている）に関連しています。

   @mixin generate-tan-shapesとinterctions（$ tansshapes）{
  // $ TANSSHAPESマップから個々のTAN形狀ごとにスタイリングロジックとUIインタラクションを適用します。
    @each $ tanname、$ values in $ tansshapes {
      $ color：color.scale（map.get（$ values、color）、$ lightness：10％）; 
      $ angles：（45、90、135、180、225、270、315、360）; 
      @include set-tan-clip-path（$ tanname、$ values）;
  
      ## {$ tanname} -tan：checked {
        ＆?＃tan＃{$ tanname} res {visibility：hidden; }
        ＆?＃tan＃{$ tanname} lab {ofacity：1！falight; cultion：{$ color}; cursor：auto;}
        @each $ key in map.keys（$ tansshapes）{
            ＆?#tan＃{$ tanname} res：checked?＃tan＃{$ key} labres {visibility：visible;}
        }
        ＆?＃rot45 {display：flex; visibility：visible;}
        ＆?＃rotreset {transform：translate（get-coordinates（$ values、exit-mode-btn-position、 '、'、vmin））; }
        @include set-tan-rotation-states（$ tanname、$ values、$ angles、$ color）;
      }  
    }
  }

   @mixin set-initial-tan-position（$ tansshapes）{
  //このミックスインは、インタラクティブ（「ラボ」）とシャドウ（「Labres」）バージョンの両方の初期位置と変換を設(shè)定します
  // $ TANSSHAPESマップで提供される座標(biāo)に基づいて、各日焼けの形狀の。
   @each $ tanname、$ values in $ tansshapes {
      ＆?.shadow #Tan＃{$ tanname} lab {
        Transform-Origin：get-coordinates（$ values、transform-origin、 ''、vmin）;
        変換：翻訳（get-coordinates（$ values、tan-position、 '、'、 '、vmin））回転（360deg）;
        カーソル：ポインター;
      }
      ＆?.shadow #tan＃{$ tanname} labres {
        可視性：隠された;
        変換：翻訳（get-coordinates（$ values、diable-lab-position、 '、'、vmin））; 
      }
    }
  }

  前述のように、黃褐色がクリックされると、目に見えるものの1つはその影、つまりタスクボードに表示されるシルエットです。

  これらの影の位置（座標(biāo)）は現(xiàn)在、靜的に定義されています。各影にはマップ上に特定の場所があり、混合物がこのデータを読み取り、transform：translate（）を使用してシャドウに適用します。

  クリックされた日焼けが回転すると、タスクボードの目に見える影の數(shù)が変わる可能性があり、予想されます。

  もちろん、命名規(guī)則で特別な注意が払われました。各シャドウ要素は、名前（その親タンから継承された）から作られた一意のIDと、指定された角度のシーケンス位置を表す數(shù)値を取得します。

  かなりクールですよね？そうすれば、複雑な命名パターンを完全に避けます！

   @mixin render-possible-tan-positions（$ name、$ angle、$ posionpositions、$ visibility、$ color、$ id、$ transformorigin）{
      //このミックスインは、その名前、回転角、および構(gòu)成マップに基づいて、日焼け形狀の可能性のある位置のスタイルを生成します。
      //正方形とポリゴンの両方を処理し、それに応じて回転角度を正規(guī)化し、位置が存在する場合に変換スタイルを適用します。}
    @if $ name == 'Square' {
      $ angle：normalize-angy（$ angle）; // normalizujemo ugao ako je u pitanju Square
    } @else if $ name == 'polygon' {
      $ angle：normalize-polygon-anger（$ angle）;
    }
    @if map.has-key（$ ablingpositions、$ angle）{
      $ values：map.get（$ ablinesspositions、$ angle）;
  
      @if $ values！= none {
        $ count：list.length（$ values）;
  
        @$ $ i 1? $ count {
          $ position：get-coordinates（$ values、$ i、 '、'、vmin）;
          ＆?＃tan＃{$ name} lab-＃{$ i}  - ＃{$ angle} { 
            @if $ visibility == visible {
              可視性：表示されます。
              バックグラウンドカラー：$ color;
              不透明：.2;
              z-index：2;
              Transform-Origin：＃{$ transformorigin};
              変換：翻訳（＃{$ position}）回転（＃{$ angle} deg）;
            } @else $ visibility == hisdibility {visibility：hidden; }
            ＆：HOVER {不透明：0.5;カーソル：ポインター; }
          }
        }
      }
    }
  }

  生成されたCSS：

   ＃bluetriangle-tan：チェック済み?＃tanbluetrianglelab-1-360 {
    可視性：表示されます。
    バックグラウンドカラー：＃53A0E0;
    不透明：0.2;
    z-index：2;
    変換オリジン：4.17Vmin 12.5min;
    変換：翻訳（4.7vmin、13.5vmin）回転（360deg）;
  }

  この次のミックスは前のミックスに結(jié)び付けられており、親のタンがボタンを使用して回転している間に日焼けの影がいつどのように表示されるかを管理します?，F(xiàn)在の回転角度を聴き、その特定の角度に対して定義された影の位置があるかどうかを確認(rèn)します。ある場合、それはそれらを表示します。そうでない場合 - 影はありません！

   @mixin render-possible-positions-by -rotation {
     //この混合物は、各黃褐色の形狀に回転を適用します。各日焼けをループし、各角度の可能な位置を計(jì)算し、可視性と変換を処理します。
     //さまざまな日焼けの位置と視認(rèn)性狀態(tài)の間の遷移の処理を含む、回転が正しく適用されることを保証します。
   @each $ tanname、$ values in $ tansshapes {
      $ adablepositions：map.get（$ values、poss-positions）;
      $ possibletanscolor：map.get（$ values、color）;
      $ validposition：get-coordinates（$ values、recolt-position、 '、'、vmin）;
      $ transformorigin：get-coordinates（$ values、transform-origin、 ''、vmin）; 
      $ ROTSPOSITION：get-coordinates（$ values、exit-mode-btn-position、 '、'、vmin）;
      $ angle：0;
      @for $ i 1?8 {
        $ angle：$ i * 45;
        $ nextAngle：if（$ angle 45> 360、45、$ angle 45）;
        @include-position-feedback-on-task（$ tanname、$ angle、$ posionpositions、$ possibletanscolor、＃{$ tanname} -tan、$ validposition、$ transformorigin、$ rotesposition）;   
          ## {$ tanname} -tan {
          @include render-possible-tan-positions（$ tanname、$ angle、$ posingpositions、hidden、$ possibletanscolor、＃{$ tanname} -tan、$ transformorigin）
        }
          ## {$ tanname} -tan：checked {
            @include render-possible-tan-positions（$ tanname、360、$ adablepositions、visible、$ possibletanscolor、＃{$ tanname} -tan、$ transformorigin）;
            ＆?＃rotation-＃{$ angle}：checked {
              @include render-possible-tan-positions（$ tanname、360、$ ablingpositions、hidden、$ possibletanscolor、＃{$ tanname} -tan、$ transformorigin）;
              ＆?＃tan＃{$ tanname} lab {transform：translate（get-coordinates（$ values、tan-position、 '、'、 '、vmin））回転（＃{$ angle} deg）;}
              ＆?#Tan＃{$ Tanname} labres {visibility：hidden; }
              ＆?＃rot＃{$ angle} {visibility：hidden; }
              ＆?＃rot＃{$ nextangle} {visibility：visible} 
              @include render-possible-tan-positions（$ tanname、$ angle、$ posingpositions、visible、$ possibletanscolor、＃{$ tanname} -tan、$ transformorigin）;
          }
        }
      }
    }
  }

  タンの影がクリックされると、対応するタンはその影の位置に移動する必要があります。次の混合物は、この新しい位置がパズルを解くための正しい位置であるかどうかをチェックします。それが正しければ、日焼けは短い點(diǎn)滅効果を取得し、競爭できなくなり、それが正しく配置されていることを示しています。それが正しくない場合、タンは単に影の位置にとどまります。効果はなく、ドラッグ/クリック可能なままです。

  もちろん、各日焼けのすべての正しい位置のリストがあります。同じサイズを共有するものもあるため、いくつかのTANは組み合わせてより大きく既存の形狀を形成できるため、複數(shù)の有効な組み合わせがあります。このラクダのタスクのために、それらはすべて考慮されました。これらの組み合わせを備えた専用のマップが作成され、それらを読み取り、適用するミックスインが作成されました。

  ゲームの終わりに、すべての日焼けが正しい位置に配置されると、「マージ」効果をトリガーし、ラクダのシルエットが黃色になります。その時點(diǎn)で、殘りの唯一のアクションは、[再起動]ボタンをクリックすることです。

  まあ、それは長いものでしたが、それはあなたが楽しい（困難で長い）パスを選ぶときにあなたが得るものです。すべてがCSSのみの魔法へのオードとして！