IM: DAY 10

Subclass Dance Party sprintが完成しました.△個人的には、これまで行った中で最も興味深いスプレーだと思います.授業の復習の過程で、一人で「アヤラン」の番組を作ったのは、私にとってとても役に立ちました.やっぱり遊びながら学ぶのが最高...ほほほ
フェアと初めてコンセプトミーティングを開いた時に「病味だけどかわいいコンセプト」で行うことにしたのが結果に大きく影響しました.
最も重要なのは、2つのモード(かわいいモードとハードモード)がランダムに適用される部分です.最近追加されたダンサーモードによって全体的なモードが変化し、劇的な効果(?)を生み出しています.映画に出演した.スプレーをしているうちに、やりたいことが増えてきていて、やりたい機能が完全に実現していなかったのですが、最初は思い通りにできたので、今はとても気持ちがいいです.🤩.

今日やったこと

Subclass Dance Party Sprint - Done (pair)

はlineUpの方法を実現し、ダンサーを一列に並べた.

新しく作成されたダンサーの位置をランダムに設定するsetPosition方法の実施
座標

を変更して、新しく作成したダンサーをスクリーン内に配置します.

で3種類のダンサークラスを実現

BlinkyDancerClass

SpinDancerClass

MovingDancerClass

2add a dancerボタンをクリックするとspanではなくimgの作成に変更されます

画像urlをランダムに設定setImageUrl方法により

を実現する.

は、画像urlリストのランダムインデックス

を取得するgenerateNumの方法を実現する.

は、移動ダンサーがスクリーン

から離れるように設定されている.

ダンサーが移動方向を変更すると、画像

を反転するように設定.

新しく作成されたエンティティに基づいて「フルモード変更」機能を実現

モードで各ダンサーの顔を変更するswitchMode法により

を実現する.

モードで舞台背景を変更する機能(CSSクラス制御)

をサポートする.

かわいいモードの背景の下でcssアニメーションを使って背景色の5段(キーフレームを使う)

を変更します

で生成されたシンボル数が一定数を超える場合に初期化する機能を実現
HTML <audio>タグを使用してバックミュージック(自動再生、無限反復、あまり大きくなく、音量初期化は0.2)を設定し、101 bodyまたはheadの任意の位置に置くことができます.

アルゴリズム解答

覚えておきたい

via Dance Party

HTMLにバックミュージックを挿入する方法

色をCSSアニメーション

に変更する方法

JavaScriptを用いて動画を実現する方法

すべてのgif画像のサイトを検索

を検索した後、貼り付けフィルタを適用すると、背景の透明なgif画像が見つかります.

via Algorithm

Array(n).fill(value [, start, end])

n個の要素を持つ配列を作成したいのですが、値がまだ確定していない場合はArray(n)を使用できます.各オブジェクトの値は不確定で、呼び出し時に未定義の値が表示されます.

const lengthTen = Array(10);
console.log(lengthTen.length); // 10

この値を後で入力したい場合は、fillメソッドを使用します.

const lengthTen = Array(10); // [empty × 10]
lengthTen.fill(7); // start, end를 지정하지 않으면 value로 전부 채운다.
console.log(lengthTen); // [7, 7, 7, 7, 7, 7, 7, 7, 7, 7]

fillメソッドは、既存の値の配列にも適用することができる.

const jackpot = [7, 7, 7];
jackpot.fill(6, 0, 1);
console.log(jackpot); // [6, 7, 7]

[...Array(n).keys()]

これはObject.keys()の方法を適用する方法である.この方法を使用して、インデックス値を要素とする配列を作成します.

const indexOfArr = [...Array(3).keys()];
console.log(indexOfArr); // [0, 1, 2]

Etc.

Reactのhookコンセプトを表示する前に、設計モードのファイバモードを理解してください.

コールバック関数のthisがwindowオブジェクトとなる.

勉強を続ける

CSS transform transition

requestAnimationFrame(Function) vs. setInterval()/setTimeout()

HTMLデータ-表示属性

明日やること

lesson/Stack, Queue

lesson/Graph, Tree, BST

pair/Implementation Stack/Queue

pair/Coplit - Stack, Queue