tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

each と swich

現在テトリスを作っています。難航しています。

今日は他の人のテトリスの記事を参考にしていましたが、全く持って理解できないコードだらけで、、、、精進します。

 

 

--- each()

配列を扱い、ループ処理を簡単に行ってくれるjqueryの記法

 

 

--- 特定のリストタグにcssをつけたい!

などどいうとときに活躍します。

 

<ul>

<li>リンゴ</li>

<li>メロン</li>

<li>バナナ</li>

</ul>

よく見かけるやつですね。

 

$('list').each(function(i, e){

    if( (e).text === 'リンゴ'){

        $(e).addClass("apple"); 

    };

});

eachの第一因数はインデックス、第二因数はhtmlを返します。

 

--- switch 

each()とは違い、javascriptのコード。こちらもループ処理を行ってくれますが、条件式と処理がよりわかりやすく明記されています。

 

--- キーボードのSpaceキーを押した時だけ処理を実行したい!

 

キーボード処理である document.onkeydown を利用すればこういうことができます。

document.onkeydown =(e)=>{

    switch(e.code){

        case "Space":

            console.log("処理します!")

            break;

        case "ArrowRight":

            console.log("処理します!")

            break;

        case "ArrowLeft":

            console.log("処理します!")

            draw();

            break;

    }

}

onkeydown はキーを押した瞬間に実行する処理のことです

e.code で押したボタンの番号や文字を返します

switch("値")を case 値: で識別し、該当するときに処理を実行します。

 

--- まとめ・感想

 実際にテトリスの記事コードを読むとこれらのようなループ文ばっかりでした。each文で一つ一つのセルを描画して、switchでボタンの処理をするという感じにみて取れました。どんどんアウトプットもして、より細やかな説明ができるよう努めます!!