Menjana (dan menyelesaikan!) Sudokus dalam CSS

Saya suka membuat CSS melakukan perkara yang tidak seharusnya. Ia adalah jenis latihan otak penyelesaian masalah yang anda akan dapat membina kalkulator di Minecraft, kecuali anda mungkin tidak akan mendapat pekerjaan yang bekerja dengan Minecraft Redstone tidak kira seberapa baik anda mendapatkannya, sedangkan kemahiran CSS bernilai wang sebenar, dan banyak pengaturcara umum takut CSS, jadi mengkaji ia boleh menjadi cara untuk menonjol dari pek. Juga, apabila anda telah melakukan yang mustahil dengan CSS, semua tugas CSS biasa kelihatan mudah.

Saya telah membaca perbincangan menarik di web mengenai sama ada CSS adalah bahasa lengkap Turing dan sama ada CSS dan HTML layak sebagai bahasa pengaturcaraan. Saya tidak memutuskan, tetapi saya boleh mengatakan bahawa dalam usaha untuk menyokong corak UI biasa dengan cara yang standard, beberapa ciri CSS yang lebih baru mengaburkan garis antara gaya dan fungsi.

Mencabar diri kita untuk menyelesaikan masalah logik dengan hanya CSS dan HTML boleh memaksa kita untuk menghabiskan masa yang berkualiti dengan beberapa ciri baru, seperti CSS, seperti sifat tersuai dan fungsi logik. Ia masih tidak jelas bagaimana ini boleh digunakan untuk membina pemecah Sudoku menggunakan hanya CSS, tetapi sebagai gila seperti idea yang dibunyikan, logik berasaskan kekangan Sudoku seolah-olah ia mungkin bersesuaian dengan sifat deklaratif CSS, jadi saya tidak terkejut untuk mencari orang lain yang mendakwa telah membina "CSS3 Sudoku Solver Solver." Seperti yang ternyata, ini lebih seperti Sudoku Validator dalam CSS daripada pemecah. Ia juga menggunakan sedikit JavaScript untuk bekerja dengan kotak teks.

Selepas hari -hari yang berani cuba membina aplikasi pemecah dan penjana Sudoku penuh di CSS tulen, saya belajar tiga perkara.

1. Anda boleh menguji fungsi sass dan campuran, yang hebat. Sekiranya anda menggunakan dan menggunakan semula ciri-ciri SASS ini, iaitu apa yang mereka maksudkan, mereka menjadi sebagai misi-kritikal dan menakutkan untuk berubah sebagai bahagian lain dari asas anda. Mereka berhak mendapat ujian di sekeliling mereka.
2. Chrome Devtools menunjukkan pemutar kematian yang tidak terhingga apabila anda membuang 50MB CSS yang dijana SASS di atasnya.
3. Mungkin mustahil untuk menterjemahkan sesuatu seperti skrip python ini ke CSS tulen. Mungkin.

Walau bagaimanapun, kita boleh mencapai aplikasi Sudoku Solver dan Generator untuk 16 persegi Sudoku yang boleh anda mainkan dengan di bawah, maka kita akan memecahkan bagaimana ciri-cirinya berfungsi. Di manakah Tuhan anda sekarang, teka -teki mudah yang dimaksudkan untuk anak -anak kecil?

Pemilih nilai

Oleh kerana kami bereksperimen dengan CSS, kami diwajibkan secara kontrak untuk memasukkan sesuatu yang menarik secara visual, walaupun tidak ada yang terlalu tinggi sebagai pemain Sudoku seolah-olah menghargai UI yang kekal di luar jalan. Pada pendapat saya, cara anda memilih nombor pada beberapa aplikasi Sudoku boleh menjadi lebih intuitif, jadi saya memutuskan untuk menggunakan corak UI menu radial, yang bermula sepanjang hari ke hari -hari Macintosh hitam dan putih dan masih popular dalam permainan video moden. Seseorang sebenarnya membina perpustakaan CSS tulen yang bagus untuk menu radial, tetapi saya mendapat penghancuran di React Planet kerana saya suka cara ia menangkap kedua -dua memilih item dengan bulatan di sekelilingnya, dan bagaimana ia menarik memaparkan tindakan yang ada. Saya mahu melihat sama ada saya boleh membina kesan yang sama dengan hanya CSS.

