Jadi, adakah kita mempunyai pemenang untuk Cabaran Kod #1?

Seminggu yang lalu kami melancarkan Quick Code Challenge #1 dan sudah tiba masanya untuk mengumumkan pemenang! Cabaran ini agak sukar. Walaupun tidak banyak penyertaan, kualiti kerja yang menang tidak dapat dipertikaikan.

Pertama, mari kita semak beberapa pendekatan yang berbeza dalam cabaran.

percubaan saya

Sebagai pembuat peraturan yang mencabar, saya akan mencubanya terlebih dahulu.

(

Sudah tentu, saya tidak dapat memberikan penghargaan kepada diri saya ... sekurang -kurangnya saya tidak fikir saya boleh ... betul?! )

Saya mencuba kedua -dua penyelesaian CSS dan SVG - kekuatan saya - dan memutuskan untuk tidak menggunakan sebarang skrip. Oleh kerana tidak ada fungsi rawak sebenar dalam CSS dan SVG, silap mata adalah untuk membuat gelung animasi biasa kelihatan lebih rawak daripada yang sebenarnya. Ini adalah penyelesaian saya.

Lihat CSS tulen "Penampilan Organik" ECG Animation oleh Alex (@AlexmWalker) pada Codepen

anda boleh melihat kod yang anda suka, tetapi kebimbangan utama ialah:

animasi garis EKG menggunakan hanya satu SVG luaran dan dua gelung animasi berasingan.
animasi CSS (perjalanan) gelung kecerunan hijau dari kiri ke kanan. Topeng yang ditapis membentuk garis ECG.
Saya mencipta 6 "Heartbeats ECG" yang unik pada graf SVG dan tetapkannya sebagai Sprite Keyframe. Saya bertukar -tukar kerangka utama ini untuk menjadikannya kelihatan rawak (saya menambah bilangan kecil di bahagian bawah untuk membuat kerangka kekunci beralih lebih jelas).
Animasi kedua merawat setiap "jantung" sebagai sprite yang berasingan dan beralih ke sprite baru setiap kali ia berlalu - tetapi ini tepat pada masanya berlaku di bahagian gelap gelung, apabila ia tidak dapat dilihat.
Sudah tentu, kerana setiap "unit jantung" menggunakan animasi CSS yang sama, kita biasanya mengharapkan mereka semua menunjukkan kerangka utama yang sama. Caranya untuk membuat mereka kelihatan berbeza adalah dengan menggunakan
• untuk mengimbangi masa mula mereka. Jika kita menggunakan kelewatan negatif (mis. ), kita boleh melompat ke mana -mana titik pertengahan dalam gelung animasi dengan segera. Ini adalah trik prestasi yang sangat berguna. animation-delay animation-delay: -9s Semua animasi dikawal oleh pembolehubah SASS tunggal di bahagian atas tetingkap CSS-
. Menukar nombor ini akan mengubah nombor bacaan yang besar dan kelajuan ECG.
• $animation-time: 5s; Ia berfungsi untuk Chrome dan tidak mempunyai ujian yang luas, tetapi harus bekerja di mana -mana sahaja.
Kaedah CSS tulen mempunyai beberapa batasan, tetapi saya cukup berpuas hati dengan kesan keseluruhan. Saya memerlukan JS untuk meningkatkan unsur -unsur yang saya tidak suka.

Tempat Ketiga: Paulob

Kami sangat bertuah kerana mempunyai Paul sebagai penyumbang jangka panjang, mentor dan perunding kepada pengguna SitePoint selama lebih dari sepuluh tahun (mungkin hampir dua puluh tahun?). Dalam kes ini, dia mengorbankan masa percutiannya yang berharga di bawah sinar matahari untuk mencipta penyelesaian SVG yang indah.

Lihat mesin "ping" Paul O'Brien (@paulobrien) pada Codepen

Paul berkata:

Ia hanya SVG untuk grafik dan kecerunan linear animasi untuk memberikan kesan gerakan. Jika saya mempunyai masa, saya akan menariknya dengan betul dan menjadikannya responsif, bukan hanya mengulangi SVG yang sama setiap kali untuk menjadikannya kelihatan sedikit rawak.

sekarang anda mesti kembali ke kolam :)

