多年來(lái)，我認(rèn)為拖放遊戲，尤其是涉及輪換，空間邏輯和拼圖解決方案的遊戲 - 是JavaScript的獨(dú)家領(lǐng)域。直到一天，我都問(wèn)AI：

“是否可以僅使用CSS構(gòu)建一個(gè)完全互動(dòng)的Tangram益智遊戲？”

答案： “不 - 不是。您需要JavaScript。”這就是我需要證明的所有動(dòng)力。

但是首先，讓我們問(wèn)一個(gè)明顯的問(wèn)題：為什麼有人會(huì)這樣做？

出色地…

• 知道CSS在創(chuàng)建交互式UI時(shí)可以推動(dòng)多遠(yuǎn)。
• 為了提高我的CSS技能。
• 很有趣！

很公平？

現(xiàn)在，這是毫不奇怪的事實(shí)：CSS並不是為此做出的。這不是邏輯語(yǔ)言，老實(shí)說(shuō)，它也不是特別動(dòng)態(tài)的。 （當(dāng)然，我們現(xiàn)在有CSS變量和一些方便的內(nèi)置功能，houray?。?/p>

在JavaScript中，我們自然會(huì)從功能，循環(huán)，條件，對(duì)象，比較方面進(jìn)行思考。我們將邏輯，抽象的內(nèi)容寫(xiě)入方法中，並最終運(yùn)送瀏覽器理解的捆綁包。一旦發(fā)貨？我們很少看那個(gè)最終的JavaScript捆綁包 - 我們只是專注於保持它的精益。

現(xiàn)在問(wèn)自己：這不是Sass對(duì)CSS的作用嗎？

當(dāng)我們可以使用Mixins和功能來(lái)生成它時(shí)，我們?yōu)槭颤N要手工編寫(xiě)無(wú)休止的重複CSS線 - 乾淨(jìng)，有效地生成它，並且只要優(yōu)化輸出，我們就可以使用Mixins和功能來(lái)清理，有效地生成多少線？

因此，我們將其進(jìn)行了測(cè)試，事實(shí)證明Sass可以替換JavaScript，至少在低級(jí)邏輯和拼圖行為時(shí)。除了地圖，混音，功能和大量數(shù)學(xué)之外，我們都設(shè)法使我們的Tangram難題栩栩如生，不需要JavaScript。

讓（僅CSS）遊戲開(kāi)始！ ??

遊戲

該遊戲由七個(gè)作品組成：經(jīng)典的Tangram套裝。自然，這些碎片可以佈置成一個(gè)完美的正方形（以及許多其他形狀）。但是我們不僅需要靜態(tài)碎片。

所以這就是我正在建立的：

• 拼圖目標(biāo)，這是玩家必須重新創(chuàng)建的目標(biāo)形狀。
• 一個(gè)開(kāi)始按鈕，將所有碎片都放入舞臺(tái)區(qū)域。
• 每個(gè)作品都是可點(diǎn)擊且交互式的。
• 難題應(yīng)該讓用戶知道何時(shí)弄錯(cuò)了一件，並在完成難題時(shí)慶祝。

HTML結(jié)構(gòu)

我首先設(shè)置HTML結(jié)構(gòu)，這並不是一件很小的任務(wù)，考慮到涉及的元素?cái)?shù)量。

• 每個(gè)形狀都得到了七個(gè)無(wú)線電按鈕。我在復(fù)選框上選擇了收音機(jī)來(lái)利用它們的內(nèi)置排他性。在同一組中只能選擇一個(gè)。這使跟蹤哪個(gè)形狀和狀態(tài)當(dāng)前處?kù)痘顒?dòng)狀態(tài)變得更加容易。
• 開(kāi)始按鈕？也是無(wú)線電輸入。一個(gè)複選框也可以工作，但是為了保持一致性，我全面紮根了收音機(jī)。
• 拼圖圖本身只是一個(gè)普通的舊
  ，簡(jiǎn)單有效。