Saya mengambil beberapa kod bulatan yang putus-putus dari pen ini dan kemudian membuat nombor daripada label menggunakan radius sempadan lama: 50% helah, maka saya menggunakan kedudukan mutlak untuk membuat angka "melekat" ke titik yang betul pada bulatan putus-putus walaupun animasi menjadikannya saiz perubahan.

 .context .number.top {
  Latar Belakang: Hijau;
  margin-kiri: auto;
  margin-kanan: auto;
  Kiri: 0;
  Kanan: 0;
  Atas: -12.5px;
}

.Context .Number.Left {
  Latar Belakang: Orange;
  margin-top: auto;
  margin-bottom: auto;
  Atas: 0;
  Bawah: 0;
  Kiri: -12.5px;
}

Animasi memudar nombor pemetik di dalam sambil membuat indeks z yang lebih tinggi sehingga ia menjadi diklik. Kami juga menghidupkan margin atas dan kiri dari 50% ke sifar sehingga bulatan mengembang dari pusat untuk mengisi ruang yang ada.

 @keyframes melantun {
  0% {
    Z -indeks: -1;
    lebar: 35%;
    Ketinggian: 35%;
    margin-kiri: 50%;
    Margin-Top: 50%;
    Kelegapan: 0;
  }
  100% {
    Z-indeks: 2;
    Kelegapan: 1;
    lebar: var (-lingkaran-radius);
    Ketinggian: var (-Circle-Radius);
  }
}

Kemudian, untuk mensimulasikan fizik melenting yang serupa dengan React Planet, saya menggunakan fungsi padu () pada animasi. Laman web Easings.net adalah bantuan besar dalam membuat fungsi pelonggaran mudah.

 .context {
  Animasi: Bounce-Out Cubic-BeBer (.68, -0.6, .32, 2.5) .5s Forwards;        
}

Kedua -dua pemilihan nilai dan tingkah laku membuka pemilih nilai untuk persegi yang dipilih beroperasi menggunakan hacks butang radio, untuk mengingati nilai mana yang dipilih dan mencapai eksklusif bersama. CSS-Tricks mempunyai artikel yang sangat baik pada kotak semak dan hacks butang radio, jadi saya tidak akan mengulangi maklumat itu di sini, tetapi saya akan menunjukkan bagaimana kami menetapkan pembolehubah CSS pada tahap grid Sudoku CSS berdasarkan kotak semak, kerana ia adalah pusat percubaan ini.

Seperti yang kita gunakan pembolehubah, kita boleh mendapatkan tingkah laku yang sama apabila nilai ditetapkan, tanpa mengira sama ada pengguna menyemak kotak untuk menentukan nilai, atau penetapan penjana teka -teki yang nilai yang sama untuk persegi. Terdapat banyak kombinasi dataran dan nilai, jadi kami menggunakan SASS dan bukannya menulis semua kombinasi dengan tangan. Kami juga mencipta nilai bit yang berasingan untuk setiap kombinasi nilai-square, dan satu lagi harta tersuai untuk memberitahu kami sama ada dataran itu tidak dapat diselesaikan. Itu kerana CSS memberi kita keupayaan terhad untuk membandingkan satu nilai dengan yang lain (mungkin tetapi boleh menjadi rumit). Kami mendefinisikan nilai -nilai ini dengan cara yang mungkin kelihatan agak ganjil pada mulanya, tetapi akan menjadikan kehidupan lebih mudah bagi kami apabila mengesahkan sama ada satu set nilai Sudoku Square dapat diselesaikan atau tidak.

 @for $ i dari 1 hingga 16 {
  @for $ j dari 1 hingga 4 {
    #Select-#{$ j} -value-square-#{$ i}: diperiksa ~ .sudoku {
       -Square-#{$ i} -Unsolved: 0; 
       -Square-#{$ i} -equals-#{$ j}: 1;
    }
  }
}

Mengesahkan grid

Doktor Google memberitahu kami bahawa walaupun dengan hanya 16 kotak, terdapat empat bilion kombinasi yang mungkin sebanyak empat nombor. Tetapi satu program yang memaksa semua kombinasi dan output ini yang sah mengikut peraturan Sudoku menunjukkan bahawa hanya terdapat 288 penyelesaian yang sah dalam 4 × 4 Sudoku, yang merupakan perbezaan besar dari jumlah penyelesaian yang sah dalam grid 9 × 9. Dengan hanya 288 penyelesaian yang mungkin, ini adalah di mana Sass benar -benar boleh datang sendiri. Saya masih tidak pasti jika CSS adalah bahasa lengkap Turing, tetapi SASS adalah, dan ia memberi kita beberapa struktur data yang betul, seperti senarai. Dengan sedikit sihir regex kita dapat mengubah senarai teka-teki 4 × 4 yang sah yang dihubungkan di atas ke dalam senarai dua dimensi berkuasa Sass!

 Penyelesaian $: ((1,2,3,4,3,4,1,2,2,1,4,3,4,3,2,1), (3,1,2,4,2,4,1,3,1,3,4,4,4,2,3,1) Kemudian ...*/(2,4,3,1,3,1,4,2,4,2,1,3,1,3,2,4), (4,3,2,1,2,1,4,3,3,4,1,2,2,2,3,4));

