前回の動画はこちら。
プレイヤーの作成に続き、今回は、
- ブロックの実装
- 色付け
- ブロックを複数作成
という内容になっていました。
動画はこちら。
動画の補足という形でメモ書きをしておきたいと思います。
プロセッシング簡単なゲーム実況 配色 HSB/HSL
動画の中で、
色付けのあたりで解説している『HSB』は、
過去記事でもご紹介しているので、
参考にしていただければと思います。
『HSB』
- Hue 色相
- Saturation 彩度
- Brightness 明度
『HSL』
- Hue 色相
- Saturation 彩度
- Lightness 輝度
プロセッシング簡単なゲーム実況 配列 filter コールバック関数
動画の中で、
『filter』メソッドをさらっと飛ばしてしまっていたので補足をしておきます。
コードはこちら。
// blockIsAliveという関数
function blockIsAlive(entity) {
// ブロックの位置が生存圏内なら true
// -100 は適当な値（ブロックが見えなくなる位置ならOK
return -100 < entity.x;
}
// 配列.filter(インプットにblockIsAlive) という形
blocks = blocks.filter(blockIsAlive); // 生きているブロックだけ残す
『JavaScript』には、配列用の関数が数多くあります。
- メソッド、メンバ関数・・オブジェクトやクラスの中の関数のこと
配列名の後に『ピリオド』をつけて、そのあとに配列用の関数を続けて書くようになっています。
中でも『配列.filter()』 は、
『引数(インプット)』に関数をとる関数になります。
『引数(インプット)』にフィルタをかける関数を指定することで、
条件にあったらフィルターをかける、というような動きをさせることができます。
今回は『blockIsAlive』という関数を使っているので、
ブロックのX位置が-150 より大きいブロックだけフィルタをかけ、
表示しているという形になります。
ほかにも数多くの『配列用の関数(Arrayメソッド)』がありますが、
数が多くて全部暗記はしんどいので、
こんなことができるんだなぁくらいでざっくり覚えておいて、
必要があればマニュアルを見る、でいいかなと思います。
よく使う関数一覧も参考までにかいておきます。
- Array.length ・・配列の長さ
- Array.toString ・・ 文字列に変換
- Array.indexOf ・・指定要素の最初のキー取得
-
Array.keys ・・すべてのキーを取得
- Array.values ・・すべての値を取得
-
Array.slice ・・要素の抜き出し
-
Array.pop ・・末尾要素取得、削除
- Array.push ・・末尾に要素追加
-
Array.shift ・・先頭の要素取得、削除
-
Array.reverse ・・降順に並び替え
-
Array.sort ・・昇順に並び替え
-
Array.forEach ・・配列内要素をインプットの関数で順に処理
- Array.map ・・順に加工
- Array.filter ・・条件にあった要素で配列生成
これからも時間つくってプログラミング実況やっていこうと思っています。
モチベーションアップ、励みになりますので、
よろしければぜひチャンネル登録をお願いいたします。
第3弾動画アップしました。
この記事へのコメントはありません。