Selama bertahun-tahun, saya percaya bahawa permainan drag-and-drop-terutama yang melibatkan putaran, logik spatial, dan penyelesaian teka-teki-adalah domain eksklusif JavaScript. Sehingga suatu hari, saya bertanya AI:

"Adakah mungkin untuk membina permainan teka -teki Tangram interaktif sepenuhnya menggunakan CSS?"

Jawapannya: "Tidak - tidak, anda akan memerlukan JavaScript." Itulah semua motivasi yang saya perlukan untuk membuktikan sebaliknya.

Tetapi pertama, mari kita tanya soalan yang jelas: Mengapa ada yang melakukan ini?

Baik…

• Untuk mengetahui sejauh mana CSS boleh ditolak dalam mewujudkan UI interaktif.
• Untuk menjadi lebih baik pada kemahiran CSS saya.
• Dan ia menyeronokkan!

Cukup adil?

Sekarang, inilah kebenaran yang tidak mengejutkan: CSS tidak betul -betul dibuat untuk ini. Ia bukan bahasa logik, dan mari kita jujur, ia tidak begitu dinamik sama ada. (Pasti, kami mempunyai pembolehubah CSS dan beberapa fungsi terbina dalam sekarang, Hooray!)

Dalam JavaScript, kita secara semulajadi berfikir dari segi fungsi, gelung, keadaan, objek, perbandingan. Kami menulis logik, perkara abstrak ke dalam kaedah, dan akhirnya menghantar satu bundle yang difahami oleh penyemak imbas. Dan apabila ia dihantar? Kami jarang melihat bundle JavaScript terakhir - kami hanya memberi tumpuan kepada menjaga ia bersandar.

Sekarang tanya diri anda: Bukankah itu betul -betul apa yang dilakukan oleh sass untuk CSS?

Kenapa kita harus menuliskan garis-garis CSS berulang-ulang yang tidak berkesudahan apabila kita boleh menggunakan campuran dan fungsi untuk menghasilkannya-bersih, cekap, dan tanpa peduli berapa banyak baris yang diperlukan, selagi output dioptimumkan?

Oleh itu, kami meletakkannya pada ujian dan ternyata SASS boleh menggantikan JavaScript, sekurang-kurangnya ketika datang ke logik dan tingkah laku teka-teki peringkat rendah. Dengan apa -apa tetapi peta, campuran, fungsi, dan banyak matematik, kami berjaya membawa teka -teki Tangram kami ke kehidupan, tidak diperlukan JavaScript.

Biarkan permainan (CSS-Only) bermula! ??

Permainan

Permainan ini terdiri daripada tujuh keping: set Tangram klasik. Sememangnya, kepingan -kepingan ini boleh diatur ke dalam persegi yang sempurna (dan banyak bentuk lain juga). Tetapi kita memerlukan sedikit lebih daripada sekadar kepingan statik.

Jadi inilah yang saya bina:

• Matlamat teka -teki, yang merupakan sasaran bentuk pemain yang perlu dicipta semula.
• Butang permulaan yang mengocok semua kepingan ke kawasan pementasan.
• Setiap bahagian boleh diklik dan interaktif.
• Teka -teki harus membiarkan pengguna tahu apabila mereka mendapat sekeping yang salah dan juga meraikan apabila mereka menyelesaikan teka -teki.

Struktur HTML

Saya bermula dengan menubuhkan struktur HTML, yang bukan tugas kecil, memandangkan bilangan elemen yang terlibat.

• Setiap bentuk diberikan tujuh butang radio. Saya memilih radio di atas kotak semak untuk memanfaatkan eksklusif terbina dalamnya. Hanya satu yang boleh dipilih dalam kumpulan yang sama. Ini menjadikannya lebih mudah untuk mengesan bentuk dan negara yang sedang aktif.
• Butang permulaan? Juga input radio. Kotak semak juga boleh bekerja, tetapi demi konsistensi, saya terjebak dengan radio di seluruh papan.
• Peta teka -teki itu sendiri hanya tua yang biasa
  , mudah dan berkesan.