Manis! Jika hack CSS kami adalah aplikasi pelbagai peringkat, ini akan menjadi pangkalan data kami. Pengesahan boleh menggunakan pendekatan yang sama untuk memeriksa nilai baris dan lajur seperti pengesahan 9 × 9 yang kita lihat dalam pengenalan, tetapi kerana kita tahu jawapannya seolah -olah kita tidak perlu mengganggu memeriksa blok dan lajur dan baris. Sebaliknya, kita boleh menyemak sama ada nombor yang dimasukkan masih boleh menjadi teka -teki yang sah atau tidak. Di pseudocode ini mungkin kelihatan seperti:

 Foreach (di Squares) 
{
  jika (penyelesaianContains (s.value, s.index) atau s.isunsolved ())
  {
    showValidationError ();
  } 
}

Ingat kita mencipta pembolehubah pelik apabila nilai persegi dipilih?

 -Square-#{$ i} -Unsolved: 0;        
-Square-#{$ i} -equals-#{$ j}: 1;

Jadi sekarang kita mempunyai jawapan kepada kedua -dua soalan dalam keadaan dalam baris 3 pseudocode di atas, tetapi bagaimana kita boleh melakukan logik atau pengendali dalam CSS? Terdapat artikel yang hebat mengenai trik CSS tentang menggunakan Calc () untuk mensimulasikan pengendali logik di CSS, dan saya tidak pasti saya akan memikirkan beberapa kod dalam pemecah Sudoku saya tanpa itu, tetapi beberapa formulas yang dijelaskan dalam artikel itu mendapat sedikit berat, terutama jika anda ingin melakukan Nested and Ors dengan lebih daripada dua operan. Sebagai contoh, kita memerlukan CSS bersamaan dengan pseudocode ini:

 jika ((SquareOnequalsone dan SquaretWoequalstwo /*...*/ dan SquareStixeenequalsone) atau (SquareOnequalsone dan SquaretWoequalsthree /*...*/ dan SquareSeMeenequalsone))
  {
    Sudokuisvalid ();
  } 
}

Nah, artikel yang menunjukkan cara melakukan logik menggunakan Calc () telah ditulis pada tahun 2019. Pada masa kini, sebagai tambahan kepada Calc (), kami mempunyai fungsi matematik min () dan maksimum yang sesuai dengan keperluan kami. Jika anda Google "CSS Min, Max dan Clamp" (yang terakhir hanya gula yang mudah untuk gabungan min () dan max ()), anda akan mendapati banyak contoh menunjukkan bagaimana mereka boleh digunakan untuk memudahkan tipografi cecair. Itulah satu kes penggunaan yang menarik, tetapi anda boleh menggunakan fungsi matematik ini di mana sahaja anda menggunakan nombor, yang menambah banyak kuasa kepada CSS. Sebagai contoh, jika anda lulus pembolehubah bendera bit ke CSS min (), itu bersamaan dengan dan. Jika anda lulus bendera yang sama ke CSS Max (), itu bersamaan dengan atau. Kita boleh membuktikan ini menggunakan jadual kebenaran berikut.

Kita boleh menjadi canggih dengan itu, terutamanya apabila anda menambah fakta yang berguna bahawa kita dibenarkan melakukan apa -apa Calc () boleh dilakukan dalam min () dan max (). CSS hanya mengambil langkah lebih dekat untuk menjadi bahasa skrip peliknya sendiri. Sekarang kita boleh melaksanakan keadaan dalam pseudocode pengesahan kami di atas di CSS. (Dalam praktiknya, kami menjana ini dari SASS kerana ia sangat berulang.)

 .Sudoku { 
  --square-1-pukulan-puzzle-1: max (var (-persegi-1-tidak diselesaikan), var (-persegi-1-equals-1, 0));
  --Square-2-pukulan-puzzle-1: max (var (-persegi-2-tidak diselesaikan), var (-persegi-2-equals-2, 0));
  /*...*/
  --square-16-pukulan-puzzle-1: max (var (-square-16-tidak diselesaikan), var (-square-16-equals-1, 0));
  --Puzzle-1-found: min (var (-square-1-matches-puzzle-1), 
  /*...*/ 
  var (-persegi-16 perlawanan-puzzle-1));
  --penyelesaian: max (var (-teka-teki-1-found), /*...*/ var (-teka-teki-288-found));
}

