第3回：Small Basicを使ってみよう

こんにちは。「50歳からのプログラミング講座」を担当する JLabo（ジェイラボ） です。

前回は「Small Basic」の開発環境を構築して「ブロック崩し」のベースになるプログラムを勉強しました。今回は、実際にボールが上下左右に勝手に動くプログラムを作ってみましょう。

前回と同様に、プログラムを1文字ずつ手で入力するのではなく、「コピー、貼付け」で進めていくのですが、スペルミスが少ない代わりに個々のコマンドがなかなか頭に入りません。

そこで、前半・後半の２つのブロックに分け、それぞれのコマンドの動作について確認しながら進めていきます。

では早速ですが、前回構築した「Small Basic」の開発環境を起動してください。

その前に、まずは「マスク」のお話をします。ここでの「マスク」は「面」を意味します。

「Small Basic」の画面は２枚あります。1枚目はタイプライターみたいなもので、「文字専用」です。そして２枚目は「グラフィック用」で、アクリル板とサインペンの関係をイメージしてください。おのおの透明です。

まずはじめに、１枚目の面に「今日はいい天気です。」と表示させる練習をします。

TextWindow.WriteLine("今日はいい天気です。")

と入力し、「実行」を押してみましょう。

いま入力していただいたのは、パソコンに命令する言葉です。これを人間用に変えてみると・・・

文字専用画面に１行文字を書きなさい。 内容は “今日はいい天気です。”

となります。相手が人間であれば、多少違っても理解してもらえます。

文字専用画面に文字を書いてちょうだい。 それは “今日はいい天気です。”

と書き換えても理解できますね。ペットですら多少違っても理解してくれますが、コンピュータの場合はそうはいきません。１文字違っても「エラー」になります。

またコマンドは「.」の左と右で役割が違います。左側は「オブジェクト」と呼ばれています。「Small Basic」のオブジェクトはとても少なく「13個」しかありません。右側は「メソッド」と呼ばれています。

呼び方は役割によっていろいろありますが、面倒なのでここでは左を「メインコマンド」、右を「サブコマンド」と呼ぶことにしましょう。

先ほど「Small Basic」の画面は２枚あると説明しましたが、入力していただいたメインコマンドは「TextWindow」、グラフィック用のメインコマンドは「GraphicsWindow」となります。

TextWindow.WriteLine("今日はいい天気です。")

についてもう少し掘り下げてみましょう。

コメント="今日はいい天気です"
TextWindow.WriteLine(コメント)

と書き換えても理解できますよね。

このように、一度「変数」を置き換えるとプログラムが見やすくなるというメリットがあります。無駄な行が増えるとお考えかもしれませんが、今のパソコンはそんなこと気にする必要がありません。メモリーオーバーとか処理が遅くなるということは考えなくても大丈夫です。

さらに進めます。グラフィック画面に文字を表示するには、「文字の色」と「座標」を指定する必要があります。ちょっとだけ面倒になってきます。

コメント="今日はいい天気です"
赤色="Red"
GraphicsWindow.BrushColor =赤色
GraphicsWindow.DrawText(10,20,コメント )

これで雰囲気はおわかりいただけますでしょうか。

それでは次に今回のプログラムに進みましょう。「Small Basic」 の左上の新規ボタンをクリックします。

そして、以下のコマンドを丸ごとコピーして「Small Basic」に貼り付けてください。赤字は説明なので、コピーする場合は先頭の [ ’ ] は必ず付けたままにしてください。コメント行は貼り付けると斜体文字になります。

' ブロック崩しサンプル 2020/05/01 ダウンロード
' Step03 右に表示エリア
' Step03_01

タイトル1="ジィジが作った"
タイトル2="太郎のブロック崩し"

'コメント：これは フォームの上にタイトルを表示するコマンドです。
GraphicsWindow.Title =タイトル1 + タイトル2

'コメント：使わない色もありますが標準なので記述しておきます。
黒色="Black"
濃青="DarkBlue"
濃緑="DarkGreen"
濃水色="DarkCyan"
濃赤="DarkRed"
濃マゼンタ="DarkMagenta"
濃黄="DarkYellow"
濃白="Gray"
灰色="DarkGray"
青色="Blue"
緑色="Green"
水色="Cyan"
赤色="Red"
マゼンダ="Magenta"
黄色="Yellow"
白色="White"
オレンジ="orange"
背景色= GraphicsWindow.GetColorFromRGB(64, 64, 64)
'コメント：表示する画面の座標を設定します。
幅1 = 640 'ゲームエリア
幅2 = 400 ' データ表示エリア
高さ = 480