• 對(duì)於旋轉(zhuǎn)，我們添加了八個(gè)無(wú)線電按鈕，每個(gè)按鈕代表45度增量：45°，90°，135°，一直到360°。這些模擬旋轉(zhuǎn)完全控制在CSS中。
• 每個(gè)潛在的陰影位置也都有自己的廣播按鈕。 （是的，我知道很多。）
• 為了將其全部包裹起來(lái)，我在一個(gè)內(nèi)包含一個(gè)經(jīng)典的重置按鈕
  使用，因此玩家可以在任何時(shí)候輕鬆重新開(kāi)始。

  考慮到所需的元素?cái)?shù)量，我使用PUG更有效地生成HTML。這純粹是方便的選擇。它不會(huì)以任何方式影響難題的邏輯或行為。

  以下是編譯的HTML的樣本。乍一看，它看起來(lái)可能不堪重負(fù)（這只是其中的一部分?。f(shuō)明了所涉及的結(jié)構(gòu)複雜性。本節(jié)倒塌以不核定屏幕，但是如果您想探索它，則可以擴(kuò)展。

  打開(kāi)HTML代碼

  <div>
    <div></div>
    <div></div>
    <form>
      <input type="checkbox" autofocus>
      <button type="reset">重新啟動(dòng)</button>
      <label for="start">開(kāi)始</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>

  為形狀數(shù)據(jù)創(chuàng)建地圖

  現(xiàn)在，HTML骨架已經(jīng)準(zhǔn)備好了，是時(shí)候給它注入一些真正的力量了。那是我們的Sass地圖進(jìn)入的地方，這是拼圖邏輯開(kāi)始發(fā)光的地方。

  注意： SASS中的地圖保存對(duì)鍵和值對(duì)，並使其易於通過(guò)其相應(yīng)的鍵查找值。就像javaScript中的對(duì)像一樣，python中的字典以及c。

  我正在繪製控制每個(gè)Tangram作品（TAN）所需的所有核心數(shù)據(jù)：其顏色，形狀，位置甚至相互作用邏輯。這些地圖包含：

  • 每棕褐色
  • 定義其形狀的theclip-pathcoordin
  • 每個(gè)棕褐色的初始位置，
  • blockingDiv的位置（選擇棕褐色時(shí)會(huì)禁用相互作用），
  • 陰影位置（在任務(wù)板上顯示的棕褐色輪廓的坐標(biāo)），
  • 網(wǎng)格信息，以及
  • 獲勝組合 - 每個(gè)棕褐色的確切目標(biāo)坐標(biāo)，標(biāo)記正確的解決方案。

   $顏色：（藍(lán)色：＃53A0E0，黃色：＃f7db4f， / *每個(gè)tan * /）;
  $ nth-Child-Grid：（1：（2，3，1，2，），2：（3，4，1，2，），4：（1，2，2，3，）， / *要添加更多條目 * /）;
  $ blueposiblePositions：（45：無(wú)，90：（（6.7，11.2），135：無(wú)，180：無(wú)， / *定義的位置最高為360度 * /）;
  / *其他曬黑 */
  
  / *為每個(gè)tan定義的數(shù)據(jù) */
  $ tanshapes ：（
    藍(lán)色：（（
      顏色：map.get（$顏色，藍(lán)色），
      剪輯 - （0 0，50 50，0 100，），），
      rot -btn位置：（-20，-25，），
      退出模式-BTN位置：（-20，-33，），，
      棕褐色：（-6，-37，），
      diable -lab位置：（-12，-38，），
      可能位置：$ blueposiblepositions，
      正確位置：（（4.7，13.5），（18.8，13.3），），），，
      轉(zhuǎn)化原始：（4.17，12.5，），
    ），
  ）；
  
  / *剩餘的7個(gè)組合 */
  $ winningCombinations ：（
    combo1 ：（
      （BlueTriangle，1，360），
      （Yellowtriangle，1，225），
      （Pinktriangle，1，180），
      （Redtriangle，4，360），
      （Purpletriangle，2，225），
      （Square，1，90），
      （Polygon，4，90），
    ），
  ）；

  您可以在Codepen上看到這一點(diǎn)，其中這些地圖驅(qū)動(dòng)了每個(gè)拼圖的實(shí)際外觀和行為。在這一點(diǎn)上，預(yù)覽尚無(wú)明顯的變化。我們只是準(zhǔn)備好並存儲(chǔ)數(shù)據(jù)以供以後使用。

  使用Mixin從地圖上讀取

  主要想法是創(chuàng)建可重複使用的混合物，該混合蛋白將在需要時(shí)從地圖中讀取數(shù)據(jù)並將其應(yīng)用於相應(yīng)的CSS規(guī)則。

  但是在此之前，我們通過(guò)做出一個(gè)關(guān)鍵決定將事物提升到更高的水平：我們從不直接在地圖內(nèi)進(jìn)行硬編碼。取而代之的是，我們構(gòu)建了一個(gè)可重複使用的效用函數(shù)，該功能將所需的單元（例如，VMIN，PX等）動(dòng)態(tài)地添加到任何數(shù)字值時(shí)。這樣，我們什麼時(shí)候可以使用我們的地圖。

   @function get-coordinates（$ data，$ key，$ saparator，$ unit）{
    $坐標(biāo)：null;
  
    //檢查第一個(gè)參數(shù)是否是地圖
    @if meta.type-of（$ data）==“ map” {
      //如果地圖包含指定的密鑰
      @if map.has-key（$ data，$ key）{
        //獲取與密鑰關(guān)聯(lián)的值（預(yù)計(jì)將是坐標(biāo)列表）
        $坐標(biāo)：map.get（$ data，$ key）;
      }
  
    //如果第一個(gè)參數(shù)是列表
    } @else如果meta.type-of（$ data）==“ list” {
      //確保密鑰是列表中的有效索引（基於1）
      @if meta.type-of（$ key）==“ number”和$ key> 0和$ key <p>當(dāng)然，迄今為止，沒(méi)有什麼都沒(méi)有出現(xiàn)，但是真正的魔術(shù)現(xiàn)在開(kāi)始了。</p><p>現(xiàn)在，我們繼續(xù)寫(xiě)Mixins。我將詳細(xì)說(shuō)明第一個(gè)混合物的方法，其餘的將通過(guò)評(píng)論來(lái)描述。</p><p>第一個(gè)混合蛋白根據(jù)映射中存儲(chǔ)的值動(dòng)態(tài)地將其應(yīng)用於兒童元素上。地圖中的每個(gè)條目都對(duì)應(yīng)於元素索引（1至8），並包含四個(gè)值的列表：[start-col，end-col，start-low，start-low，end-row]。</p><pre rel="SCSS" data-line=""> @mixin tanagram-Grid-position（$ nth-child-Grid）{
    //循環(huán)通過(guò)數(shù)字1到8，對(duì)應(yīng)於Tanam零件
    @for $ i從1到8 {
  
      //檢查地圖是否包含當(dāng)前作品的鑰匙（1-8）
      @if map.has-key（$ nth-child-grid，$ i）{
  
        //獲取此作品的網(wǎng)格值：[啟動(dòng)柱，末端柱，啟動(dòng)行，終排]
        $ values：map.get（$ nth-child-Grid，$ i）;
  
        //針對(duì)第n個(gè)孩子（件）並設(shè)置其網(wǎng)格位置
        ＆：nth-????child（＃{$ i}）{
          //設(shè)置網(wǎng)格列：基於列表中的前兩個(gè)項(xiàng)目的啟動(dòng)和結(jié)束值
          網(wǎng)格列：＃{list.nth（$ values，1）} /＃{list.nth（$ values，2）};
  
          //設(shè)置網(wǎng)格行：基於列表中的最後兩個(gè)項(xiàng)目的啟動(dòng)和結(jié)束值
          網(wǎng)格行：＃{list.nth（$ values，3）} /＃{list.nth（$ values，4）};
        }
      }
    }
  }

  我們可以期望生成以下CSS：

   .tanagram-box：nth-????child（1）{
    網(wǎng)格列：2 /3;
    網(wǎng)格行：1/2；
  }
  
  .tanagram-box：nth-????child（2）{
    網(wǎng)格列：3 /4；
    網(wǎng)格行：1/2；
  }

  在這種混合物中，我的目標(biāo)實(shí)際上是創(chuàng)建所有形狀（棕褐色）。我正在使用clip-path。有一些想法使用精美的SVG圖像，但是這個(gè)測(cè)試項(xiàng)目更多是關(guān)於測(cè)試邏輯，而不是專注於精美的設(shè)計(jì)。因此，最簡(jiǎn)單的解決方案是根據(jù)尺寸在正方形（所有曬黑的初始位置）時(shí)根據(jù)尺寸切割元素。

  因此，在這種情況下，通過(guò)靜態(tài)計(jì)算，$ tanshapesmap通過(guò)theclip-pathproperty進(jìn)行了更新：

  剪輯 - （0 0，50 50，0 100）;

  這包含所有棕褐色的剪輯點(diǎn)。從本質(zhì)上講，這種混合物形成每個(gè)棕褐色。

   @mixin set-tan-clip-path（$ tanname，$ values）{
    //初始化一個(gè)空列表以保留最終的剪貼電池點(diǎn)
    $ clip-path-Points：（）;
  
    //從地圖中提取“剪輯路徑”數(shù)據(jù)，其中包含坐標(biāo)對(duì)
    $ clip-path-key：map.get（$ values，clip-path）;
  
    //獲取坐標(biāo)對(duì)循環(huán)的坐標(biāo)數(shù)
    $ count：list.length（$ clip-path-key）;
  
    //循環(huán)穿過(guò)每個(gè)坐標(biāo)點(diǎn)
    @for $ i從1到$ count {
      //將每對(duì)數(shù)字轉(zhuǎn)換為帶有單位的格式化坐標(biāo)字符串
      $ current-point：get-coordinates（$ clip-path-key，$ i，“”，“”％）;
  
      //將格式的坐標(biāo)添加到列表中，用逗號(hào)分開(kāi)每個(gè)點(diǎn)
      $ clip-path點(diǎn)：list.append（$ clip-path-points，＃{$ current-point}，comma）;
    }
  
    //使用配置的背景顏色的預(yù)覽元素（實(shí)驗(yàn)室版本）的樣式
    #tan＃{$ tanname} lab {
      背景：map.get（$ values，color）;
      剪輯 -  path：polygon（＃{$ clip-path-points}）; //應(yīng)用剪貼電池點(diǎn)的完整列表
    }
  
    //將相同的剪輯路徑應(yīng)用於實(shí)際的棕褐色元素
    。 ＃{$ tanname} {
      剪輯 -  path：polygon（＃{$ clip-path-points}）;
    }
  }

  CSS中的輸出應(yīng)為：

   .bluetriangle {
    剪輯路徑：多邊形（0％0％，50％50％，0％100％）；
  }
  / *其他曬黑 */

  啟動(dòng)邏輯

  好吧，現(xiàn)在我想澄清遊戲加載時(shí)應(yīng)該首先發(fā)生的事情。

  首先，單擊“開(kāi)始”按鈕，所有曬黑都“轉(zhuǎn)到他們的位置”。實(shí)際上，我們將它們分配給Atransform：Translate（）具有特定坐標(biāo)和旋轉(zhuǎn)。

   .START：檢查?。
    轉(zhuǎn)化原始：4.17Vmin 12.5Vmin;
    變換：translate（-6vmin，-37vmin）旋轉(zhuǎn)（360DEG）;
    光標(biāo)：指針；
  }

  因此，我們?nèi)匀槐３诌@種模式。我們使用變換，並簡(jiǎn)單地更改棕褐色及其陰影的位置或角度（在地圖中）。

  單擊任何棕褐色時(shí)，出現(xiàn)旋轉(zhuǎn)按鈕。通過(guò)單擊它，棕褐色應(yīng)圍繞其中心旋轉(zhuǎn)，然後在每次隨後的單擊中繼續(xù)進(jìn)行。實(shí)際上有八個(gè)無(wú)線電按鈕，每次點(diǎn)擊時(shí)，一個(gè)都會(huì)消失，而下一個(gè)按鈕出現(xiàn)。當(dāng)我們到達(dá)最後一個(gè)時(shí)，單擊它會(huì)消失，而第一個(gè)重新出現(xiàn)。這樣，我們就會(huì)得到單擊相同按鈕（當(dāng)然是相同的樣式）並能夠無(wú)限單擊（旋轉(zhuǎn)棕褐色）的印象。這正是以下混合素啟用。

   @mixin set-tan-rotation-states（$ tanname，$ values，$ angles，$ color）{
    //此Mixin根據(jù)TAN的配置動(dòng)態(tài)應(yīng)用旋轉(zhuǎn)UI樣式。
    //當(dāng)旋轉(zhuǎn)狀態(tài)處?kù)痘顒?dòng)狀態(tài)時(shí)，它控制旋轉(zhuǎn)按鈕和視覺(jué)反饋的定位和外觀。
    @each $ angle in $ angles {
      ＆?#ROT＃{$ angle} {transform：translate（get-coordinates（$ values，rot-btn-position，'，'，'，vmin））;背景：$ color;}
      ＆?＃rotation-＃{$ angle}：檢查{
        @each $ key in map.keys（$ tanshapes）{
          ＆?#tan＃{$ key} labres {可見(jiàn)性：可見(jiàn);背景：RGBA（0,0,0,0.4）; }
          ＆?#tan＃{$ key} lab {opacity：.3; }
          ＆?#rotreset {可見(jiàn)性：可見(jiàn); }
        } 
      }
    }
  }

  生成的CSS應(yīng)該是：

   ＃bluetriangle-tan：檢查?＃rotation-45：檢查?#tanbluetrianglelab {
    變換：translate（-6vmin，-37vmin）旋轉(zhuǎn)（45DEG）;
  }
  
  ＃BlueTriangle-Tan：檢查?＃rotation-45：檢查?#tanbluetrianglelabres {
    可見(jiàn)性：隱藏；
  }

  好的，以下混合蛋白使用theset-clip-pathsetset-rotationMixins。它們包含有關(guān)TAN的所有信息及其行為與棕褐色的單擊以及選擇哪個(gè)旋轉(zhuǎn)以及其位置（如第二個(gè)混合物中定義）。

   @mixin生成tan形狀和相互作用（$ tanshapes）{
  //從$ tanshapes地圖中為每個(gè)棕褐色形狀應(yīng)用樣式邏輯和UI交互。
    @each $ tanname，$ tanshapes中的$ values {
      $ color：color.scale（map.get（$ values，color），$ lightness：10％）; 
      $ ANGLE ：（ 45、90、135、180、225、270、315、360）; 
      @include set-tan-clip-path（$ tanname，$ values）;
  
      ## {$ tanname} -tan：檢查{
        ＆?#tan＃{$ tanname} res {visibility：hidden; }
        ＆?#tan＃{$ tanname}實(shí)驗(yàn){opacity：1！
        @each $ key in map.keys（$ tanshapes）{
            ＆?#tan＃{$ tanname} res：檢查?#tan＃{$ key} labres {visibility：cissible;}
        }
        ＆?＃rot45 {顯示：flex;可見(jiàn)性：可見(jiàn);}
        ＆?#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（$ tanshapes）{
  //此Mixin設(shè)置了交互式（``LAB'）和Shadow（`labRes'）版本的初始位置和轉(zhuǎn)換
  //每個(gè)棕褐色形狀，基於$ tanshapes地圖中提供的坐標(biāo)。
   @each $ tanname，$ tanshapes中的$ values {
      ＆?。 shadow #tan＃{$ tanname} lab {
        變換原始：get-coordinate（$ values，transform-origin，''，vmin）;
        變換：translate（get-coortinate（$ values，tan-position'，'，'，vmin））旋轉(zhuǎn)（360DEG）;
        光標(biāo)：指針；
      }
      ＆?。 shadow #tan＃{$ tanname} labres {
        可見(jiàn)性：隱藏；
        變換：轉(zhuǎn)換（get-coordinate（$ values，diable-lab-lib-position'，'，'，vmin））; 
      }
    }
  }

  如前所述，當(dāng)單擊棕褐色時(shí)，可見(jiàn)的一件事就是它的陰影 - 一個(gè)剪影，出現(xiàn)在任務(wù)板上。

  這些陰影位置（坐標(biāo)）當(dāng)前是靜態(tài)定義的。每個(gè)陰影在地圖上都有一個(gè)特定的位置，Mixin讀取此數(shù)據(jù)並將其應(yīng)用於使用Transform：translate（）的陰影。

  當(dāng)旋轉(zhuǎn)點(diǎn)擊棕褐色時(shí)，任務(wù)板上可見(jiàn)陰影的數(shù)量可能會(huì)改變，以及它們的角度。

  當(dāng)然，命名慣例受到特殊護(hù)理。每個(gè)影子元素都會(huì)獲得一個(gè)獨(dú)特的ID，該ID由名稱（從其父棕褐色繼承）和一個(gè)代表其在給定角度的序列位置的數(shù)字。

  很酷，對(duì)吧？這樣，我們完全避免了複雜的命名模式！

   @mixin渲染可及的tan位置（$ name，$ angle，$ aunderPositions，$ convibility，$ color，$ id，$ id，$ transformorigin）{
      //此混合蛋白根據(jù)其名稱，旋轉(zhuǎn)角度和配置圖生成樣式的棕褐色形狀。
      //它處理正方形和多邊形，將其旋轉(zhuǎn)角度歸一化，並在存在位置時(shí)應(yīng)用變換樣式。 }
    @if $ name =='square'{
      $ ANGLE：歸一化 - 角度（$ Angle）; // strumanizujemo ugao ako je u pitanju廣場(chǎng)
    } @else如果$ name =='polygon'{
      $ ANGLE：歸一化polygon-angle（$ Angle）;
    }
    @if map.has-key（$ aunterpositions，$ angle）{
      $ values：map.get（$ aughterPositions，$ angle）;
  
      @if $ values！ =無(wú){
        $ count：list.length（$ value）;
  
        @for $ i從1到$ count {
          $位置：get-coordinates（$ values，$ i，'，'，vmin）;
          ＆?#tan＃{$ name}實(shí)驗(yàn) - ＃{$ i}  - ＃{$ angle} { 
            @if $ visibility ==可見(jiàn){
              可見(jiàn)性：可見(jiàn)；
              背景色：$顏色；
              不透明度：.2;
              z索引：2;
              transform-origin：＃{$ transformorigin};
              變換：translate（＃{$ position}）旋轉(zhuǎn)（＃{$安排} deg）;
            } @Else如果$ visibility ==隱藏{可見(jiàn)性：隱藏; }
            ＆：懸停{不透明度：0.5;光標(biāo)：指針； }
          }
        }
      }
    }
  }

  生成的CSS：

   ＃bluetriangle-tan：檢查?＃tanbluetrianglelab-1-360 {
    可見(jiàn)性：可見(jiàn)；
    背景色：＃53A0E0;
    不透明度：0.2;
    z索引：2;
    轉(zhuǎn)化原始：4.17Vmin 12.5Vmin;
    變換：轉(zhuǎn)換（4.7Vmin，13.5Vmin）旋轉(zhuǎn)（360DEG）;
  }

  下一個(gè)混合物與上一個(gè)混合物綁定，並在使用該按鈕旋轉(zhuǎn)父母棕褐色時(shí)管理棕褐色陰影的何時(shí)以及如何出現(xiàn)。它聽(tīng)當(dāng)前旋轉(zhuǎn)角度，並檢查是否有針對(duì)該特定角度定義的陰影位置。如果有的話，它會(huì)顯示它們；如果沒(méi)有 - 沒(méi)有陰影！

   @mixin渲染可靠位置 - 逐鏈{
     //該混合物將旋轉(zhuǎn)旋轉(zhuǎn)到每個(gè)棕褐色形狀。它循環(huán)穿過(guò)每個(gè)棕褐色，計(jì)算每個(gè)角度的可能位置，並處理可見(jiàn)性和轉(zhuǎn)換。
     //它確保正確應(yīng)用旋轉(zhuǎn)，包括處理各種棕褐色位置和可見(jiàn)性狀態(tài)之間的過(guò)渡。
   @each $ tanname，$ tanshapes中的$ values {
      $可能的位置：map.get（$ values，poss-positions）;
      $ possibletanscolor：map.get（$ values，color）;
      $有效位置：get-coordinates（$ values，正確位置，'，'，vmin）;
      $ transformOrigin：get-coordinates（$ values，transform-origin，''，vmin）; 
      $ rotresposition：get-coordinates（$ values，exit-mode-btn-loction'，'，'，vmin）;
      $ angle：0;
      @for $ i從1到8 {
        $ angle：$ i * 45;
        $ nextangle：if（$ Angle 45> 360，45，$ Angle 45）;
        @include渲染位置 - 饋送task（$ tanname，$ angle，$ aunderPositions，$ possibletanscolor，＃{$ tanname} -tan，$ valleposition，$ transformOrigin，$ transformOrigin，$ rotResposition）;   
          ## {$ tanname} -tan {
          @include渲染鍵tan位置（$ tanname，$ angle，$ aunderpositions，hidden，$ possibletanscolor，＃{$ tanname} -tan，$ transformoRigin）
        }
          ## {$ tanname} -tan：檢查{
            @include渲染鍵tan位置（$ tanname，360，$ aunterPositions，cisible，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
            ＆?＃rotation-＃{$ angle}：檢查{
              @include渲染鍵tan位置（$ tanname，360，$ aunderpositions，hidden，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
              ＆?#tan＃{$ tanname} lab {transform：transforate（get-coordinates（$ values，tan-position，'，'，'，vmin））旋轉(zhuǎn)（＃{$ agne} deg）;}
              ＆?#tan＃{$ tanname} labres {visibility：hidden; }
              ＆?#ROT＃{$ angle} {可見(jiàn)性：隱藏; }
              ＆?#ROT＃{$ nextangle} {可見(jiàn)性：可見(jiàn)} 
              @include渲染鍵tan位置（$ tanname，$ angle，$ aunderPositions，cisible，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
          }
        }
      }
    }
  }

  當(dāng)單擊棕褐色的陰影時(shí)，相應(yīng)的棕褐色應(yīng)移至該陰影的位置。然後，下一個(gè)混合物檢查了這個(gè)新位置是否是解決難題的正確位置。如果正確，棕褐色會(huì)產(chǎn)生短暫的閃爍效果並變得不可敲打，發(fā)出信號(hào)已正確放置。如果不正確，棕褐色只是留在陰影的位置。沒(méi)有效果，並且仍然可拖動(dòng)/可單擊。

  當(dāng)然，每個(gè)棕褐色都有所有正確位置的列表。由於有些曬黑的大小相同 - 有些甚至可以組合形成更大的現(xiàn)有形狀 - 我們有多種有效的組合。對(duì)於這項(xiàng)駱駝任務(wù)，所有這些任務(wù)都被考慮在內(nèi)。創(chuàng)建了具有這些組合的專用地圖，以及讀取和應(yīng)用它們的混合蛋白。

  在遊戲結(jié)束時(shí)，當(dāng)將所有曬黑的位置放在正確的位置時(shí)，我們會(huì)觸發(fā)“合併”效果 - 駱駝的輪廓變黃。那時(shí)，唯一剩下的動(dòng)作是單擊重新啟動(dòng)按鈕。

  好吧，那很長(zhǎng)，但是當(dāng)您選擇樂(lè)趣（儘管艱難而冗長(zhǎng)）時(shí)，這就是您得到的。都是對(duì)僅CSS魔術(shù)的頌歌！