Dengan memeriksa sama ada setiap persegi sama ada tidak dapat diselesaikan atau mempunyai nilai yang wujud dalam kedudukan yang sama dalam salah satu penyelesaian pra-kalkulasi kami dari senarai SASS 2D, kami boleh menghasilkan pembolehubah yang memberitahu kami sama ada dataran yang ditakrifkan dalam teka-teki 4 × 4 Sudoku yang sah. Sekarang selagi kita dapat mencari sesuatu yang angka yang akan memacu tingkah laku di CSS, kita boleh mendasarkan kelakuan CSS pada-penyelesaian yang ditemui. Sebagai contoh, untuk menjadikan grid kita menjadi merah apabila ia tidak sah kita boleh meletakkan ini di setiap persegi:

 .square {
  warna: rgb (calc (255 * (1-var (-penyelesaian ditemui))), 0, 0);
}

Tidak setiap harta CSS boleh didorong oleh nombor, tetapi banyak yang boleh, dan kedua-dua indeks Z dan kelegapan adalah ciri-ciri CSS yang serba boleh untuk penggunaan ini. Tingkah laku lain boleh menjadi lebih rumit tetapi sering dicapai. Sebagai contoh, saya agak terperangkap tentang bagaimana untuk mencetuskan animasi goncang untuk grid yang tidak sah dengan hanya harta bendera bit angka supaya grid akan menggoncang bila -bila masa ia menjadi tidak sah, tetapi ini adalah contoh yang hebat tentang bagaimana penggodaman CSS memaksa anda untuk membaca spesifikasi dan memahami kes -kes kelebihan untuk setiap harta benda. Saya dapati penyelesaian saya di halaman ini mengenai jangkauan animasi.

Nilai 0s, yang merupakan nilai lalai, menunjukkan bahawa tiada animasi harus berlaku.

Oleh itu, kita boleh mendasarkan tempoh animasi animasi goncang pada-penyelesaian yang ditemui dan mengeluarkan animasi setiap kali nombor diklik menggunakan: kelas pseudo aktif untuk membuat animasi replay pada bila-bila masa penyelesaian menjadi tidak sah, dan tidak melakukan apa-apa sebaliknya.

 #Select-#{$ j} -value-square-#{$ i}: aktif { 
  Animasi: Tiada;
}

 #Select-#{$ j} -value-square-#{$ i}: diperiksa ~ .sudoku {
  Animasi: Shake Cubic-BeBer (.36, .07, .19, .97) Calc ((Clamp (0, 1-var (-Solution-found), 1)) * 1s) ke hadapan;
}

Aplikasi CSS Sudoku yang tulen mungkin mustahil jika kita tidak mempunyai sifat tersuai CSS, dan mereka lebih berkuasa daripada yang mungkin kelihatan pada pandangan pertama. Cara mereka dapat dinilai semula dan mengemas kini UI apabila harta yang mereka bergantung kepada perubahan adalah seperti versi yang lebih mudah dari kereaktifan yang anda dapatkan dari kerangka JavaScript mewah seperti Vue. Adalah adil untuk mengatakan kereaktifan dibina terus ke dalam penyemak imbas dalam bentuk pembolehubah CSS!

Sekarang kita mempunyai pendekatan ini untuk pengesahan dan lembaran gaya kita mengetahui penyelesaiannya di bawah sedar pada bila -bila masa kita menetapkan nilai yang sah di Sudoku kita, kita hampir melaksanakan Solver!

Menyelesaikan setiap 4 × 4 sudoku

Ingat ketika kami memperkenalkan pembolehubah pertengahan ini?

 .Sudoku { 
  --Puzzle-1-found: min (var (-square-1-matches-puzzle-1), 
  /*...*/ 
  var (-persegi-16 perlawanan-puzzle-1));
}

