それで、コードチャレンジ＃1の勝者はいますか？

1週間前、クイックコードチャレンジ＃1を立ち上げました。勝者を発表する時が来ました！この課題は非常に困難です。多くのエントリはありませんが、勝利の作品の品質は疑いの余地がありません。

最初に、チャレンジのさまざまなアプローチのいくつかを確認しましょう。

私の試み

挑戦的なルールのメーカーとして、私はそれを最初に試してみます。

（もちろん、私は自分自身に賞を授与することはできません...少なくとも私はできないと思いませんか？ CSSとSVGソリューションの両方を試しました - 私の強み - そして、スクリプトを使用しないことにしました。 CSSとSVGには実際のランダム関数がないため、通常のアニメーションループを実際よりもランダムに見せることです。これが私の解決策です。

純粋なCSS「オーガニックの外観」を見るAlex（@Alexmwalker）によるCODEPEN 好きなようにコードを表示できますが、主な関心事はです。 EKGラインアニメーションは、外部SVGと2つの別々のアニメーションループのみを使用します。

cssアニメーション（旅行）緑の勾配を左から右にループします。重されたマスクはECGラインを形作ります。

• を使用して開始時間を相殺することです。負の遅延（例：
）を使用すると、アニメーションループの中間点にすぐにジャンプできます。これは非常に便利なパフォーマンスのトリックです。
• すべてのアニメーションは、CSSウィンドウの上部にある単一のSASS変数によって制御されます。この数値を変更すると、読み取り数とECG速度が大きくなります。
• Chromeで動作し、広範なテストはありませんが、どこでも機能するはずです。
• animation-delay純粋なCSSメソッドにはいくつかの制限がありますが、全体的な効果に非常に満足しています。私が好きではない要素を改善するにはJSが必要です。 animation-delay: -9s
3位：Paulob
• $animation-time: 5s; 10年以上にわたってPaulがSitePointユーザーの長期的な貢献者、メンター、コンサルタントを持つことができて非常に幸運です（おそらく20年近く？）。この場合、彼は素晴らしいSVGソリューションを作成するために、太陽の下で貴重な休日の時間を犠牲にしました。
• Paul O’Brien（@paulobrien）の「ping」マシンをCodepen

を表示します

ポールは言った：

これは、グラフィックスのSVGであり、モーション効果を提供するためのアニメーション線形勾配です。時間があれば、それを正しく描画して応答性の高いものにします。毎回同じSVGを繰り返すだけでなく、少しランダムに見せることができます。

今、あなたはプールに戻る必要があります:)

ポール、私たちはあなたに敬意を表します！

（さらに、SitePoint Tシャツ、コースター、またはその他のSitePoint周辺製品を送信する方法があります。）

トライアルファースト賞：Nickwatton

この最初のコードチャレンジには多くのエントリはありませんが、上位2つの作品の品質にまったく問題はありません。実際、私たちは両方の最高の作品が報酬に値すると考えていたので、それぞれ200ドルのAmazonギフトカードボーナスを与えることにしました。

ニックワットンの作品はまさに私が思うことです。

codepen

でニックワットン（@2mogs）を表示します ニックが説明するように、彼の解決策：

私はそれらが好きなので、粒子システムを使用してください！また、描画コンテキストをほぼ透明な黒で埋めることで、非常に安価なトラック効果を得ることができます。

RAFはアニメーション全体をスムーズに実行し、ハートビートアニメーションは再帰的

によって制御されます。私は

を使用して、フレームごとの非フレーム効果を駆動します。つまり、オーガニック感覚のためにわずかにランダムな間隔でトリガーできることも意味します。 Heartbeat（）メソッドは、心臓の速度を制御し、わずかにランダム化します。これは、心臓とパルスラインに表示されます。

setTimeout() setTimeout()NickのJSおよびCanvasメソッドは、他の方法を一致させるのが難しい柔軟性を提供します。 SVGベースのアプローチを使用して、これらの粒子効果を模倣する方法を想像できません。

わずかにランダム化されたアニメーション速度も比較的簡単です。これはJSなしでは鍛造するのは難しいですが、このアニメーションの信頼性を高めます。

裁判一等賞：Davidomarmach

デイビッドは締め切りによって彼の仕事を提出しました - 彼がやったことを嬉しく思います。私はそれが私を笑顔にしたことを認めなければなりません。

David Omar FloresChávez（@davidomarf）による「ping」マシンをCodepen 最初に、デイビッドは実際のECGマシンがどのように出力を生成し、この知識を彼のアニメーションに組み込んだかを真剣に研究し始めました。彼はまた、変動する血圧、温度、酸素飽和度の測定値、さらにはヘモグロビン数を増加させました。このことはとてもリアルに感じます。

