連載インデックスへ
マウスだけでもプログラミングできる!マウスだけでもプログラミングできる!(2)
- GUIベースの環境でプログラミングを始めよう -

Scratchプログラミングの二歩目、自由な動きを付ける

鳥人間 郷田まり子
2009/10/7

変数の変化と条件文

 変数を変更するためのブロックも各種用意されています。

「[変数]を[ ]にする」……固定された値を代入します。
「[変数]を[ ]ずつ変える」……現在の値に引数の分の値を加算します。ここに負の値を入れれば減らしてゆくこともできます。
「[変数]を表示する/隠す」で……画面に現在の値を表示するかどうかを決めます。

 変数の値に応じて動きを変えたい、という場合には、「制御」にある「もし[ ]」なら」や「もし[ ]なら/でなければ」「[ ]まで繰り返す」といったブロックと、「数」の中の等号・不等号などのブロックを使います。

 「もし[ ]なら」や「もし[ ]なら/でなければ」「[ ]まで繰り返す」などのブロックには、引数のテキストボックスの代わりに、小さな六角形のへこみが付いています。ここに、条件を表すブロックをはめ込みます。

 「数」の中の等号・不等号などのブロックには、テキストボックスを丸くしたようなへこみが付いています。ここには、通常の四角いテキストボックスと同様、直接数値を書き込むこともでき、また、「変数」を入れることもできます。

下のプログラムは、

スタートボタンがクリックされたら、まずキャラクターの『満腹度』(作成した変数)の値を『10』にセットする

満腹度が0になるまで、ブロック内の動き「1秒待つ→10歩動かす→満腹度を『-1』変化させる(1減らす」」を繰り返す

ブロックを抜ける条件「満腹度=0」を満たしたら、次の処理に移り、「おなかがすきました……」という吹き出しを出す

 という処理をするものです。実行すると、1秒ごとに、スプライトが動いて変数の値が減り、10秒経過したところでストップ、「おなかがすきました……」と表示されます。

※プログラミング経験のある方へ……scratch では、配列・リストも使うことができます。「変数」のブロック群の一番下に「リストを作る」というものがあります。これが配列の作成に相当します。要素の追加・削除・挿入・値の変更・要素数の取得などの機能が用意されており、自由度の高いプログラムが作成できるようになっています。

制御ブロックのいろいろ

 前回の最後に、「指定した回数の処理を行う制御ブロック」が登場しました。

 この「繰り返し」以外にも、有用な制御ブロックがあります。先ほどの「…まで繰り返す」のように、作成した変数を使って条件を設定し、分岐や繰り返しを行う制御ブロックもあります。

 「もし…なら」

 一定の条件を満たしている場合だけ、ブロックの中の処理を行います。緑色の六角形の「条件」をはめ込んで使います。

「もし…なら」+「でなければ」

 「もし…なら」に似ていますが、こちらは、指定した条件を「満たした場合」と「満たしていない場合」の両方の処理を指定することができます。2つの部分に分かれていて、上には「条件を満たしている場合の処理」を、下には「条件を満たしている場合の処理」を入れます。

「ずっと」

 文字通り「ずっと」です。同じ動作を、スクリプトが停止するまでずっと繰り返します。

スプライト同士の相互作用

 スプライト同士のやりとりを行うのに便利なのが、「…を送る」というブロックと「…を受け取ったとき」の連携。どこかで発せられた信号を受信し、それをきっかけとして何か処理を行うということができます。

 2つのスプライトを作成し、片方のスクリプトに「…を送る」を書きます。「…」の部分には、何か分かりやすい文字列を入力してください。

 もう1つのスプライト(スプライト2)に、その信号を受け取ったときに行われる処理を書きます。

 上のように書くと、スプライト1をクリックすると「ありがとう」という信号が発信され、それを受信したタイミングでスプライト2が「どういたしまして」という吹き出しを表示する、という相互作用を実現することができます。

制御ブロックを入れ子にすることもできる

 制御ブロックの中に別の制御ブロックを入れ子にすることもできます。ただし、あまり何階層も入れ子にしてしまうと、今度はプログラムの見通しが悪くなってしまいますので、注意が必要です。

条件の組み合わせ

 条件ブロックには「…かつ…」「…または…」といった、条件の組み合わせができるものがあります。

 例えば、以下の条件は、変数の値が5より大きく10より小さい場合を表しています。

次回予告

 次回は、さらに面白く、本格的なプログラムを作り始めます。

 今回はデフォルトの画像を動かしてみただけでしたが、今度はオリジナル素材を取り込み、静止画を組み合わせてアニメーションを作成し、さらにマウスの動きに反応して動作させてみます。


■ @IT関連記事

Flashの基礎を無料で習得! ActionScript入門
ActionScriptを知っていますか? Flash技術の要となる言語で無料で簡単にFlashアプリケーションを作れます。そのActionScriptについて初心者のために一から丁寧に解説していきます
初めてのJavaScriptプログラミング
初めてのプログラミングにはJavaScriptがお勧め。Webブラウザとメモ帳があれば、本格的なプログラミングに挑戦できます
Coding Edge」フォーラム
デザイナーのためのWeb学習帳
Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう!
デザインハック」コーナー

郷田まり子/ごうだまりぽ 株式会社鳥人間

1980年東京生まれ、プログラマ。建築製図から人工衛星観測まで、ユーザーに驚きをもたらす数々のWebサービスを実装してきた。現在、創業二年社員二名の株式会社鳥人間にて、主にWeb開発案件を手掛ける。本業の傍ら、目新しくて面白そうな物にはとりあえず飛びついてハックしている

1-2  

 INDEX
マウスだけでもプログラミングできる!(2)
非プログラマのためのプログラミング講座
  Page1
キーボード・マウス処理でインタラクティブに
変数を使う
Page2
変数の変化と条件文
制御ブロックのいろいろ
スプライト同士の相互作用
条件の組み合わせ
次回予告

[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間