フロントエンド

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

前回の動画はこちら。

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

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

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

動画はこちら。

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

Sponsored link

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

動画の中で、

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

『HSB』

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

『HSL』

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

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

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

コードはこちら。

『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. 音楽

    コードの転回形の練習方法をまとめてみた【大人のピアノ】
  2. CG関連

    【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】
  3. CG関連

    【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっ…
  4. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  5. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
PAGE TOP