めりけんこICTクラブはこちらから

VOL.2|【3】拡張機能のペンで作った「落書きボード」をカスタマイズ~選択色を表示~

VOL.2【2】では、落書きボードをカスタマイズして「好きな色を選択」して落書きする機能と「消す」機能を追加しました。
今回のVOL.2【3】では、変数を使って「現在選択している色」を表示する機能を追加します。

前回までのプロジェクトは下のリンクで確認してくださいね。

※プログラムは様々な方法で作れます。このページは色々なコードの中の一つだということを頭に入れておいてね。
こんな方法でもできる!とか、こんな方法はどうかな?とかひらめきや探求しながら楽しんで作ってね!

完成したプログラム

先に完成したプロジェクトをのせておきます。

ムツオ

まず、どんな動きをするのか確認しとくべし。

プロジェクトを見る

むぎこ

では、さっそく一緒に作ってみましょう!

1.スプライトの設置

VOL.2【2】で作成したプロジェクトに「選択している色(いまの色)」のスプライトを準備しましょう。

今の色の作成

赤枠を確認して「選択している色(いまの色)」スプライトを準備します。
今までのスプライトの作成を参考に、画像のようにスプライトを作成します。

2.コードを組み立てる

今回、コードに追記が必要なスプライト「ペン」と新しく追加したスプライト「選択している色(いまの色)」のみ記載しますね。

スプライト(ペン)のコード

変数(色)を作成する方法

  1. ブロックに色を設定するときは、色部分を選択すると色の設定が表示されます。
  2. 詳細の下部分にある、スポイトのアイコンをクリックすると色を選択するレンズが表示されます。
  3. 設定したい色部分にレンズを移動しクリックします。

スプライト(今の色)のコード

変数(色)の設定方法

  1. イベントの「〇を送る」のプルダウンを開く
  2. 新しいメッセージをクリック
  3. 新しいメッセージ名に「色」を入力
  4. OKボタンを押す

3.プログラムを実行する

プログラムが完成したら、旗をクリックしてスタートします。マウスをクリックした状態で絵や文字を描いてみてください。
スマホなら指でなぞってみてください。
さらに、描きたい色をマウスクリックまたはタップして色が変更されて描かれるか確認してみましょう!

プロジェクトを見る

まとめ

今回のポイントは、変数を使い「変数の値が○○なら」「コスチュームを○○にする」といった、変数の値によって別のコスチュームを表示させる処理を書いたことです。変数の使い方なんとなくわかりましたか?

さて、拡張機能のペンを使って落書きボードを作り、カスタマイズしました。
作って、実行してみると色々問題点が出てくるものです。「白い色を使いたい」や「全部消す」ではなく、消しゴムのように消したいとか思ったのではないでしょうか。
そんな風に感じたら素晴らしいです!!納得のいくまでカスタムしちゃいましょう^^

関連リンク

プログラミングで使う「変数」ってなに?意味や使い方を簡単に説明するよ

この記事は役に立ちましたか?

もし参考になりましたら、下記のボタンで教えてください。

mugico

mugico

日々勉強です。仕事はシステムエンジニアをしています。 生産管理系のソフトウエア開発をメインに行いながらWEB作成なども承っております。

関連記事