'コメント：ブロック崩しでの定数を設定しておきます。
ボールサイズ =32
縦速度Max = 10
横速度Max = 7

重力 = 0.015
反発1=1.2

ボール座標x = 幅1 / 2 - ボールサイズ /2
ボール座標y = 50 ' 箱の高さ * (行終了+2)

縦速度 = 0
横速度 = 3

GraphicsWindow.Clear() ' 画面を初期化のために消去する

' Graphics Window の背景色を取得または設定します
GraphicsWindow.BackgroundColor =背景色

'横幅を広げる
GraphicsWindow.Width = 幅1 + 幅2 'ADD ' Graphics Window の横幅を取得または設定します
GraphicsWindow.Height = 高さ 'ADD ' Graphics Window の高さを取得または設定します

'コメント：設定値で実際の画面を描画します。
座表X1 = 幅1 + 2 ' 仕切りの線座標
座表X2 = 幅1 + 2
座表Y1 = 5
座表Y2 = 高さ

'コメント：PenColor のくせに文字の色ではありません。図形を描く時の色です。
GraphicsWindow.PenColor = 白色 ' 図形の描画に使うペンの色

'コメント：図形の塗りつぶしや文字の色です。 続けてサイズ、フォント名、太字にする、しない を順に設定します
GraphicsWindow.DrawLine(座表x1,座表y1,座表x2,座表y2) ' 点から点へ直線を描きます。

GraphicsWindow.BrushColor = 水色
GraphicsWindow.FontSize = 30
GraphicsWindow.FontName = "Meiryo UI"
GraphicsWindow.FontBold = "False"

'コメント：座標は 横が1040 高さが480に設定してあるのでこの範囲内で座標を決めます。
GraphicsWindow.DrawText(700,20,タイトル1 )
GraphicsWindow.DrawText(750,50,タイトル2 )
' ========== ラベルを配置する =====================
GraphicsWindow.FontSize =17
GraphicsWindow.BrushColor = 白色
GraphicsWindow.DrawText(750,130, "点数(残り): ")
GraphicsWindow.DrawText(750,160, " 経過秒: ")
GraphicsWindow.BrushColor = 白色 ' ' 図形の塗りつぶしに使うブラシの色
GraphicsWindow.PenColor = 白色 ' 図形の描画に使うペンの色

ボール = Shapes.AddEllipse(ボールサイズ, ボールサイズ) ' 指定さ'れた横幅と高さで楕円を追加します
Shapes.Move(ボール, ボール座標x , ボール座標Y)

箱残り=0
得点 = Shapes.AddText(箱残り) ' テキストを、移動、動画化、または回転できる図形として追加します
Shapes.Move(得点,850,130) ' 指定された名前の図形を新しい場所に移動します
経過時間 = Shapes.AddText(箱残り) ' テキストを、移動、動画化、または回転できる図形として追加しま
Shapes.Move(経過時間,850,160) ' 指定された名前の図形を新しい場所に移動します

Shapes.Move(ボール, ボール座標x , ボール座標Y)

ボール座標y=50
経過秒初期値 = Clock.ElapsedMilliseconds ' 1900 年から現在までのミリ秒数を取得します。

ここまでをコピーして実行すると、以下の画面になるはずです。

もしエラーが出た場合、エラーコマンドが修復の手伝いをしてくれます。

このエラーは、『76行目の33列にある「色白」は事前の申し込みがないから私にはわかりません』という意味になります。確かに「白色」としたはずが、「Small Basic」のバグのせいで漢字が入れ替わってしまい「色白」になっています。これより前に「色白」を定義するか、もしくは「色白」を「白色」に修正するとエラーは無くなります。

左がボールが動く初期画面です。右はゲームの進行状況を表示するエリアになります。ここの「ジィジが作った太郎のブロック崩し」の文字を、ご自分の環境に合わせて変更してみてください。また、文字の大きさ・場所・色なども変更してみましょう。そうすることによりプログラミングの理解度が上がります。

では次に、ボールが動くところまでを仕上げていきましよう。以下を「コピー」して、先ほど貼り付けた前半部分のプログラムの後ろに「貼付け」して実行してください。

'コメント：ゲーム開始位置: はプログラム中の住所です。 後ろにある 「goto ゲーム開始位置」 で
' この場所に実行先を移動します。

' >>>>>>>>>>>>>>>>>>>>>>>>>>>
ゲーム開始位置:
' >>>>>>>>>>>>>>>>>>>>>>>>>>>

'コメント：ボールが動くプログラムを記述します。このロジックは次回ご説明します。

縦速度 = 縦速度 + 重力