しかし、デビッドは2つのキラーXファクター要素も追加しました。

1. オーディオ：クラシックマシン「ビープ音...ビープ...ビープ...」は、心拍数が上がると多くのドラマを追加します。
2. インタラクティブ：自動「パッシブランダム性」に加えて、Davidはユーザーがカーソル位置を介して心拍数を制御することもできます。左端に移動すると患者が眠ります。右に移動すると、患者がアドレナリンを心臓に注入できます。

ECG速度の制御が限られているため、このユニットは映画/テレビシーンで本当に役立つ可能性があります。

ニックの解決策と同様に、ECGユニットはJavaScriptのキャンバスに書かれていますが、DavidはP5.JSライブラリを使用しています。私は以前にP5を使用したことがありませんが、描画、アニメーション、オーディオのモジュールを使用すると、このようなプロジェクトを構築するための優れた基盤のようです。

全体として、これは非常に印象的な貢献です。

デビッド、ニック、ポールに感謝します。すぐにご連絡いたします。

次の課題：コードチャレンジ＃2：CSSバトル

次の課題では、CSSBattles.devで友人と協力して、第4ラウンドの戦いを後援します。 3週間の間に、3つの現金報酬と20のSitePoint Premiumメンバーシップが競争します。詳細は私の次の投稿で発表されます。

コードチャレンジ1 FAQ（FAQ）

コードチャレンジ1の目的は何ですか？

Code Challenge 1は、コーディングスキルをテストおよび改善するように設計されています。これは、世界中のコーダーが参加し、コーディングの知識を使用して特定の問題を解決する競争力のあるプラットフォームです。この課題の主な目標は、競争力のある環境でのコーディングスキルの学習、共有、改善を奨励することです。

コードチャレンジ1でどのようなプログラミング言語を使用できますか？

コードチャレンジ1でプログラミング言語を使用できます。課題は、使用する言語ではなく、コードの論理と効率性に関するものです。 Python、Java、C、またはその他の言語が得意かどうかにかかわらず、参加できます。

コードチャレンジ1の勝者を決定するにはどうすればよいですか？

コードチャレンジ1の勝者は、コードの効率と精度に基づいて決定されます。コードは複数のテストケースに対してテストされ、最小時間内にすべてのテストケースに合格するコードは勝者として宣言されます。

初心者はコードチャレンジ1に参加できますか？

もちろん

！コードチャレンジ1は、すべてのスキルレベルのコーダーに開かれています。あなたが初心者であっても、参加することをお勧めします。これは、自分自身を学び、改善し、挑戦する絶好の機会です。

コードチャレンジ1で問題を解決するのが困難な場合はどうなりますか？

問題を解決するのが難しい場合は、心配しないでください。あなたはいつでもコミュニティに助けを求めることができます。多くの経験豊富なコーダーがあなたを助けて導く準備ができています。

コードチャレンジ1の準備方法

コードチャレンジ1の準備をする最良の方法は、定期的にコーディングを練習することです。さまざまなオンラインプラットフォームからの問題を解決し、コーディングブックを読み、他のコーディングの課題に参加できます。あなたが練習すればするほど、あなたはより良くなります。

コーディングの方法がわからない場合、Code Challenge 1に参加できますか？

コードの方法を知ることは、コードチャレンジ1に参加するための前提条件ですが、学習するのに遅すぎることはありません。ゼロからコーディングを学ぶためのオンラインリソースがたくさんあります。基本が得られたら、コーディングチャレンジへの参加を開始できます。

コードチャレンジ1に参加することの利点は何ですか？

コードチャレンジ1に参加することには多くの利点があります。コーディングスキルを向上させ、テストスキルのための競争力のあるプラットフォームを提供し、学習の機会を提供するのに役立ちます。また、世界中のコーディングコミュニティとつながるのにも役立ちます。

コードチャレンジ1はどのくらいの頻度で保持されますか？

コードチャレンジ1の頻度は異なる場合があります。毎週、毎月、または毎年恒例のイベントにすることができます。公式ウェブサイトをチェックアウトするか、最新のアップデートについてニュースレターを購読するのが最善です。

勝利コードチャレンジ1に報酬はありますか？

勝利コードチャレンジ1に対する報酬は異なる場合があります。一部の課題は現金報酬を提供しますが、他の課題は認識、証明書、または実際のプロジェクトに参加する機会を提供します。通常、報酬の詳細はチャレンジの説明に記載されています。

以上がそれで、コードチャレンジ＃1の勝者はいますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。