Paul, kami memberi penghormatan kepada anda!

(Di samping itu, kami akan mencari cara untuk menghantar T-shirt SitePoint, Coaster atau produk periferal Sitepoint lain.)

Hadiah Pertama Percubaan: Nickwatton

Walaupun tidak banyak penyertaan dalam cabaran kod pertama ini, tidak ada masalah dengan kualiti dua karya teratas. Sebenarnya, kami fikir kedua -dua karya terbaik berhak mendapat ganjaran, jadi kami memutuskan untuk memberi mereka bonus kad hadiah $ 200 Amazon.

Kerja Nickwatton adalah apa yang saya fikirkan.

Lihat Nick Watton (@2mogs) pada codepen

seperti yang dijelaskan oleh Nick, penyelesaiannya:

Gunakan sistem zarah kerana saya suka mereka! Juga, anda boleh mendapatkan kesan trek yang sangat murah dengan mengisi konteks lukisan dengan hampir telus hitam, yang mewujudkan trek pudar untuk garis "ping" saya.

RAF menjadikan keseluruhan animasi berjalan lancar, dan animasi jantung dikawal oleh rekursif setTimeout(). Saya menggunakan setTimeout() untuk memandu kesan bukan bingkai-bingkai, yang juga bermakna saya boleh mencetuskannya pada selang sedikit rawak untuk rasa organik. Kaedah degupan jantung () mengawal dan sedikit rawak kadar denyutan jantung, yang dapat dilihat pada garis jantung dan nadi.

kaedah JS dan kanvas Nick memberikan fleksibiliti bahawa kaedah lain sukar dipadankan. Saya tidak dapat membayangkan bagaimana meniru kesan zarah menggunakan pendekatan berasaskan SVG.

Kelajuan animasi sedikit rawak juga agak mudah. Ini sukar untuk ditempah tanpa JS, tetapi ia menambah kredibiliti animasi ini.

Hadiah Pertama Percubaan: Davidomarmach

David mengemukakan karyanya dengan tarikh akhir-kami gembira. Saya mesti mengakui bahawa ia membuatkan saya tersenyum.

Lihat mesin "ping" oleh David Omar Flores Chávez (@davidomarf) pada Codepen

Pertama, David mula serius mengkaji bagaimana mesin ECG sebenar menghasilkan output dan memasukkan pengetahuan ini ke dalam animasinya. Beliau juga meningkatkan tekanan darah, suhu, pembacaan ketepuan oksigen, dan juga hemoglobin. Perkara ini terasa sangat nyata.

Tetapi David juga menambah dua elemen pembunuh X-Factor.

1. Audio: Mesin Klasik "Beep ... Beep ... Beep ..." menambah banyak drama apabila kadar denyutan jantung meningkat.
2. Interaksi: Sebagai tambahan kepada beberapa "rawak pasif" automatik, David juga membolehkan pengguna mengawal kadar jantung mereka melalui kedudukan kursor. Bergerak ke kiri jauh akan meletakkan pesakit anda tidur - bergerak ke kanan akan membiarkan pesakit anda menyuntik adrenalin ke dalam hati.

Kawalan terhad kelajuan ECG menjadikan unit ini mungkin benar -benar berguna dalam adegan filem/TV.

Seperti penyelesaian Nick, unit ECG ditulis pada kanvas di JavaScript, tetapi David menggunakan perpustakaan P5.JS. Saya tidak pernah menggunakan P5 sebelum ini, tetapi dengan modul untuk lukisan, animasi dan audio ia kelihatan seperti asas yang bagus untuk membina projek seperti ini.

semua dalam semua, ini adalah sumbangan yang sangat mengagumkan.

terima kasih dan tahniah kepada David, Nick dan Paul. Kami akan menghubungi anda tidak lama lagi.

Cabaran Seterusnya: Cabaran Kod #2: CSS Battle

Untuk cabaran seterusnya, kami akan bekerjasama dengan rakan -rakan di CSSBatts.dev untuk menaja pusingan keempat pertempuran. Sepanjang tiga minggu, akan ada 3 ganjaran tunai dan 20 keahlian premium SitePoint untuk bersaing. Butiran akan diumumkan dalam jawatan saya yang seterusnya.

cabaran kod 1 FAQ (FAQ)