ボール座標x = ボール座標x + 横速度
ボール座標y = ボール座標y + 縦速度

If (ボール座標y >高さ-ボールサイズ) Then
縦速度 = -縦速度 * 反発1
ボール座標y = 高さ-ボールサイズ
EndIf

If (ボール座標y <=0) Then 
縦速度 = -縦速度 * 反発1 
ボール座標y =0 
EndIf 

If (ボール座標x >幅1-ボールサイズ) Then
横速度 = -横速度 * 反発1
ボール座標X = 幅1-ボールサイズ
EndIf

If (ボール座標x <0 ) Then 
横速度 = -横速度 * 反発1 
ボール座標X =0 
EndIf 

if 縦速度>縦速度Max Then
縦速度=縦速度*0.5
EndIf

if 横速度>横速度Max then
横速度=横速度*0.5
EndIf
Shapes.Move(ボール, ボール座標x , ボール座標Y)
Program.Delay (7)

箱残り=箱残り+1

'コメント：ここで Sub 得点表示 に飛んでその中身を実行したあとこの場所に戻ってきます。
得点表示()

'コメント：ここで ゲーム開始位置： という住所に実行を移します。 これは goto なので行きっぱなしです。
goto ゲーム開始位置

Sub 得点表示

GraphicsWindow.BrushColor = 白色
GraphicsWindow.FontSize = 30
GraphicsWindow.FontName = "Meiryo UI"
GraphicsWindow.FontBold = "False"

Shapes.SetText(得点,箱残り)

経過秒 = Clock.ElapsedMilliseconds - 経過秒初期値
経過秒 = Math.Floor( 経過秒 / 1000)

Shapes.SetText(経過時間,経過秒)

EndSub
 

ボールサイズ =32
縦速度Max = 10
横速度Max = 7
重力 = 0.015
反発1=1.2

など、これらを一つずつお好きな数字に変更して動作を確認してみましょう。

※このプログラムには「終了」するコマンドがありません。終了させる場合は、メイン画面右下の「プログラムの終了」、または動作画面右上の「X」をクリックして終わらせてください。

さあ、ボールは動くようになりましたでしょうか。

プログラムの後半に出てきました「Sub 得点表示」ですが、これは「サブルーチン」、または「サブプログラム」、もしくは「プロシジャー」と呼ばれる実行プログラムのかたまりです。ほかの言語では「Call 得点表示」と記述する場合が多いので、「Call 関数」と呼ぶ場合もあります。

「Small Basic」では「得点表示()」と記述し、「Call」はない代わりに「（）」を付けて呼び出します。サブプログラムはメインプログラムの各所から何度でも呼び出すことが出来ます。使い回しをすることで効率が上がるメリットがあります。「１回でも呼び出せるならサブプログラム化しましょう」というのが定説です。

どうでしょう、ここまではご理解いただけましたでしょうか。今回のプログラミング講座は以上になります。

さてここからは、我が家のちょっとした「DIY」を5つほどご紹介します。

まずは1つ目。我が家はマンションで、玄関はオートロックなんです。10秒後にドアが勝手に閉じます。また郵便ポストですが、薄いハガキが１枚だけ入っている場合、ポストの底面にくっついてしまい、なかなか取り出せなくて難儀します。モタモタして10秒を超えると、再度ドアを開けなければなりません。

そこで、郵便ポストに青い「プラダン」を引いて、夕方でも郵便物の有無を見やすくし、かつ「L型のエンビアングル」を貼り付けました。これで薄いハガキやチラシもすぐに取り出せます。

そして２つめ。大地震でマンションが傾くと、玄関ドアがゆがんで外に出られないという話を聞いたことがあります。そこで、普段は使わない「バール」を玄関横にぶら下げています。これで体力の無い老人でも、もし大地震が起きても部屋に閉じ込められるようなことはないでしょう。しかし、使う事が無いよう祈っています。

そして3つ目。傘立てはあるのですが、いつも面倒で下駄箱の角にぶら下げます。これは便利なのですが、靴を出すときに傘を移動しなければなりません。そこで「アングル」を扉に取り付けました。扉と一緒に傘も動くので、靴を取り出す時に邪魔になりません。

そして4つ目。外出する時、「財布・車・部屋のキー・カードケース・小銭入れ」を持ち出すのですが、時々なにかを忘れます。そこで、写真のようにおのおのを定位置に置いて、忘れものを防止しています。

そして最後。同じ場所にスマホ置き場も作りました。マグネット式のコネクタで、スイッチをONにするとランプがついて充電を開始します。

皆様の生活の中で少しでもご参考になれば幸いです。ではまた次回をお楽しみに！！