• Untuk putaran, kami menambah lapan butang radio, masing-masing mewakili kenaikan 45 darjah: 45 °, 90 °, 135 °, sepanjang jalan ke 360 ??°. Ini mensimulasikan putaran kawalan sepenuhnya dalam CSS.
• Setiap kedudukan bayangan berpotensi juga mendapat butang radio sendiri. (Ya, banyak, saya tahu.)
• Dan untuk membungkusnya, saya menyertakan butang tetapan semula klasik di dalam
  Menggunakan , jadi pemain boleh bermula dengan mudah pada bila -bila masa.

  Memandangkan bilangan elemen yang diperlukan, saya menggunakan PUG untuk menjana HTML dengan lebih cekap. Ia semata -mata pilihan kemudahan. Ia tidak menjejaskan logik atau tingkah laku teka -teki dalam apa cara sekalipun.

  Berikut adalah sampel HTML yang disusun. Ia mungkin kelihatan hebat pada pandangan pertama (dan ini hanya sebahagian daripadanya!), Tetapi ia menggambarkan kerumitan struktur yang terlibat. Bahagian ini runtuh untuk tidak nuke skrin anda, tetapi ia boleh diperluas jika anda ingin meneroka.

  Buka kod HTML

  <div>
    <div></div>
    <div></div>
    <form>
      <input type="checkbox" autofocus>
      <button type="reset">Mulakan semula</button>
      <label for="start">Mula</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>

  Membuat peta untuk data bentuk

  Sekarang rangka HTML sudah siap, sudah tiba masanya untuk menyuntiknya dengan beberapa kuasa sebenar. Di sinilah peta Sass kami masuk, dan di sinilah logik teka -teki mula bersinar.

  Nota: Peta dalam SASS memegang pasangan kunci dan nilai, dan memudahkan untuk mencari nilai dengan kunci yang sepadan. Seperti objek dalam JavaScript, kamus di Python dan, dengan baik, peta dalam c.

  Saya memetakan semua data teras yang diperlukan untuk mengawal setiap bahagian Tangram (tan): warna, bentuk, kedudukan, dan juga logik interaksi. Peta ini mengandungi:

  • TheBackground-colorfor setiap tan,
  • THECLIP-PATHCOORDINATES yang menentukan bentuk mereka,
  • kedudukan awal untuk setiap tan,
  • kedudukan blockingdiv (yang melumpuhkan interaksi apabila tan dipilih),
  • kedudukan bayangan (koordinat untuk siluet tan yang dipaparkan di papan tugas),
  • maklumat grid, dan
  • Kombinasi yang menang - koordinat sasaran yang tepat untuk setiap tan, menandakan penyelesaian yang betul.

   $ warna: (warna biru: #53a0e0, warna kuning: #f7db4f, / * warna untuk setiap tan * /);
  $ nth-child-grid: (1: (2, 3, 1, 2,), 2: (3, 4, 1, 2,), 4: (1, 2, 2, 3,), / * Lebih banyak penyertaan untuk ditambah * /);
  $ blueposiblePositions: (45: none, 90: ((6.7, 11.2),), 135: Tiada, 180: Tiada, / * kedudukan yang ditakrifkan sehingga 360 darjah * /);
  / * Tans lain */
  
  / * Data yang ditakrifkan untuk setiap tan */
  $ tansshapes: (
    Bluetriangle: (
      warna: peta.get ($ warna, warna biru),
      Clip-Path: (0 0, 50 50, 0 100,),
      Rot -BTN -posisi: (-20, -25,),
      Exit-Mode-BTN-position: (-20, -33,),
      Tan -kedudukan: (-6, -37,),
      Posisial -Lab -Lab: (-12, -38,),
      POSS-POSISIS: $ BluePosiblePositions,
      kedudukan yang betul: ((4.7, 13.5), (18.8, 13.3),),
      Transform-asal: (4.17, 12.5,),
    ))
  );
  
  / * Baki 7 kombinasi */
  $ winningcombinations: (
    Combo1: (
      (Bluetriangle, 1, 360),
      (Yellowtriandle, 1, 225),
      (Pinktriandle, 1, 180),
      (Redtriandle, 4, 360),
      (Purpletriangle, 2, 225),
      (persegi, 1, 90),
      (Polygon, 4, 90),
    ))
  );

  Anda dapat melihat ini dalam tindakan pada Codepen, di mana peta ini memacu rupa dan tingkah laku sebenar setiap sekeping teka -teki. Pada ketika ini, tidak ada perubahan yang dapat dilihat dalam pratonton. Kami hanya menyediakan dan menyimpan data untuk kegunaan kemudian.

  Menggunakan mixins untuk dibaca dari peta

  Idea utama adalah untuk membuat campuran yang boleh diguna semula yang akan membaca data dari peta dan memohon kepada peraturan CSS yang sepadan apabila diperlukan.

  Tetapi sebelum itu, kami telah meningkatkan perkara ke tahap yang lebih tinggi dengan membuat satu keputusan penting: kami tidak pernah mengikat unit secara langsung di dalam peta. Sebaliknya, kami membina fungsi utiliti yang boleh diguna semula yang secara dinamik menambah unit yang dikehendaki (contohnya, VMIN, PX, dan lain -lain) kepada sebarang nilai angka apabila ia digunakan. Dengan cara ini, bila boleh menggunakan peta kami tetapi kami suka.

   @Function Get-Sordinates ($ data, $ Key, $ pemisah, $ unit) {
    $ koordinat: null;
  
    // periksa sama ada hujah pertama adalah peta
    @if meta.type-of ($ data) == "peta" {
      // Sekiranya peta mengandungi kekunci yang ditentukan
      @if map.has-key ($ data, $ kekunci) {
        // Dapatkan nilai yang berkaitan dengan kunci (dijangka menjadi senarai koordinat)
        $ koordinat: map.get ($ data, $ kunci);
      }
  
    // Sekiranya hujah pertama adalah senarai
    } @else jika meta.type-of ($ data) == "senarai" {
      // Pastikan kunci adalah indeks yang sah (berasaskan 1) dalam senarai
      @if meta.type-of ($ key) == "Nombor" dan $ key> 0 dan $ key <p> Pasti, tiada apa yang muncul dalam pratonton lagi, tetapi sihir sebenar bermula sekarang.</p><p> Sekarang kita beralih kepada menulis mixins. Saya akan menerangkan pendekatan secara terperinci untuk Mixin Pertama, dan selebihnya akan diterangkan melalui komen.</p><p> Mixin pertama dinamik digunakan peraturan-peraturan-rowplacement peraturan kepada unsur-unsur kanak-kanak berdasarkan nilai yang disimpan dalam peta. Setiap entri dalam peta sepadan dengan indeks elemen (1 hingga 8) dan mengandungi senarai empat nilai: [Start-Col, End-Col, Start-row, End-row].</p><pre rel="SCSS" data-line=""> @Mixin Tanagram-Grid-Positioning ($ nth-child-grid) {
    // gelung melalui nombor 1 hingga 8, sepadan dengan kepingan tanam
    @for $ i dari 1 hingga 8 {
  
      // Periksa jika peta mengandungi kunci untuk sekeping semasa (1-8)
      @if map.has-key ($ nth-child-grid, $ i) {
  
        // Dapatkan nilai grid untuk sekeping ini: [permulaan-lajur, lajur akhir, permulaan, baris akhir]
        $ Nilai: Map.get ($ nth-child-grid, $ i);
  
        // Targetkan anak nth (sekeping) dan tetapkan kedudukan gridnya
        &: nth-child (#{$ i}) {
          // Tetapkan Grid-Column: Nilai Mula dan Tamat Berdasarkan Dua Item Pertama dalam Senarai
          Grid-Column: #{list.nth ($ nilai, 1)} / #{list.nth ($ value, 2)};
  
          // set grid-baris: Nilai permulaan dan akhir berdasarkan dua item terakhir dalam senarai
          grid-baris: #{list.nth ($ nilai, 3)} / #{list.nth ($ nilai, 4)};
        }
      }
    }
  }

  Kita boleh mengharapkan CSS berikut dihasilkan:

   .tanagram-box: nth-child (1) {
    Grid-lajur: 2/3;
    grid-baris: 1/2;
  }
  
  .tanagram-box: nth-child (2) {
    Grid-lajur: 3/4;
    grid-baris: 1/2;
  }

  Dalam mixin ini, matlamat saya sebenarnya adalah untuk mencipta semua bentuk (TANS). Saya menggunakan laluan. Terdapat idea -idea untuk menggunakan imej SVG mewah, tetapi projek ujian ini lebih lanjut mengenai menguji logik dan bukannya memberi tumpuan kepada reka bentuk yang indah. Atas sebab ini, penyelesaian yang paling mudah adalah untuk memotong unsur -unsur mengikut dimensi semasa mereka masih berada di dataran (kedudukan awal semua TANS).

  Oleh itu, dalam kes ini, melalui pengiraan statik, $ tansshapesmap dikemas kini dengan theclip-patroperty:

   Clip-Path: (0 0, 50 50, 0 100);

  Ini mengandungi titik klip untuk semua TANS. Pada dasarnya, bentuk dan warna campuran ini setiap tan dengan sewajarnya.

   @mixin set-tan-clip-path ($ tanname, $ nilai) {
    // Inisialisasi senarai kosong untuk memegang titik-titik klip akhir
    $ clip-path-points: ();
  
    // Ekstrak data 'klip-path' dari peta, yang mengandungi pasangan koordinat
    $ clip-path-key: map.get ($ nilai, clip-path);
  
    // Dapatkan bilangan pasangan koordinat untuk gelung
    $ Count: list.length ($ clip-path-key);
  
    // gelung melalui setiap titik koordinat
    @for $ i dari 1 hingga $ Count {
      // Tukar setiap pasangan nombor ke dalam rentetan koordinat yang diformat dengan unit
      $ semasa titik: get-koordinat ($ clip-path-key, $ i, "", "%");
  
      // Tambahkan koordinat yang diformat ke senarai, memisahkan setiap titik dengan koma
      $ clip-path-points: list.append ($ clip-path-points, #{$ current-point}, koma);
    }
  
    // gaya untuk elemen pratonton (versi makmal), menggunakan warna latar belakang yang dikonfigurasikan
    #tan#{$ tanname} makmal {
      Latar Belakang: Map.get ($ nilai, warna);
      Clip-Path: Polygon (#{$ clip-path-points}); // Sapukan senarai penuh titik klip
    }
  
    // Gunakan laluan klip yang sama dengan elemen tan sebenar
    .#{$ tanname} {
      Clip-Path: Polygon (#{$ clip-path-points});
    }
  }

  dan output dalam CSS harus:

   .bluetriangle {
    Clip-Path: Polygon (0% 0%, 50% 50%, 0% 100%);
  }
  / * tans lain */

  Mula logik

  Baiklah, sekarang saya ingin menjelaskan apa yang harus berlaku terlebih dahulu apabila permainan dimuatkan.

  Pertama, dengan satu klik pada butang Mula, semua TANS "pergi ke kedudukan mereka." Pada hakikatnya, kami memberikan mereka atransform: Terjemahan () dengan koordinat tertentu dan putaran.

   .start: diperiksa ~ .shadow #tanbluetriangglelab {
    Transform-Origin: 4.17vmin 12.5vmin;
    Transform: Terjemahan (-6vmin, -37vmin) berputar (360deg);
    kursor: penunjuk;
  }

  Jadi, kami masih mengekalkan corak ini. Kami menggunakan Transform dan hanya mengubah kedudukan atau sudut (dalam peta) kedua -dua TAN dan bayang -bayang mereka di papan tugas.

  Apabila mana -mana tan diklik, butang putaran muncul. Dengan mengklik padanya, tan harus berputar di sekitar pusatnya, dan ini berterusan dengan setiap klik berikutnya. Sebenarnya terdapat lapan butang radio, dan dengan setiap klik, seseorang hilang dan yang seterusnya muncul. Apabila kita mencapai yang terakhir, mengklik ia menjadikannya hilang dan yang pertama muncul semula. Dengan cara ini, kami mendapat gambaran untuk mengklik butang yang sama (mereka, tentu saja, digayakan sama) dan dapat mengklik (putar tan) tak terhingga. Inilah yang membolehkan Mixin berikut.

   @mixin set-tan-rotation-states ($ tanname, $ nilai, $ sudut, $ warna) {
    // Mixin ini secara dinamik menggunakan gaya UI putaran berdasarkan konfigurasi tan.
    // Ia mengawal kedudukan dan penampilan butang putaran dan maklum balas visual apabila keadaan putaran aktif.
    @Each $ sudut dalam $ sudut {
      & ~ #rot #{$ angle} {transform: translate (get-coordinates ($ nilai, rot-btn-position, ',', vmin)); Latar Belakang: $ warna;}
      & ~ #rotation- #{$ angle}: diperiksa {
        @Each $ Kunci dalam Map.keys ($ tansshapes) {
          & ~ #tan #{$ key} Labres {Visibility: Look; Latar Belakang: RGBA (0,0,0,0.4); }
          & ~ #tan #{$ key} makmal {opacity: .3; }
          & ~ #RotReset {Visibility: Look; }
        } 
      }
    }
  }

  Dan CSS yang dihasilkan harus:

   #Bluetriangle-Tan: diperiksa ~ #putaran-45: diperiksa ~ #tanbluetrianglelab {
    Transform: Terjemahan (-6vmin, -37vmin) berputar (45deg);
  }
  
  #Bluetriangle-Tan: diperiksa ~ #putaran-45: diperiksa ~ #tanbluetrianglelabres {
    Keterlihatan: Tersembunyi;
  }

  Ok, mixin berikut menggunakan teset-klip-pathandset-rotationmixins. Mereka mengandungi semua maklumat mengenai TANS dan tingkah laku mereka berhubung dengan TAN yang diklik dan putaran yang dipilih, serta kedudukan mereka (seperti yang ditakrifkan dalam Mixin Kedua).

   @Mixin menjana-tan-b-buatan-dan-interaksi ($ tansshapes) {
  // Memohon logik gaya dan interaksi UI untuk setiap bentuk tan individu dari peta $ tansshapes.
    @each $ tanname, $ nilai dalam $ tansshapes {
      $ warna: color.scale (map.get ($ nilai, warna), $ ringan: 10%); 
      $ sudut: (45, 90, 135, 180, 225, 270, 315, 360); 
      @include set-tan-klip-path ($ tanname, $ nilai);
  
      ## {$ tanname} -tan: diperiksa {
        & ~ #tan #{$ tanname} res {kebolehlihatan: tersembunyi; }
        & ~ #tan #{$ tanname} makmal {opacity: 1! penting; latar belakang: #{$ color}; kursor: auto;}
        @Each $ Kunci dalam Map.keys ($ tansshapes) {
            & ~ #tan #{$ tanname} res: diperiksa ~ #tan #{$ key} labres {visibility: visible;}
        }
        & ~ #rot45 {paparan: flex; penglihatan: kelihatan;}
        & ~ #rotReset {transform: translate (get-koordinat ($ nilai, keluar-mod-btn-position, ',', vmin)); }
        @include set-tan-rotation-states ($ tanname, $ nilai, $ sudut, $ warna);
      }  
    }
  }

   @mixin set-initial-tan-position ($ tansshapes) {
  // Mixin ini menetapkan kedudukan awal dan transformasi untuk kedua -dua versi interaktif (`lab`) dan bayangan (` labres`)
  // setiap bentuk tan, berdasarkan koordinat yang disediakan dalam peta $ tansshapes.
   @each $ tanname, $ nilai dalam $ tansshapes {
      & ~ .shadow #tan #{$ tanname} makmal {
        Transform-Origin: Get-Coordinates ($ nilai, Transform-Origin, '', Vmin);
        Transform: Terjemahan (get-koordinat ($ nilai, kedudukan tan, ',', vmin)) berputar (360deg);
        kursor: penunjuk;
      }
      & ~ .shadow #tan #{$ tanname} labres {
        Keterlihatan: Tersembunyi;
        Transform: Terjemahan (Get-Sordinates ($ nilai, Diable-Lab-position, ',', vmin)); 
      }
    }
  }

  Seperti yang dinyatakan sebelum ini, apabila tan diklik, salah satu perkara yang dapat dilihat adalah bayangannya - siluet yang muncul di papan tugas.

  Kedudukan bayangan ini (koordinat) kini ditakrifkan secara statik. Setiap bayang -bayang mempunyai tempat tertentu di peta, dan campuran membaca data ini dan menggunakannya pada bayang -bayang menggunakanTransform: Terjemahan ().

  Apabila tan yang diklik diputar, bilangan bayang -bayang yang kelihatan di papan tugas boleh berubah, serta sudut mereka, yang dijangka.

  Sudah tentu, penjagaan khas diambil dengan konvensyen penamaan. Setiap elemen bayangan mendapat ID yang unik, dibuat dari nama (yang diwarisi dari tan induknya) dan nombor yang mewakili kedudukan urutannya untuk sudut yang diberikan.

  Cukup keren, bukan? Dengan cara itu, kami mengelakkan corak penamaan rumit sepenuhnya!

   @Mixin Render-Possible-Tan-positions ($ Nama, $ Sudut, $ Kemungkinan, $ penglihatan, $ warna, $ id, $ transformorigin) {
      // Mixin ini menjana gaya untuk kemungkinan kedudukan bentuk tan berdasarkan namanya, sudut putaran, dan peta konfigurasi.
      // Ia mengendalikan kedua -dua dataran dan poligon, menormalkan sudut putaran mereka dengan sewajarnya dan menggunakan gaya transformasi jika kedudukan wujud.}
    @if $ name == 'square' {
      $ sudut: normalisasi sudut ($ sudut); // normalizujemo ugao ako je u pitanju square
    } @else jika $ name == 'Polygon' {
      $ sudut: normalisasi-polygon-angle ($ sudut);
    }
    @if map.has-key ($ kemungkinanPosisi, $ sudut) {
      $ nilai: map.get ($ mungkinPosisi, $ sudut);
  
      @if $ nilai! = Tiada {
        $ Count: list.length ($ nilai);
  
        @for $ i dari 1 hingga $ Count {
          $ kedudukan: get-koordinat ($ nilai, $ i, ',', vmin);
          & ~ #tan#{$ name} makmal-#{$ i}-#{$ angle} { 
            @if $ penglihatan == kelihatan {
              Keterlihatan: kelihatan;
              latar belakang warna: $ warna;
              Opacity: .2;
              Z-indeks: 2;
              transform-asal: #{$ transformorigin};
              Transform: Terjemahan (#{$ kedudukan}) berputar (#{$ angle} deg);
            } @else jika $ penglihatan == tersembunyi {penglihatan: tersembunyi; }
            &: hover {opacity: 0.5; kursor: penunjuk; }
          }
        }
      }
    }
  }

  CSS yang dihasilkan:

   #Bluetriangle-Tan: diperiksa ~ #Tanbluetrianglelab-1-360 {
    Keterlihatan: kelihatan;
    latar belakang warna: #53A0E0;
    Kelegapan: 0.2;
    Z-indeks: 2;
    Transform-Origin: 4.17vmin 12.5vmin;
    Transform: Terjemahan (4.7vmin, 13.5vmin) berputar (360deg);
  }

  Mixin seterusnya ini terikat pada yang sebelumnya dan menguruskan kapan dan bagaimana bayang -bayang tan muncul semasa tan ibu bapa mereka diputar menggunakan butang. Ia mendengarkan sudut putaran semasa dan memeriksa sama ada terdapat sebarang kedudukan bayangan yang ditakrifkan untuk sudut tertentu. Sekiranya ada, ia memaparkannya; Jika tidak - tiada bayang -bayang!

   @mixin render-posible-positions-by-rotation {
     // Mixin ini menggunakan putaran untuk setiap bentuk tan. Ia gelung melalui setiap tan, mengira kedudukannya yang mungkin untuk setiap sudut, dan mengendalikan penglihatan dan transformasi.
     // Ia memastikan bahawa putaran digunakan dengan betul, termasuk mengendalikan peralihan antara pelbagai kedudukan tan dan keadaan penglihatan.
   @each $ tanname, $ nilai dalam $ tansshapes {
      $ kemungkinanPosisi: Map.get ($ nilai, posisi-posisi);
      $ posibletanscolor: map.get ($ nilai, warna);
      $ validPosition: get-koordinat ($ nilai, kedudukan yang betul, ',', vmin);
      $ transformorigin: get-koordinat ($ nilai, transform-asal, '', vmin); 
      $ rotresposition: get-koordinat ($ nilai, keluar-mod-btn-position, ',', vmin);
      $ sudut: 0;
      @for $ i dari 1 hingga 8 {
        $ sudut: $ i * 45;
        $ nextangle: jika ($ sudut 45> 360, 45, $ sudut 45);
        @include render-position-feedback-on-task ($ tanname, $ angle, $ mungkinposisi, $ possibletanscolor, #{$ tanname} -tan, $ validposition, $ transformorigin, $ rotresposition);   
          ## {$ tanname} -tan {
          @include Render-Possible-Tan-Positions ($ Tanname, $ Sudut, $ MUSPUMESPositions, Hidden, $ PossibeTanScolor, #{$ Tanname} -tan, $ Transformorigin)
        }
          ## {$ tanname} -tan: diperiksa {
            @include Render-Possible-Tan-Positions ($ Tanname, 360, $ MUSPUOPPOSISS, LOSTABLE, $ POSSIBLETANSCOLOR, #{$ Tanname} -tan, $ transformorigin);
            & ~ #rotation- #{$ angle}: diperiksa {
              @include Render-Possible-Tan-Positions ($ Tanname, 360, $ MUSPUOPPOSISIS, Tersembunyi, $ possibletanscolor, #{$ Tanname} -tan, $ transformorigin);
              & ~ #tan#{$ tanname} makmal {transform: translate (get-coordinates ($ nilai, tan-posisi, ',', vmin)) berputar (#{$ angle} deg);}
              & ~ #tan #{$ tanname} Labres {Visibility: Hidden; }
              & ~ #rot #{$ angle} {kebolehlihatan: tersembunyi; }
              & ~ #rot #{$ nextangle} {penglihatan: kelihatan} 
              @include Render-Possible-Tan-Positions ($ Tanname, $ Sudut, $ MOUMEPOSISIS, LOSISE, $ POSSIBLETANSCOLOR, #{$ Tanname} -tan, $ transformorigin);
          }
        }
      }
    }
  }

  Apabila bayangan tan diklik, tan yang sepadan harus bergerak ke kedudukan bayangan itu. Mixin seterusnya kemudian memeriksa sama ada kedudukan baru ini adalah yang betul untuk menyelesaikan teka -teki. Sekiranya betul, tan mendapat kesan berkedip ringkas dan menjadi tidak dapat dikilangkan, menandakan ia diletakkan dengan betul. Jika tidak betul, tan hanya tinggal di lokasi bayangan. Tidak ada kesan dan ia masih boleh diseret/boleh diklik.

  Sudah tentu, terdapat senarai semua kedudukan yang betul untuk setiap tan. Oleh kerana sesetengah TAN berkongsi saiz yang sama - dan sesetengahnya boleh menggabungkan untuk membentuk bentuk yang lebih besar dan sedia ada - kami mempunyai pelbagai kombinasi yang sah. Untuk tugas unta ini, semuanya telah diambil kira. Peta yang berdedikasi dengan kombinasi ini dicipta, bersama -sama dengan campuran yang membaca dan memohon mereka.

  Pada akhir permainan, apabila semua TAN diletakkan di kedudukan mereka yang betul, kami mencetuskan kesan "penggabungan" - dan siluet unta berubah menjadi kuning. Pada ketika itu, satu -satunya tindakan yang tersisa adalah dengan mengklik butang restart.

  Nah, itu sudah lama, tetapi itulah yang anda dapatkan apabila anda memilih jalan yang menyeronokkan (walaupun keras dan panjang). Semua sebagai Ode kepada Magic CSS sahaja!