Itu bukan sahaja membuat kod pengesahan lebih mudah ditulis dan difahami. Mengetahui mana dari 288 teka -teki yang mungkin dipadankan membolehkan kita menulis pemecah!

 #No-Solution {
  Z-indeks: 1;
  warna: merah;
}
@for $ penyelesaian-indeks dari 1 hingga 288 {
label [untuk = penyelesaian-#{$ penyelesaian-indeks}] {
  kursor: penunjuk;
  z-indeks: calc (var (-teka-teki- #{$ larutan-indeks} -found) * #{$ penyelesaian-index});
}

#solution-#{$ penyelesaian-indeks}: diperiksa ~ .sudoku {
  @for $ persegi dari 1 hingga 16 {
    -Square-#{$ square} -solution: "#{nth (nth ($ penyelesaian, $ penyelesaian-indeks), $ square)}";
    -Square-#{$ square} -color: Grey;
    --Auto-#{$ square}: 1;
  }

Saya meletakkan jamak pilihan dalam perkataan "teka -teki (s)" di atas kerana, jika pengguna tidak mengisi banyak kotak, mungkin terdapat banyak penyelesaian yang sah. Saya menggali pemecah seperti JavaScript ini yang dapat menghasilkan penyelesaian dengan cepat walaupun anda tidak menentukan nilai yang cukup untuk manusia dapat menyelesaikannya tanpa meneka.

Caranya dalam pemecah CSS saya ialah walaupun butang "menyelesaikan" kelihatan seperti satu butang, ia sebenarnya 288 label butang radio disusun satu di atas yang lain - tetapi semuanya kelihatan sama. Bayangkan timbunan kad: mereka semua mempunyai reka bentuk yang sama di belakang, tetapi nilai yang berbeza di bahagian depan. Logik Solver meletakkan kad dengan penyelesaian di bahagian atas longgokan dengan z-indeks, jadi jika anda mengambilnya dan membaca bahagian lain, anda akan sentiasa mempunyai penyelesaian yang betul. Ia masih berfungsi jika terdapat banyak penyelesaian yang betul, kerana penyelesaian yang datang kemudian dalam senarai jawapan yang sah akan diletakkan di atas, kerana kami mengira indeks Z dengan mengalikan bendera dengan $ larutan-indeks. Sekiranya tiada penyelesaian dipadankan, indeks Z dari semua butang menyelesaikan akan menjadi sifar dan, kerana versi kurang upaya butang dengan mesej "teka-teki tidak sah" mempunyai indeks Z, ia akan muncul di atas. Jika nombor satu teka -teki adalah penyelesaian, kita masih akan melihat teka -teki satu butang, kerana butang tidak sah datang lebih awal dalam HTML.

Konteks menyusun boleh berkelakuan tidak disangka-sangka jika anda tidak membacanya, jadi ini adalah ilustrasi yang bagus dari salah satu tingkah laku yang tidak jelas.

Menjana teka -teki

Kita boleh memikirkan teka -teki yang menjana sebagai versi pemecah lain dengan keperluan tambahan.

1. Sesetengah dataran rawak perlu dibiarkan tidak dapat diselesaikan apabila butang penjana teka -teki ditekan.
2. Gabungan dataran yang tidak dapat diselesaikan secara rawak dan penyelesaian yang betul harus berbeza setiap kali butang penjana ditekan.
3. Menekan butang menyelesaikan harus mendedahkan penyelesaian lengkap.
4. Jika pengguna secara manual menyelesaikan teka -teki yang dihasilkan, kami ingin memberi ganjaran kepada mereka dengan skrin kemenangan yang memberikan maklum balas tentang seberapa cepat mereka menyelesaikannya.

CSS tidak mempunyai fungsi rawak () (walaupun SASS tidak), jadi mungkin tidak jelas bagaimana kita boleh mendapatkan tingkah laku yang berbeza setiap kali kita menekan butang yang sama. Tetapi penjelasan solver di atas adalah sedikit spoiler kerana ia sudah melakukan sesuatu yang serupa dengan butang yang kelihatan seperti elemen tunggal tetapi sebenarnya berbeza bergantung pada penyelesaian yang sah semasa.

Persoalan dengan butang "Menjana" adalah bagaimana kita boleh mendapatkan hasil yang tidak dapat diramalkan setiap kali kita mengklik. Kredit penuh kepada Alvaro Montoro untuk artikelnya mengenai trik CSS tentang bagaimana untuk menghasilkan nilai-nilai rawak yang seolah-olah dengan hanya CSS. Gabungan hacks butang radio dan menghidupkan susunan susunan seolah -olah berfungsi dengan baik. Saya berusaha keras untuk melihat sama ada saya boleh melakukannya tanpa markup tambahan, tetapi saya menyimpulkan bahawa pendekatan ini adalah yang terbaik dan paling mudah. Untuk menggunakan semula dek analogi kad dari penjelasan solver, ia seperti dek kad teka -teki tidak dapat dilihat sepanjang masa supaya setiap kali anda mengambil kad, anda mendapati ia mempunyai wajah yang berbeza.

Kita boleh menggabungkan rawak pseudo ini dengan rawak sebenar yang ditawarkan oleh fungsi SASS Rawak () untuk memberikan nilai ulangan permainan Sudoku kami.

 @for $ J dari 0 hingga 287 {
  label [untuk = menjana#{$ j}] { 
    Animasi-Delay: #{$ J * .35S}; 
  }
  label [untuk = menjana#{$ j}]: aktif: selepas {
    Z-indeks: 300;
    Lebar: 100%;
  }
  #Generate#{$ J}: Daftar ~ .sudoku { 
    $ blockcounts: (1: 2, 2, 2, 3: 3, 4: 2);
    $ shufflesquares: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);

     @for $ persegi dari 1 hingga 16 {
       $ index1: rawak (16);
       $ index2: rawak (16);

       $ temp: nth ($ shufflesquares, $ index1);
       $ shufflesquares: set-nth ($ shufflesquares, $ index1, nth ($ shufflesquares, $ index2));
       $ shufflesquares: set-nth ($ shufflesquares, $ index2, $ temp);
     }

     @each $ square dalam $ shufflesquares {
       $ row: Ceil ($ Square/4);
      $ lajur: 1 ($ persegi - 1) % 4;

       $ blok: jika ($ row & lt; 3, 1, 3) jika ($ lajur  0) {
         $ blockCounts: Map -merge ($ blockcounts, ($ block: $ count - 1));
        -Square-#{$ square} -Unsolved: 0; 
        -Square-#{$ square} -equals-#{$ val}: 1;

        @for $ nilai lain dari 1 hingga 4 {
          @if ($ lain-nilai! = $ val) {
            -Square-#{$ square} -Equals-#{$ Other-value}: 0;   
          }
        }

        -Square-#{$ square} -color: Grey;
        --Auto-#{$ square}: 1;
      }
    } 
  }
}

Bagi setiap "blok" (itu Sudoku-bercakap untuk bahagian 4 × 4 grid Sudoku dengan sempadan tebal di sekelilingnya), kami menggunakan SASS secara rawak memilih dua daripada empat dataran untuk menyelesaikan, kecuali satu persegi "gimme" yang hanya mempunyai satu persegi yang tidak dapat diselesaikan. Oleh kerana logik pengesahan dan logik pemecah menggunakan pembolehubah dan bukannya secara langsung berdasarkan nilai -nilai yang diperiksa menggunakan pemilih nilai, pengesahan dan penyelesaian logik kedua -duanya berkelakuan dengan cara yang sama. Ini bermakna nilai yang dihasilkan dianggap sama seperti jika pengguna telah memilih setiap nilai secara individu.

Pemasa penyelesaian

Inilah pemasa yang berdetik melalui sebelas saat pertama.

Kami akan menyelam ke CSS untuk pemasa penyelesaian seketika, tetapi mari kita mula -mula menunjukkan apa yang kelihatan seperti angka tanpa CSS limpahan yang ditetapkan untuk tersembunyi, dan dengan sempadan hijau di sekitar elemen untuk menunjukkan bahagian yang akan dapat dilihat oleh pengguna pada setiap langkah animasi.

Kami menggunakan animasi kekunci kekunci yang tidak terhingga untuk mengalihkan senarai digit yang mungkin satu watak ke kiri pada selang yang dikehendaki (kami menggunakan font monospaced supaya kami dapat memastikan setiap watak akan menduduki lebar tepat yang sama). Digit detik akan pergi dari sifar sehingga sembilan, dan digit seterusnya hanya perlu sehingga lima, meningkat sekali sepuluh saat sebelum kedua -dua digit saat perlu ditetapkan semula ke sifar.

Setiap digit menghidupkan menggunakan teknik yang sama yang boleh anda gunakan untuk menghidupkan lembaran spriteHeet dalam CSS, kecuali bukannya beralih ke latar belakang imej untuk mencapai kesan animasi, kami mengalihkan elemen pseudo yang mengandungi digit yang mungkin.

Seperti banyak tugas dalam CSS, terdapat lebih daripada satu cara untuk membuat kaunter animasi di CSS. Tetapi ada yang tidak berfungsi dengan penyemak imbas dan benar-benar menuntut preprocessor untuk memastikan kod itu ringkas. Saya suka pendekatan saya kerana ia agak pendek. CSS melakukan mengangkat berat untuk mengetahui kapan dan bagaimana untuk bergerak ke digit seterusnya. Semua markup yang perlu dilakukan ialah membuat pemegang tempat di mana setiap digit pergi, memberikan kita kebebasan untuk bagaimana kami membentangkan pemasa kami.

Inilah markup:

 <dana>  
  <div> </div>
  <div>: </div>
  <div> </div>
  <div> </div>
</dana>

... dan CSS:

 .stopwatch {
  Teks-Align: Pusat;
  Font-Family: Monospace;
  Margin-Bottom: 10px;
}

.symbol {
  lebar: 1ch;
  Limpahan: Tersembunyi;
  Paparan: inline-flex;
  saiz font: 5ch;
}

.Symbol: nth-child (1) :: selepas {
  Animasi: Langkah -langkah 3600s (6, akhir) tak terhingga;
  Kandungan: '012345';
}

.Symbol: nth-child (2) :: selepas {
  Animasi: Unit 600s Langkah (10, Akhir) Infinite;
  Kandungan: '0123456789';
}

.Symbol: nth-child (4) :: selepas {
  Animasi: Langkah -langkah Ten 60s (6, akhir) Infinite;
  Kandungan: '012345';
}

.symbol: nth-child (5) :: selepas {
  Animasi: Unit 10s Langkah (10, Akhir) Infinite;
  Kandungan: '0123456789';
}

@keyframes unit {
  ke {
    Transform: TranslateX (-10ch);
  }
}

@KeyFrames TENS {
  ke {
    Transform: TranslateX (-6ch);
  }
}

Anda mungkin melihat bahawa kaunter bermula lagi dari awal selepas satu jam. Itu kerana semua bilangan lelaran ditetapkan kepada Infinite. Kita boleh memperbaikinya, tetapi saya fikir jika seseorang menghabiskan satu jam menyelesaikan salah satu daripada ini, mereka mempunyai masalah yang lebih besar daripada teka -teki Sudoku kanak -kanak. ?

Apa yang tidak adil, bagaimanapun, adalah jika kita membenarkan pemasa yang sama untuk terus berdetik walaupun pengguna menghasilkan teka -teki segar. Bolehkah kita membuatnya semula? Ternyata kami telah menyelesaikan masalah itu dalam langkah pertama dalam artikel ini, di mana kami dikeluarkan, dan ditambah semula secara kondusif, animasi untuk pemilih nombor kami menggunakan: kelas pseudo aktif. Kali ini, ia sebenarnya lebih mudah kerana setiap kali kita memukul butang "menjana", kami mahu mengeluarkan animasi pada semua digit untuk membawa mereka kembali ke sifar. Kemudian animasi akan bermula sekali lagi apabila butang radio tidak lagi aktif. Jadi, ia hanya satu baris CSS yang kita perlukan untuk membuat penetapan semula pemasa setiap kali kita menjana!

 input [name = menghasilkan]: aktif ~ .stopwatch .symbol :: selepas {
  Animasi: Tiada;
}

Sudokumeter ™ onton

Walaupun teka -teki diselesaikan, saya ingin menawarkan nilai replay dengan memberikan maklum balas visual pemain mengenai prestasi masa mereka dan mencabar mereka untuk menyelesaikan teka -teki lebih cepat. Saya juga ingin memberi ganjaran kepada anda untuk membuatnya jauh melalui artikel dengan memberi anda tolok pekeliling minimalis yang boleh digunakan semula dalam projek anda sendiri. Berikut adalah pen yang berdiri sendiri dengan tolok bulat untuk anda bereksperimen:

Kami menggunakan prinsip yang sama yang digunakan dalam skrin menang dari permainan kecuali, dalam pen ini, penarafan yang dipaparkan dikawal dengan hacks butang radio, sedangkan dalam permainan ia dikawal oleh animasi yang perlahan -lahan bergerak ke penarafan yang lebih rendah ketika masa berlalu. Tolok dalam permainan tersembunyi menggunakan kelegapan sifar dan hanya dipaparkan (dan dijeda) apabila kita mengesan bahawa teka -teki telah diselesaikan secara manual.

Mari kita jelaskan bagaimana kita mencipta ilusi separa bulatan yang dibahagikan kepada dua sisi dengan warna. Ia sebenarnya adalah bulatan CSS penuh dengan separuh bahagian bawah yang tersembunyi menggunakan limpahan: tersembunyi.

Kami menggunakan kedua-dua warna menggunakan elemen pseudo yang mengisi separuh daripada

.

Kemudian kami memotong lubang di tengah untuk membuat donat, menggunakan bulatan lain yang dipenuhi dengan warna latar belakang permainan, dan pusat yang di dalam bulatan yang lebih besar menggunakan Flexbox.

Seterusnya, sembunyikan separuh daripadanya dengan membuat saiz separuh bekas setinggi bulatan penuh dan, sekali lagi, menggunakan limpahan: tersembunyi.

Sekarang, jika kita berputar donat kita, ia kelihatan seperti tolok yang mengisi dengan hijau atau kehilangan hijau, bergantung kepada sama ada kita berputar donat kita dengan darjah negatif atau positif!

Kami ingin meletakkan label di kedua -dua hujung tolok dan keterangan di antara mereka, dan ternyata Flexbox adalah penyelesaian yang elegan:

 #rating {
  saiz font: 30px;
  Paparan: Flex;
  lebar: 300px;
  Justify-Content: Space-antara;
}

