この記事は、 Jasmine Tea アドベントカレンダー 2023 の第14日目です。
はじめに
Jasmine Tea (ジャスミンティー) は、プログラミングの楽しさを多くの人に知ってもらうために作られたプログラミング言語です。初心者が学びやすい仕組みで、実際に社会で使われている多くのプログラミング言語に応用できる基礎が身に付きます。
ここでは、Jasmine Teaを実際に開いて、実行画面をクリックしたりタップしたときに反応するプログラムの作り方を紹介したいと思います。
まず、Studio 画面を開いてください。もし Studio 画面をまだ開いたことがなければ、 Studio画面を表示する - Jasmine TeaでHello, world! を参考にして Jasmine Tea の試用を開始してください。
クリックやタップされたことをチェックしよう
Jasmine Tea では、プログラムの実行時に「キーボードのどのキーが押されたか」をチェックすることができることを、前日の Jasmine Teaでキー入力を扱おう の記事で紹介しました。
しかし、iPad では、物理キーボードを持っていなければ、キーボードは画面上に出てくるソフトウェアキーボードですし、カーソルキーはありません。そのため、例えば iPad 向けのゲームでは、キー入力ではなく、実行画面上をタップすることでゲームを進められるようにしておくことが良いでしょう。もちろん、PC であっても、マウスで実行画面をクリックすることで、同様の操作となります。
ここでは、実行画面上をクリックまたはタップ（以後タップと呼びます）されたことをチェックして、タップされた位置に図形を描くプログラムを作ってみましょう。
まずは、メインループ（ゲームやアニメーションで基本となる無限ループのこと）を作ります。Studio 画面の左にあるエディターに、以下のプログラムを入力してください。
do
loop
Jasmine Tea では、実行画面をタップされたことをチェックするために、tap 命令 が提供されています。この tap 命令を使うことで、実行画面のどこがタップされたかを知ることができます。
では、エディターの1行目に do 命令が書かれていますが、その次の行から、以下のプログラムを入力してください。
tap x,y
tap 命令のパラメーターは、以下となります。
-
x- 実行画面上でタップされたときの横方向の座標を代入する変数の名前。 -
y- 実行画面上でタップされたときの縦方向の座標を代入する変数の名前。
もしタップされていなかったときは、各パラメーターで指定した変数には、どちらも -1 が代入されます。つまり、変数に代入された数が -1 かどうかで、実行画面がタップされていたかどうかを知ることができます。
実際に、実行画面上をタップされたかどうかをチェックするプログラムを追加してみましょう。tap 命令が書かれた行の次の行から、以下のプログラムを入力してください。
if x<>-1 then
end if
if 命令 を使って、条件分岐を行っています。if 命令のパラメーターで指定した条件式 x<>-1 を日本語で表現すると、「変数 x に代入されている数が -1 かどうか」です。<> は、その左と右の値が「一致しなかった」ときに成り立つ、という働きがあります。
これで、実行画面がタップされたときにのみ、何か処理を行う準備が整いました。
タップされた場所に円を描いてみよう
そろそろクリスマスですので、クリスマスっぽいプログラム（？）にしてみましょう。クリスマスといえば、緑と赤の組み合わせがそれっぽいですよね。
Jasmine Tea で使える色の番号として、緑は 12、赤は 2 を使いましょう。
まず、緑と赤のどちらで円を描くかは、タップするごとにランダムに決めてみましょう。2分の1の確率とします。Jasmine Tea では、ランダムな数（乱数といいます）を random 関数 で求めることができます。 random(0,1) としてあげれば、2分の1の確率で 0 か 1 のどちらかを得ることができます。if 命令を使って、0 なら赤、1 なら緑、と条件分岐してあげれば良さそうです。
エディターに if x<>-1 then と書かれた行の次の行から、以下のプログラムを入力してください。
if random(0,1)=0 then
c=2
else
c=12
end if
上記のプログラムの if 命令の条件式 random(0,1)=0 は、以下のように実行されます。
-
random(0,1)が実行されて、0もしくは1のどちらかが決まる。 -
random関数の結果が0だったときは、0=0となり、これは=の左右で同じ数なので、条件式が成り立つと判断し、if命令の次の行が実行される。 -
random関数の結果が1だったときは、1=0となり、これは=の左右で異なる数なので、条件式は成り立たないと判断し、else命令の次の行が実行される。
条件分岐された結果、変数 c にそれぞれの色の番号の数を代入しています。これで、円の色を決めることができました。
circle 命令 を使って、円を描くプログラムを追加しましょう。エディター内で c=12 と書かれた行の「次の次の行」、つまり end if 命令の次の行に、以下のプログラムを追加してください。
circle (x,y),50,c,c
円の中心の座標は、tap 命令で得られた座標が縦横それぞれ代入されている変数 x と変数 y を指定しています。また、円の半径は 50 として、円弧の色と塗りつぶしの色は、もちろん変数 c に代入されている色の番号が使われるようにします。
エディター内が以下のようになっていれば大丈夫です。
お待たせいたしました。このプログラムを実行してみましょう！Studio 画面の右下にある青色の「実行」ボタンを押して、プログラムを実行してください。そして、実行画面の上の好きな場所を、次々とタップしてみてください。
ちょっとしたお絵描きプログラムができあがりました。やっぱり、赤と緑だけで、クリスマスっぽくなりますね。
明日は何をつくるの？
今までの記事にて、「数」と「文字列」が出てきました。明日は、それらを複数束ねて「数列」などを扱うことができるようになる「配列」について取り上げる予定です。