Apakah tujuan cabaran kod 1?

Cabaran Kod 1 direka untuk menguji dan meningkatkan kemahiran pengekodan anda. Ini adalah platform yang kompetitif di mana coders dari seluruh dunia mengambil bahagian dan menggunakan pengetahuan pengekodan mereka untuk menyelesaikan masalah yang diberikan. Matlamat utama cabaran ini adalah untuk menggalakkan pembelajaran, perkongsian dan meningkatkan kemahiran pengekodan dalam persekitaran yang kompetitif.

bahasa pengaturcaraan apa yang boleh saya gunakan dalam cabaran kod 1?

Anda boleh menggunakan mana -mana bahasa pengaturcaraan dalam cabaran kod 1. Cabarannya bukan mengenai bahasa yang anda gunakan, tetapi mengenai logik dan kecekapan kod. Sama ada anda baik di Python, Java, C, atau mana -mana bahasa lain, anda dialu -alukan untuk mengambil bahagian.

Bagaimana untuk menentukan pemenang Code Challenge 1?

Pemenang Code Challenge 1 ditentukan berdasarkan kecekapan dan ketepatan kod mereka. Kod ini akan diuji terhadap pelbagai kes ujian, dan kod yang melepasi semua kes ujian dalam masa minimum akan diisytiharkan sebagai pemenang.

Bolehkah pemula mengambil bahagian dalam cabaran kod 1?

Sudah tentu! Cabaran Kod 1 dibuka kepada coders semua tahap kemahiran. Walaupun anda seorang pemula, anda digalakkan untuk mengambil bahagian. Ini adalah peluang yang baik untuk belajar, memperbaiki dan mencabar diri sendiri.

Bagaimana jika saya menghadapi masalah menyelesaikan masalah dalam cabaran kod 1?

Jika anda menghadapi masalah dalam menyelesaikan masalah, jangan risau. Anda sentiasa boleh meminta bantuan komuniti. Terdapat banyak coder berpengalaman yang bersedia membantu dan membimbing anda.

bagaimana untuk mempersiapkan cabaran kod 1?

Cara terbaik untuk mempersiapkan cabaran kod 1 adalah untuk mengamalkan pengekodan secara teratur. Anda boleh menyelesaikan masalah dari pelbagai platform dalam talian, membaca buku pengekodan, dan mengambil bahagian dalam cabaran pengekodan lain. Semakin banyak anda berlatih, semakin baik anda akan lakukan.

Jika saya tidak tahu bagaimana untuk kod, bolehkah saya mengambil bahagian dalam cabaran kod 1?

Semasa mengetahui cara kod adalah prasyarat untuk menyertai Cabaran Kod 1, tidak pernah terlambat untuk belajar. Terdapat banyak sumber dalam talian untuk anda belajar pengekodan dari awal. Sebaik sahaja anda mempunyai asas -asas, anda boleh mula mengambil bahagian dalam cabaran pengekodan.

Apakah faedah menyertai Cabaran Kod 1?

Terdapat banyak manfaat untuk menyertai Cabaran Kod 1. Ia dapat membantu anda meningkatkan kemahiran pengekodan anda, memberikan anda platform yang kompetitif untuk menguji kemahiran, dan memberi anda peluang pembelajaran. Ia juga boleh membantu anda berhubung dengan komuniti pengekodan dari seluruh dunia.

Berapa kerapkah kod cabaran 1 diadakan?

kekerapan cabaran kod 1 mungkin berbeza -beza. Ia boleh menjadi acara mingguan, bulanan atau bahkan tahunan. Adalah lebih baik untuk menyemak laman web rasmi atau melanggan surat berita mereka untuk kemas kini terkini.

Adakah terdapat ganjaran untuk memenangi cabaran kod 1?

Ganjaran untuk memenangi cabaran kod 1 mungkin berbeza -beza. Sesetengah cabaran menawarkan ganjaran tunai, sementara yang lain menawarkan pengiktirafan, sijil, atau peluang untuk mengambil bahagian dalam projek sebenar. Butiran ganjaran biasanya disebut dalam keterangan cabaran.

Atas ialah kandungan terperinci Jadi, adakah kita mempunyai pemenang untuk Cabaran Kod #1?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!