Inilah markup:

 <dana>
  <div>? </div>
  <div> </div>
  <div>? </div>
</dana>

Itulah yang kita perlukan untuk meletakkan label kita. Jika penarafan

adalah lebar diameter bulatan kami, Flexbox akan meletakkan label emoji di hujung dan keterangan di tengah bulatan!

Bagi mengawal apa yang dikatakan oleh penerangan, ia sama dengan helah yang kami gunakan untuk pemasa kami, kecuali kali ini kami melakukannya secara menegak dan bukannya secara mendatar kerana deskripsi maklum balas adalah panjang berubah -ubah. Tetapi mereka sentiasa ketinggian yang sama.

Kesimpulan

Saya membuka artikel ini dengan soalan mengenai sama ada CSS adalah bahasa pengaturcaraan. Sukar untuk membantah logik yang kami dapat melaksanakan menggunakan hanya CSS bukan pengaturcaraan, tetapi sebahagian daripadanya adalah penggunaan CSS yang luar biasa untuk mengatakan paling sedikit. Seperti banyak perkara di dunia teknologi, jawapannya seolah -olah "bergantung", dan sebanyak yang kita pelajari tentang CSS melalui eksperimen ini, kami juga menggambarkan bahawa pengaturcaraan adalah sama banyak tentang minda sebagai teknologi.

