ビジュアルプログラミング「Scratch」で神経衰弱ゲームを作ってみよう

©Valed.press

この連載では、Scratchを使って、ゲームをつくりながらプログラミングを楽しんでもらいたい!と考えています。しかも子どもだけでなく、大人も一緒に。第7回は「カードの絵」をシャッフル!「カードの絵」に入っているコスチューム番号の順番をランダムに並べ替えます。

入れ替えに必要な変数をつくろう

並べ替えは、1番の「カードの絵」から順番に、乱数で出た「カードの絵」と入れ替えるという手法を使います。

まず乱数で出たカード番号を取っておくために、変数「入れ替えるカード番号」をつくりましょう。

「変数」から「変数をつくる」をクリック。

「新しい変数名:」に、「入れ替えるカード番号」と入力し「OK」をクリック。

変数「入れ替えるカード番号」ができます。

同様に、変数「元の絵」を用意しましょう。「元の絵」は、カードを入れ替えるときに、元の絵の値を取っておくための変数です。

入れ替えのためのテクニック

「カードの絵」の値を入れ替えるときには、ちょっとテクニックが必要です。たとえば1番と5番を入れ替えるとします。

【ステップ1】1番の「カードの絵」を「元の値」にコピー

【ステップ2】5番の「カードの絵」を1番の「カードの絵」にコピー

【ステップ3】「元の値」を5番の「カードの絵」にコピー

こうして手順を追っていくと、どんなふうにブロックを組めばいいのかわかってきます。なぜ「元の絵」の変数を用意したのか、わかりましたか?

元の絵を取っておかずに、ステップ2のコピーをやってしまうと、どちらも同じ値になってしまい、入れ替えができなくなってしまうからなんですね。では、今からブロックで組みましょう。

入れ替えるカードを指定する

「カード番号を1ずつ変える」をスクリプトエリアにドラッグ。

「カード番号を 0 にする」をその下にはめ込み、「カード番号」の文字の横にある▼の部分をクリック。「入れ替えるカード番号」に変更します。

「演算」の「1から 10 までの乱数」を「入れ替えるカード番号を 0 にする」の「0」のところにはめ込み、「10」を「12」にします。

入れ替えの【ステップ1】

「変数」の「カード番号を 0 にする」をその下にはめ込み、「カード番号」を「元の絵」に変更します。

「カードの絵の 1 番目」を「元の絵を 0 にする」の「0」のところに、はめ込みます。

「カード番号」を「カードの絵の 1 番目」の「1」のところに、はめ込みます。

入れ替えの【ステップ2】

【ステップ1】でつくったブロックの下に、「カードの絵の 1 番目を 1 で置き換える」をはめ込み、右側の「1」を、「カードの絵の 1 番目」にします。

「カードの絵の 1 番目をカードの絵の 1 番目で置き換える」の左側の「1」を「カード番号」、右側の「1」を「入れ替えるカード番号」にします。

入れ替えの【ステップ3】

【ステップ1】でつくったブロックの下に、「カードの絵の 1 番目を 1 で置き換える」をはめ込みます。

左側の「1」を「入れ替えるカード番号」、右側の「1」を「元の絵」にします。これで、入れ替えのブロックができました。

入れ替えを繰り返す

これをカードの枚数、つまり12回分繰り返すようにしましょう。「制御」の「10 回繰り返す」を入れ替えのブロックが中に入るようにもってきて、「10」を「12」に変えます。

「カード番号を0にする」を、その上にはめ込みます。

はめ込んだ「カード番号を0にする」をドラッグして、「12回繰り返す」のブロックと一緒に、「x座標を-180、y座標を120にする」の上にはめ込みます。スクリプトエリアの右下に表示されている虫メガネのマークをクリックして、表示の大きさを変えながら作業すると、やりやすいです。

シャッフルの確認

(緑の旗のマーク)をクリックして、実行してみましょう。カードの絵がランダムに入れ替わります。

カードをすべて裏にする

シャッフルの確認ができたところで、いったんカードをすべて、裏にしましょう。表示するのに、カードの絵を指定している部分を削除しましょう。

削除する場合は、削除したいブロックを右クリックし「ブロックの削除」をクリック。

複数のブロックを組み合わせてつくったものは、一番外側のブロックを右クリック。組み合わせたブロックの個数を確認して、削除を選びます。

ブロックの削除ができたら、今度は、裏のカードが表示されるようにします。「見た目」の「コスチュームをコスチューム1にする」を「x座標を-180、y座標を120にする」の下にはめ込みます。

実行すると、すべて裏のカードになります。

改ページ----------------------------

カード番号の計算

クリックされたら、カードを開くようにしましょう。クリックされたのがどのカード番号かは、次の式で計算します(この計算式がよくわからなかったら親に聞いてみましょう)。

x座標、y座標はクリックされた位置です。x座標に240、y座標に180を足しているのは、原点ではなく、左上端の点を起点に考えたほうが計算しやすいからです(「x -(-240)」なので「x+ 240」、「- ( y - 180)」なので「-y + 180」になります)。

y座標にマイナスが付いているのは、下向きに行が増えているからです。120は列の幅、または行の高さです。

小数点以下の数字は切り捨てます。たとえば、(-15, 90)の位置がクリックされたら、カード番号は2、(150,-80)の位置がクリックされたら、カード番号は12なります。

カード番号がわかれば、その番号の「カードの絵」を表示すればいいわけです。計算用に「列」と「行」の変数をつくり、「カード番号を0にする」のブロックを3つつなげて、上2つのブロックは「列」「行」に変えます。

列の計算式を組む

「演算」の「… + …」をスクリプトエリアにドラッグし、左側に「動き」の「x座標」をはめ込み、右側は「240」と入力。

「演算」の「… / …」の左側に「x座標+240」のブロックをはめ込み、右側は「120」にします。

「演算」の「…の絶対値」をスクリプトエリアにドラッグし、「絶対値」を「切り下げ」に変更。

「(x座標+240)/120」のブロックをはめ込みます。

「演算」の「… + …」の左側に、「((x座標+240)/120)の切り下げ」のブロックを、はめ込み、右側は「1」にします。

「変数」の「カード番号を 0 にする」の「カード番号」を「列」に変更し、「0」のところに、「(((x座標+240)/120)の切り下げ)+1」をはめ込みます。

行の計算式を組む

y座標にマイナスを付けるためには-1を掛けます。

あとは、列の計算式と同様にブロックを組んで行きます。列の計算では、「240」だったところが「180」になっているので、お間違いなく。

カード番号の計算式を組む

カード番号は変数の「列」と「行」を使って、「((行-1)*4)+列」となるように組んで行きます。

それを、「カード番号を 0 にする」の「0」のところにはめ込みます。

カードを開く

「カード番号」の計算が出来たら、その番号の「カードの絵」を表示しましょう。「見た目」の「コスチュームを コスチューム1 にする」の「コスチューム1」のところに、「変数」から、「カードの絵の1番目」をドラッグして、はめ込み、「1」のところを「カード番号」にします。

これらのブロックの先頭に、「イベント」の「このスプライトが押されたとき」をはめ込みます。

これで、クリックされたカードが開くようになりました。

しかし、2枚以上開いてしまいますし、開いたカードをまた裏に戻すこともできません。次回はそのあたりをつくっていきましょう。

これまでの【親子で楽しもう!Scratchプログラミング】はこちら

親子でScratchを楽しもう - バレッド(VALED PRESS)