フロントエンド

【プロセッシング】簡単なゲームをつくってみた その2配列・コールバック関数【P5.js】


Warning: Trying to access array offset on value of type bool in /home/mochaccino8/coinbaby8.com/public_html/wp-content/themes/mag_tcd036/functions/short_code.php on line 36

前回の動画はこちら。

プレイヤーの作成に続き、今回は、

  • ブロックの実装
  • 色付け
  • ブロックを複数作成

という内容になっていました。

動画はこちら。

動画の補足という形でメモ書きをしておきたいと思います。

Sponsored link

プロセッシング簡単なゲーム実況 配色 HSB/HSL

動画の中で、

色付けのあたりで解説している『HSB』は、
過去記事でもご紹介しているので、
参考にしていただければと思います。

『HSB』

  • Hue 色相
  • Saturation 彩度
  • Brightness 明度

『HSL』

  • Hue 色相
  • Saturation 彩度
  • Lightness 輝度
アオキ
BとLが違いますが、どちらも同じような意味かなと思います。

プロセッシング簡単なゲーム実況 配列 filter コールバック関数

動画の中で、
『filter』メソッドをさらっと飛ばしてしまっていたので補足をしておきます。

コードはこちら。

// blockIsAliveという関数
function blockIsAlive(entity) {
 // ブロックの位置が生存圏内なら true
 // -100 は適当な値(ブロックが見えなくなる位置ならOK
 return -100 < entity.x;
}

// 配列.filter(インプットにblockIsAlive) という形
blocks = blocks.filter(blockIsAlive); // 生きているブロックだけ残す

『JavaScript』には、配列用の関数が数多くあります。

アオキ
正確にいうと、『Arrayオブジェクト』の『メソッド』になります。
  • メソッド、メンバ関数・・オブジェクトやクラスの中の関数のこと

配列名の後に『ピリオド』をつけて、そのあとに配列用の関数を続けて書くようになっています。

中でも『配列.filter()』 は、

『引数(インプット)』に関数をとる関数になります。

アオキ
インプットに入る関数のことを、コールバック関数と呼んだりします。

『引数(インプット)』にフィルタをかける関数を指定することで、

条件にあったらフィルターをかける、というような動きをさせることができます。

今回は『blockIsAlive』という関数を使っているので、
ブロックのX位置が-150 より大きいブロックだけフィルタをかけ、
表示しているという形になります。

アオキ
なかなかややこしいので徐々に慣れる、でいいのかなと思います。

ほかにも数多くの『配列用の関数(Arrayメソッド)』がありますが、

数が多くて全部暗記はしんどいので、

こんなことができるんだなぁくらいでざっくり覚えておいて、

必要があればマニュアルを見る、でいいかなと思います。

マニュアルはこちら |(MDN)

よく使う関数一覧も参考までにかいておきます。

  • 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弾動画アップしました。


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  2. MENTA

    MENTA「メンタ」始めました
  3. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  4. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
  5. STEAM教育

    熊本市東区でプログラミングのワークショップやります〜夏休み特別企画 こども向けス…
PAGE TOP