Tidak ada artikel penggodaman CSS yang lengkap tanpa penafian bahawa walaupun kami telah menunjukkan kami dapat melaksanakan logik yang canggih dalam CSS dan belajar banyak dalam proses, kebanyakan masa kita mungkin tidak boleh melakukan ini dalam pengeluaran, kerana kebolehkerasan, kebolehcapaian, dan beberapa kata lain yang berakhir dengan "idenah."

Tetapi kita juga melihat bahawa beberapa perkara-seperti apa yang saya fikirkan sebagai kereaktifan terbina dalam yang anda dapatkan dengan pembolehubah CSS-agak mudah di CSS tetapi mungkin memerlukan kita untuk melalui gelung di JavaScript, dan mungkin menggunakan rangka kerja. Dengan menolak had CSS, kami akhirnya membuat tolok pekeliling yang saya percaya boleh digunakan secara munasabah dalam aplikasi pengeluaran, dan mungkin juga menjadi perkara yang betul berbanding mencapai beberapa widget JavaScript yang mungkin berat dan melakukan lebih daripada yang kita perlukan.

Pada senarai hajat saya untuk aplikasi CSS Sudoku adalah butang reset. Pada masa ini, jika anda ingin memulakan permainan Sudoku yang baru, anda perlu menyegarkan semula halaman tersebut. Itulah batasan hacks butang radio yang menjadikan CSS hacking berbeza dengan pengaturcaraan konvensional. Pada satu peringkat, saya percaya saya dapati penyelesaian apabila saya fikir animasi boleh digunakan untuk menetapkan pembolehubah CSS-tetapi ternyata itu adalah sebahagian daripada CSS Houdini dan hanya disokong dalam pelayar berasaskan kromium. Jika dan kapan itu disokong di mana -mana, ia akan membuka kotak hacks Pandora dan menjadi sangat menyeronokkan. Dalam artikel masa depan, saya juga boleh meneroka mengapa ciri yang tidak berbahaya ini dalam Chrome adalah penukar permainan untuk penggodaman CSS.

Juri masih keluar sama ada pemecah Sudoku 81 persegi penuh mungkin di CSS, tetapi jika anda ingin tahu, meninggalkan maklum balas anda dalam komen. Sekiranya orang yang cukup menginginkannya, kita boleh turun lubang arnab itu bersama -sama dan melihat apa sudut gelap CSS yang kita dapat menerangi dalam proses itu.

Atas ialah kandungan terperinci Menjana (dan menyelesaikan!) Sudokus dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!